Gridview header align to left, does not work on IE9, but it works on chrome

Question

I have a gridview which headers I want to align to the left. It works in chrome, but in IE 9 they are not aligned to the left.

(I paste the entire code, in case some surrounded div is responsible of this behavior.)

        <div style="height: 300px; overflow: auto">
            <asp:GridView ID="myGrid" 
                AutoGenerateColumns="true"
                runat="server" CellPadding="4" ForeColor="#333333" GridLines="None" Width="100%">
                <AlternatingRowStyle BackColor="White" ForeColor="#284775" />
                <EditRowStyle BackColor="#999999" />
                <FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
                <HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" HorizontalAlign="Left" />
                <PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />
                <RowStyle BackColor="#F7F6F3" ForeColor="#333333" HorizontalAlign="Left"/>
                <SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
                <SortedAscendingCellStyle BackColor="#E9E7E2" />
                <So![enter image description here][1]rtedAscendingHeaderStyle BackColor="#506C8C" />
                <SortedDescendingCellStyle BackColor="#FFFDF8" />
                <SortedDescendingHeaderStyle BackColor="#6F8DAE" />
            </asp:GridView>
        </div>
        <div style="margin-top: 20px; margin-left: 550px">
            <asp:Button ID="btnClose" runat="server" Text="Close" />
        </div>
        <div>
            <asp:Label ID="lblError" runat="server" Text=""></asp:Label>
        </div>
    </div>

Update1: CSS

#DeltaPlaceHolderMain #ctl00_PlaceHolderMain_myGrid tr:first-child{
    background-color:#eb8c00 !important;
    color:#FFF !important;
    }
#DeltaPlaceHolderMain #ctl00_PlaceHolderMain_myGrid tr:first-child td{
    text-align:left;
    }

#DeltaPlaceHolderMain #ctl00_PlaceHolderMain_myGrid tr{
    color:#404041 !important;
    }

Answer 1

This works. Add a 'CssClass' to your HeaderStyle:

<HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" HorizontalAlign="Left" CssClass="headerClass" />

And then declare the following style:

/*Give a text-align left only to the gridview header th's*/
.headerClass > th 
{
    text-align:left;
}

To explain a little further, what will happen is HeaderStyle.CssClass will give a class to the <tr> containing your header. The CSS selector .headerClass > th applies its style then to all children <th> of your header, therefore applying the left text align to each header cell.

Answer 2

Cant you just put

table th {text-align:left;}

In your CSS?

Or am I missing something?

Answer 3

You cannot align left on a tr .

td or th however, will work.

In any case I would suggest doing this with a css class or with the th in your css file.

.myLeftAlign {
text-align: left;
}

or

th {
text-align: left;
}

If you do not want to use css, put the Align attribute on your th in stead of your tr