Fixed Header on a Data Grid using CSS - problem with Drop downs

[Guest]

Hi Guys,
Hopefully some one will have come across this issue already. I have a
DataGrid inside a Div where a scroll bar displays once a certain height is
meet

--> <div id="dvSales" style="height: 230px; overflow: auto; width: 100%"
runat="server">

The Data Grid has AllowPaging is set to False and the HeaderStyle tag is set
for the DataGrid so that the header remains fixed when we scroll using the
scroll bar.

--> <HeaderStyle CssClass="DataGridFixedHeader"></HeaderStyle>

Here is the style in the CSS for the fixed header
--> .DataGridFixedHeader
{
background-color: white;
position:relative;
top:expression(this.offsetParent.scrollTop);
}

This works fine for my Data Grid but only when the Grid has no drop downs as
part of it. If there is drop downs as part of the data grid then they do not
become transparent when we use the scroll bar. I read somewhere that this
has to do with the fact that a drop down in HTML is given higher priority
than other HTML controls when rendering. Anybody have any ideas on how to
fix?

 

[bcutting]

This is one of IEs great blunders. I have struggled with this bug too
many times to count. The problem is that the DropDown in IE is a
windowed component and doesn't read the zindex assigned in the HTML.
If you notice it works fine in other browsers. One option would use
javascript and during scrolling hide all dropdowns within the div, then
do a hit count within your div to set the visibility flag based on
which are inside your clipped space. This looks good but is a
significant hit to the browser and is more javascript then most care to
write. You may want to try an IFrame, but then you have to deal with
the posting to different pages problem.

Endo