CSS Forum

**dariusgemini** · 01-02-2009, 01:39 PM

Hey folks.
First time poster, be gentle with me.

I am currently having an issue with an internal webiste that has been causing me considerable grief.

I have tables with fixed header rows that are working well, with one very irritating exception.

We use an onblur method on our text boxes to perform validation.
If the field has an error, we change the color of the text box to represent this. If the field is fine, we set it to the original color it was before we flagged it as an error. Pretty normal, right?

Well, this is when things get interesting. If the user scrolls down any amount in the table, and then clicks in and then out of the field, triggering the onblur, the fixed header jumps right out of the table. It's as if the top value is being set to where it WOULD have been in the table had the position not been set to relative. Further scrolling will not move the header from it's position on the page, until the onblur triggers again, with the header moving to a different position.

The problem is not with the onblur event or the text boxes. I have placed a button outside of the table and container div, and used it to cause the same problem by changing the class of a tr or td.

Some more background info before I post code.

It only occurs in IE7. (The only browser I need to support.)
I know a way to fix the problem using an expression involving scrollTop on the headerRow, but I'd like to avoid it for performance reasons.
The table MUST be variable width.
I absolutely need to set a class, and not set individual styles. I have 100+ pages that use the validation classes in the js validation routines.

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<head>
<style type="text/css">
HTML {
 height:100%; 
 max-height:100%; 
 padding:0px; 
 margin:0px; 
 background:rgb(240, 250, 256);
}
BODY {
 height:100%; 
 max-height:100%; 
 padding:0px; 
 background:rgb(240, 250, 256);
}
#pageSpace{
 height:100px;
}
.testClass{
 color:red;
}
#tableContainer {
 
 border: 1px solid Black;
 
 height: 400px;
 overflow-Y: scroll;
}
 
#fixedHeader tr {
 position: relative;
 background-color:cyan;
}
</style>
</head>
<body>
<div id='pageSpace'></div>
<table>
<tr><td>
<div id="tableContainer" >
<table>
<thead id="fixedHeader">
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
</thead>
<tbody class="scrollContent">
  <tr>
     <td>Cell Content</td>
     <td><input type="text" name="sampleText" value="Text element" onblur="this.className='testClass'"/></td>
  </tr>
  <tr>
     <td>Cell Content</td>
     <td><input type="text" name="sampleText" value="Text element" onblur="this.className='testClass'"/></td>
  </tr>  
  <tr>
     <td>Cell Content</td>
     <td><input type="text" name="sampleText" value="Text element" onblur="this.className='testClass'"/></td>
  </tr>
  <tr>
     <td>Cell Content</td>
     <td><input type="text" name="sampleText" value="Text element" onblur="this.className='testClass'"/></td>
  </tr>
  <tr>
     <td>Cell Content</td>
     <td><input type="text" name="sampleText" value="Text element" onblur="this.className='testClass'"/></td>
  </tr>
  <tr>
     <td>Cell Content</td>
     <td><input type="text" name="sampleText" value="Text element" onblur="this.className='testClass'"/></td>
  </tr>  
  <tr>
     <td>Cell Content</td>
     <td><input type="text" name="sampleText" value="Text element" onblur="this.className='testClass'"/></td>
  </tr>
  <tr>
     <td>Cell Content</td>
     <td><input type="text" name="sampleText" value="Text element" onblur="this.className='testClass'"/></td>
  </tr>
  <tr>
     <td>Cell Content</td>
     <td><input type="text" name="sampleText" value="Text element" onblur="this.className='testClass'"/></td>
  </tr>
  <tr>
     <td>Cell Content</td>
     <td><input type="text" name="sampleText" value="Text element" onblur="this.className='testClass'"/></td>
  </tr>  
  <tr>
     <td>Cell Content</td>
     <td><input type="text" name="sampleText" value="Text element" onblur="this.className='testClass'"/></td>
  </tr>
  <tr>
     <td>Cell Content</td>
     <td><input type="text" name="sampleText" value="Text element" onblur="this.className='testClass'"/></td>
  </tr>
  <tr>
     <td>Cell Content</td>
     <td><input type="text" name="sampleText" value="Text element" onblur="this.className='testClass'"/></td>
  </tr>
  <tr>
     <td>Cell Content</td>
     <td><input type="text" name="sampleText" value="Text element" onblur="this.className='testClass'"/></td>
  </tr>  
  <tr>
     <td>Cell Content</td>
     <td><input type="text" name="sampleText" value="Text element" onblur="this.className='testClass'"/></td>
  </tr>
  <tr>
     <td>Cell Content</td>
     <td><input type="text" name="sampleText" value="Text element" onblur="this.className='testClass'"/></td>
  </tr>
  <tr>
     <td>Cell Content</td>
     <td><input type="text" name="sampleText" value="Text element" onblur="this.className='testClass'"/></td>
  </tr>
  <tr>
     <td>Cell Content</td>
     <td><input type="text" name="sampleText" value="Text element" onblur="this.className='testClass'"/></td>
  </tr>  
  <tr>
     <td>Cell Content</td>
     <td><input type="text" name="sampleText" value="Text element" onblur="this.className='testClass'"/></td>
  </tr>
  <tr>
     <td>Cell Content</td>
     <td><input type="text" name="sampleText" value="Text element" onblur="this.className='testClass'"/></td>
  </tr>
  <tr>
     <td>Cell Content</td>
     <td><input type="text" name="sampleText" value="Text element" onblur="this.className='testClass'"/></td>
  </tr>
  <tr>
     <td>Cell Content</td>
     <td><input type="text" name="sampleText" value="Text element" onblur="this.className='testClass'"/></td>
  </tr>  
  <tr>
     <td>Cell Content</td>
     <td><input type="text" name="sampleText" value="Text element" onblur="this.className='testClass'"/></td>
  </tr>
  <tr>
     <td>Cell Content</td>
     <td><input type="text" name="sampleText" value="Text element" onblur="this.className='testClass'"/></td>
  </tr>
  <tr>
     <td>Cell Content</td>
     <td><input type="text" name="sampleText" value="Text element" onblur="this.className='testClass'"/></td>
  </tr>
  <tr>
     <td>Cell Content</td>
     <td><input type="text" name="sampleText" value="Text element" onblur="this.className='testClass'"/></td>
  </tr>  
  <tr>
     <td>Cell Content</td>
     <td><input type="text" name="sampleText" value="Text element" onblur="this.className='testClass'"/></td>
  </tr>
  <tr>
     <td>Cell Content</td>
     <td><input type="text" name="sampleText" value="Text element" onblur="this.className='testClass'"/></td>
  </tr>
  <tr>
     <td>Cell Content</td>
     <td><input type="text" name="sampleText" value="Text element" onblur="this.className='testClass'"/></td>
  </tr>
  <tr>
     <td>Cell Content</td>
     <td><input type="text" name="sampleText" value="Text element" onblur="this.className='testClass'"/></td>
  </tr>  
  <tr>
     <td>Cell Content</td>
     <td><input type="text" name="sampleText" value="Text element" onblur="this.className='testClass'"/></td>
  </tr>
  <tr>
     <td>Cell Content</td>
     <td><input type="text" name="sampleText" value="Text element" onblur="this.className='testClass'"/></td>
  </tr>
  <tr>
     <td>Cell Content</td>
     <td><input type="text" name="sampleText" value="Text element" onblur="this.className='testClass'"/></td>
  </tr>
  <tr>
     <td>Cell Content</td>
     <td><input type="text" name="sampleText" value="Text element" onblur="this.className='testClass'"/></td>
  </tr>  
  <tr>
     <td>Cell Content</td>
     <td><input type="text" name="sampleText" value="Text element" onblur="this.className='testClass'"/></td>
  </tr>
  <tr>
     <td>Cell Content</td>
     <td><input type="text" name="sampleText" value="Text element" onblur="this.className='testClass'"/></td>
  </tr>
  <tr>
     <td>Cell Content</td>
     <td><input type="text" name="sampleText" value="Text element" onblur="this.className='testClass'"/></td>
  </tr>
  <tr>
     <td>Cell Content</td>
     <td><input type="text" name="sampleText" value="Text element" onblur="this.className='testClass'"/></td>
  </tr>  
  <tr>
     <td>Cell Content</td>
     <td><input type="text" name="sampleText" value="Text element" onblur="this.className='testClass'"/></td>
  </tr>
  <tr>
     <td>Cell Content</td>
     <td><input type="text" name="sampleText" value="Text element" onblur="this.className='testClass'"/></td>
  </tr>
  <tr>
     <td>Cell Content</td>
     <td><input type="text" name="sampleText" value="Text element" onblur="this.className='testClass'"/></td>
  </tr>
  <tr>
     <td>Cell Content</td>
     <td><input type="text" name="sampleText" value="Text element" onblur="this.className='testClass'"/></td>
  </tr>  
  <tr>
     <td>Cell Content</td>
     <td><input type="text" name="sampleText" value="Text element" onblur="this.className='testClass'"/></td>
  </tr>
  <tr>
     <td>Cell Content</td>
     <td><input type="text" name="sampleText" value="Text element" onblur="this.className='testClass'"/></td>
  </tr>
  <tr>
     <td>Cell Content</td>
     <td><input type="text" name="sampleText" value="Text element" onblur="this.className='testClass'"/></td>
  </tr>
  <tr>
     <td>Cell Content</td>
     <td><input type="text" name="sampleText" value="Text element" onblur="this.className='testClass'"/></td>
  </tr>  
  <tr>
     <td>Cell Content</td>
     <td><input type="text" name="sampleText" value="Text element" onblur="this.className='testClass'"/></td>
  </tr>
  <tr>
     <td>Cell Content</td>
     <td><input type="text" name="sampleText" value="Text element" onblur="this.className='testClass'"/></td>
  </tr>
</tbody>
</table>
</div>
</td>
</tr>
</table>
</body></html>

**LadynRed** · 01-02-2009, 02:37 PM

Have you tried setting #tableContainer to position:relative ?
As it is, your fixed header is positioning relative to the body, although it may not make much difference since you're using tables anyway.

**dariusgemini** · 02:52 PM

Thanks for the reply.

I just tried that, and all it did was cause the fixed header to scroll with the table, so no go.

One thing I forgot to mention, is that the outer table in the sample code isn't really needed.
I just had that there as a cheap way to force the container div to be the size of the inner table.