ASP.NET Gridview control renders as an HTML table. I picked up this technique below but cannot quite get it right:

I am struggling getting my Gridview in ASP.NET 2.0 Visual Studio 2005 to freeze the column header row and provide for scrolling of the remaining data rows. My specific problems right now are:

* (IE7) column headers freeze as intended and do not scroll BUT scroll bar is not initially visible to user (requires scrolling with mouse wheel before vertical scroll bars are exposed in gridview)

* (Firefox 2.0.10) column header row just scrolls out of sight like any other row

Here is part of my default.css in my default App_Theme folder:



/* So the overflow scrolls */
div.coveragesContainer
{
overflow: auto;
height: 380px; /* must be greater than tbody*/
position: relative;
margin: 0 auto;
}
/* Keep the header cells positioned as we scroll */
.coveragesContainer table th
{
position:relative;
top: expression(this.offsetParent.scrollTop); /* see note just below */
}

/* For alignment of the scroll bar */
.coveragesContainer table tbody
{
overflow: visible;
}

Please note that the editor in Visual Studio 2005 complains about the line above top: expression(this.offsetParent.scrollTop); with the design time error (squiggle line) reading as: 'expression(this.offsetParent.scrollTop)' is not a valid value for the 'top' property. Not sure what is happening there...maybe significant?

Here is the design from my content page:


<div class="coveragesContainer">
<asp:GridView
ID="gridViewStateCounty"
SkinID="coveragesGrid"
runat="server"
pagesize="20"
AutoGenerateColumns="False" ForeColor="#333333" GridLines="Vertical">
<Columns>
<asp:BoundField
DataField="StateName" HeaderText="State"
ItemStyle-Width="120"
InsertVisible="False" ReadOnly="True" ItemStyle-CssClass="onlyHorizontalCellSpacing"/>
<asp:BoundField
DataField="CountyName" HeaderText="County"
ItemStyle-Width="120"
InsertVisible="False" ReadOnly="True" ItemStyle-CssClass="onlyHorizontalCellSpacing"/>
</Columns>
</asp:GridView>
</div>

Here is the portion of my default.skin in my default theme:



<asp:GridView SkinID="coveragesGrid" runat="server"
AutoGenerateColumns="False" width="100%"
ForeColor="#333333" GridLines="Vertical" PageSize="15" >
<FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
<RowStyle BackColor="#eeffdd" />
<HeaderStyle BackColor="#000000" Font-Bold="True" ForeColor="White" Wrap="true" HorizontalAlign="Center"/>
<AlternatingRowStyle BackColor="White" />
</asp:GridView>

The markup on my content page is contained within an asp:UpdatePanel and the content page itself is fit within a contentplaceholder control of a master page.

My page is viewable at:

http://www.mortgagedataweb.com/MDWel...rageAreas.aspx

Click the State dropdownlist and choose a state with many counties (e.g. Georgia) to introduce the overflow and repro the behavior of the scroll bar not being initially visible (IE7); same sequence with Firefox causes the column header to scroll out of view like all other rows.