Why isn't my GridView CSSClass being applied?

Question

I am trying to set up a new web page in ASP.net. I am using a gridview with paging however the CSS class I am trying to use isn't getting applied. The CSS on the rest of the page is working, it is just in relation to this one gridview. I have not been able to find the answer through google. Please help, any assisstance is appreciated!

I have tried changing CSS class to class, I have tried changing the CSS Class, I have tried removing the CSS link from the Site Master, I have tried removing the DIV container from around the Gridview, but none of this made a difference.

Gridview:

<%--Records of the graphed data --%>
    <div class="Records">
<h4>Shutdown Records</h4>
        <asp:GridView ID="datagrid" runat="server" DataSourceID="SqlDataSource6" CssClass="mGrid" PagerStyle-CssClass="pgr" AlternatingRowStyle-CssClass="alt" 
           PageSize="6" AllowPaging="True" OnPageIndexChanging="datagrid_PageIndexChanging" Width="100%">
    </asp:GridView>
    <asp:SqlDataSource ID="SqlDataSource6" runat="server" 
        ConnectionString="<%$ ConnectionStrings:Automation %>"
        ProviderName="System.Data.SqlClient" SelectCommand="select ShutdownDate, ShutdownNotes, StartupDate, StartupNotes, Cast
(
    Round 
    (
        (
        Cast
            (
            SUM(TotalDownTime)as decimal(18, 2)
            )/3600
        )
    , 2 
    ) as decimal(18, 2) 
) as 'Duration of Shutdowns (Hours)' 
from ProductionShutdownRecord 
where Reason like '%'+@Reason+'%'
and ShutdownNotes like '%'+@shutdownNotes+'%'
and StartupNotes like '%'+@startupNotes+'%'
and ShutdownDate &gt;= @startDate
and ShutdownDate &lt;= @endDate
and AMSTaskRelated like 
    CASE 
        when @AMS = 1 then '%1%'
        else '%%'
    END
group by ShutdownDate, ShutdownNotes, StartupDate, StartupNotes
order by shutdowndate asc
">
                <SelectParameters>
                <asp:ControlParameter ControlID="DropDownList1" DefaultValue="Scheduled Release" 
                    Name="Reason" PropertyName="SelectedValue" Type="String" />
                <asp:ControlParameter ControlID="shutdownNotes" ConvertEmptyStringToNull="False" 
                    Name="shutdownNotes" PropertyName="Text" Type="String" />
                <asp:ControlParameter ControlID="startupNotes" ConvertEmptyStringToNull="False" 
                    Name="startupNotes" PropertyName="Text" Type="String" />
                <asp:ControlParameter ControlID="startDate" ConvertEmptyStringToNull="False" 
                    Name="startDate" PropertyName="Text" Type="String" />
                <asp:ControlParameter ControlID="endDate" ConvertEmptyStringToNull="False" 
                    Name="endDate" PropertyName="Text" Type="String" />
                <asp:ControlParameter ControlID="AMSCheck"
                    Name="AMS" PropertyName="Checked"/>
                </SelectParameters>
</asp:SqlDataSource>
</div>

CSS:

/* Gridview Style
-------------------------------------------------------------------------------------------------------------*/
.mGrid {
    width: 100%;
    background-color: #fff;
    margin: 5px 0 10px 0;
    border: solid 1px #525252;
    border-collapse: collapse;
}

    .mGrid td {
        padding: 2px;
        border: solid 1px #c1c1c1;
        color: #717171;
    }

    .mGrid th {
        padding: 4px 2px;
        color: #fff;
        background: #424242 url(grd_head.png) repeat-x top;
        border-left: solid 1px #525252;
        font-size: 0.9em;
    }

    .mGrid .alt {
        background: #fcfcfc url(grd_alt.png) repeat-x top;
    }

    .mGrid .pgr {
        background: #424242 url(grd_pgr.png) repeat-x top;
    }

        .mGrid .pgr table {
            margin: 5px 0;
        }

        .mGrid .pgr td {
            border-width: 0;
            padding: 0 6px;
            border-left: solid 1px #666;
            font-weight: bold;
            color: #fff;
            line-height: 12px;
        }

        .mGrid .pgr a {
            color: #666;
            text-decoration: none;
        }

            .mGrid .pgr a:hover {
                color: #000;
                text-decoration: none;
            }

Expected Result: I am trying to use this CSS Template: http://atashbahar.com/post/2009-01-23-aspnet-gridview-makeover-using-css

Actual Result: I am getting a plain white gridview.

Could you provide us with the resulting HTML? Also first thing I'd try is clearing your cache if you haven't already (pressing `Ctrl` + `Shift` + `R` in most major browsers will do the trick) — MichaelM, Sep 27 '19 at 14:46
Wow, clearing my cache worked! But why did that work? Could you please explain? — user1457104, Sep 27 '19 at 16:18
Of course! So modern browsers cache resources like javascript and css files so that the next time you visit, they load even faster. If you make a change to your CSS and they aren't appearing, odds are good your browser is still using the cached version. Pressing `Ctrl` + `Shift` + `R` clears those cached objects and forces the browser to grab a new copy! — MichaelM, Sep 27 '19 at 17:11
Happy to help! Check out things like [cache busting](https://css-tricks.com/strategies-for-cache-busting-css/) or how to disable the cache for your browser with the developer tools to make your life a little easier — MichaelM, Sep 27 '19 at 18:04

score 1 · Accepted Answer · answered Sep 28 '19 at 12:58

For posterity's sake so the question can have an answer, I'll write out the solution here.

Use the keyboard shortcut Ctrl + Shift + R in order to clear your browser's cache. Modern browsers cache resources like javascript and css files so that the next time you visit, they load even faster. If you make a change to your CSS and they aren't appearing, odds are good your browser is still using the cached version.

If you are concerned about your users seeing cached resources instead of the updated ones, check out these cache busting techniques to help prevent these issues.

Why isn't my GridView CSSClass being applied?

1 Answers1