In the Modal Popup post I discussed the use of an Iframe with a transparency filter to prevent drop down (select) lists lying under a DIV from peeking through. I've also used the technique in the past to prevent select lists from appearing over static headers. Please note that this is not my original idea; in fact one of my colleagues, Norman, found the trick on the web somewhere.
We use an IE only CSS expression to keep table headers static (Norman and I actually came up with that one together). The CSS to do this looks like this:
<style>
.ScrollingArea
{
overflow-y: auto;
}
.StaticHeader
{
position: relative;
top: expression(this.offsetParent.scrollTop-1);
}
</style>
The styles are then applied to the following markup:
<div style="height:60px; width:1%" class="ScrollingArea">
<table cellpadding="0" cellspacing="0" width="200px">
<thead>
<tr class="StaticHeader">
<td>Name</td>
<td>Status</td>
</tr>
</thead>
<tbody>
<tr>
<td>First</td>
<td>Active</td>
</tr>
</tbody>
</table>
</div>
And this is it in action: StaticHeaderDemo.html
Well now we have a static header, butif one of the columns contains a select list, like this StaticHeaderWithSelectDemo.html, you then end up with the unfortunate result illustrated below:
To fix this one can add the iframe to the effected header cell with the following style:
<style>
.DropDownBlocker
{
position: absolute;
height: expression(this.parentElement.offsetHeight);
width: expression(this.parentElement.offsetWidth);
filter: progid: DXImageTransform.Microsoft.Alpha(opacity=0);
}
</style>
<div style="height:60px; width:1%" class="ScrollingArea">
<table cellpadding="0" cellspacing="0" width="200px">
<thead>
<tr class="StaticHeader">
<td>Name</td>
<td><iframe class="DropDownBlocker"></iframe>Status</td>
</tr>
</thead>
<tbody>
<tr>
<td>First</td>
<td>
<select>
<option>Active</option>
</select>
</td>
</tr>
</tbody>
</table>
</div>
You can view the full example here: FixedStaticHeaderWithSelectDemo.html