ASP.NET GridView CSS issue when sorting turned on

Question

I created a GridView in an ASP.NET application and used the Auto Format tool to apply an attractive style. Now I'm moving the style markup to the CSS sheet and I'm having a weird problem where the text in the header row isn't the correct color (it should be white but it shows up a bright blue). This problem only shows up when I turn sorting on.

Everything else works fine. For example, I can change the header background to red and it turns red and the rest of the grid styles are applied appropriately.

Anybody have any clues about what the deal is? I've included code snippets below. I'm also fairly new to CSS. If anyone has any tips to make my CSS markup better in some way, let me know.

Thanks!

Here is the ASP.NET code. I can add ForeColor="White" to the HeaderStyle and everything works normally.

<asp:GridView ID="GridView1" runat="server" CssClass="grid"
AutoGenerateColumns="False" DataKeyNames="ID" DataSourceID="SqlDataSource1" 
EmptyDataText="There are no data records to display." AllowSorting="True" 
CellPadding="4" GridLines="Both">
<FooterStyle CssClass="grid-footer" />
<RowStyle CssClass="grid-row" />
    <Columns>
        <asp:BoundField DataField="Kingdom" HeaderText="Kingdom" 
            SortExpression="Kingdom" />
        <asp:BoundField DataField="Phylum" HeaderText="Phylum" 
            SortExpression="Phylum" />
        <asp:BoundField DataField="GenusSpeciesStrain" HeaderText="Genus species (strain)" 
            SortExpression="GenusSpeciesStrain" />
        <asp:BoundField DataField="Family" HeaderText="Family" 
            SortExpression="Family" />
        <asp:BoundField DataField="Subfamily" HeaderText="Subfamily" 
            SortExpression="Subfamily" />
        <asp:BoundField DataField="ElectronInput" HeaderText="Electron Input" 
            SortExpression="ElectronInput" />
        <asp:BoundField DataField="OperonLayout" HeaderText="Operon Layout" 
            SortExpression="OperonLayout" />
    </Columns>
    <PagerStyle CssClass="grid-pager" />
    <SelectedRowStyle CssClass="grid-selected-row" />
    <HeaderStyle CssClass="grid-header" />
    <EditRowStyle CssClass="grid-row-edit" />
    <AlternatingRowStyle CssClass="grid-row-alternating" />

And this is the content from style sheet I'm using:

body {
}

.grid
{
    color: #333333;
}

.grid-row
{
    background-color: #EFF3FB;
}

.grid-row-alternating
{
    background-color: White;
}

.grid-selected-row
{
    color: #333333;
    background-color: #D1DDF1;
    font-weight: bold;
}

.grid-header, .grid-footer
{
    color: White;
    background-color: #507CD1;
    font-weight: bold;
}

.grid-pager
{
    color: White;
    background-color: #2461BF;
    text-align: center;
}

.grid-row-edit
{
    background-color: #2461BF;
}

Answer 1

The header color in the stylesheet is correct: #507CD1 is bright blue. Where does it show up as white, then? In Visual Studio's designer? Do you mean for the header background to be white, or the text?

Also, it couldn't hurt to remove the ForeColor="White" from the markup. It's already in the stylesheet.

Update: I haven't read the question thoroughly enough, my apologies. The above is nonsense. (Or the question has been modified while I was composing my answer. Don't know)

Answer 2

Hi Dana,

I'm not really sure how you're getting a white background on your header w/ or w/o the sorting because you have your grid-header background set that blue color (#507CD1) in your CSS:

.grid-header, .grid-footer { color: White; background-color: #507CD1; font-weight: bold; }

here's what it needs to be if you want the header background white (you'll need change the font color to something darker also):

.grid-header, .grid-footer { color: #000; background-color: #fff; font-weight: bold; }

and you also need to remove the ForeColor from the GridView's HeaderStyle attribute to be able to see the text in your header like so:

<HeaderStyle CssClass="grid-header" />

hope that helps!

-gabe

i looks my post crossed w/ miies.myopenid.com...

Answer 3

I'm guessing the bright blue is very similar to the color of a hyperlink. Making the gridview sortable means you'll have an a tag inside your header instead of just plain text.

This should sort it: .grid-header a { color: White; background-color: #507CD1; font-weight: bold; }

Answer 4

The following worked for me. Add:

.grid-header th a
{
    color: White;
}

The "th a" works regardless of AllowSorting.

Answer 5

This is the only way I can get it to work:

.HeaderStyle a
{
    background-color: #DE7B0A;
    color: White!important
}

I've noticed that the .aspx that gets rendered puts a style="color:#333333" tag on the link itself. Making the color option !important to override the default rendering is the only way I can get it to work.

Hope that helped someone.