css problem in top:??

Question

i have to fix the header in a gridview and i use this in style Class

<style type="text/css">
 .gridFixedHeader
{
background-color:white;
position:relative;
top:expression(GridView1.offsetParent.scrollTop-2);
}
</style>

but i get an error that expression(GridView1.offsetParent.scrollTop-2);is not valid... what all do i need to do to make this work.....

any suggestions

Main aim... to fix the headers so they dont move when the gridview is scrolled up or down...

any help will be appreciated...

here is my gridview code

<asp:Panel ID="Panel1" runat="server" Height="100px" ScrollBars="Vertical">

 <asp:GridView ID="GridView1" runat="server" AllowSorting="True" 
        AutoGenerateColumns="False" BackColor="White" BorderColor="#CCCCCC" 
        BorderStyle="None" BorderWidth="1px" CellPadding="3"  
        DataKeyNames="MachineGroupID" DataSourceID="SqlDataSource1">
        <RowStyle ForeColor="#000066" />
        <HeaderStyle CssClass="gridFixedHeader" />
        <Columns>
            <asp:BoundField DataField="MachineGroupID" HeaderText="MachineGroupID" 
                InsertVisible="False" ReadOnly="True" SortExpression="MachineGroupID" />
            <asp:BoundField DataField="MachineGroupName" HeaderText="MachineGroupName" 
                SortExpression="MachineGroupName" />
                        </Columns>
        <FooterStyle BackColor="White" ForeColor="#000066" />
        <PagerStyle BackColor="White" ForeColor="#000066" HorizontalAlign="Left" />
        <SelectedRowStyle BackColor="#669999" Font-Bold="True" ForeColor="White" />
        <HeaderStyle BackColor="#006699" Font-Bold="True" ForeColor="White" />
    </asp:GridView>
    </asp:Panel>

so here i have a gridview where when i scroll the header row moves too.. i dont want that to happen..

Answer 1

You are heavily advised against using CSS expressions, as they get executed on every event of the browser - including mouseMove. They also don't work on anything but IE.

I can't answer your question further due to lack of details of what you're trying to achieve.

Answer 2

It is not valid in W3C. It is an IE only thing. To do what you are looking for in a valid way would require you to run some JavaScript and fix your headers.

If you explain your desired outcome I am sure someone can help. I have made GridView headers look exactly like I want many times.

UPDATE: Here is a good article: http://www.dotnetcurry.com/ShowArticle.aspx?ID=255

Answer 3

If you're trying to fix it to the top of the viewport try:

.gridFixedHeader
{
background-color:white;    
position:fixed;
top:20px; //optional
}

in the elements CSS

edit: just realised you look like you're styling a GridViews header so this will probably not work, try posting some of the Gridview generated HTML and what yo want done with it please

Answer 4

When the gridview is rendered to html, the GridView1 ID is probably being rewritten.

you probably want something like:

top:expression(<%= GridView1.ClientID %>.offsetParent.scrollTop-2);

although this may get you what you want it's probably not the best form.