CODEWITHSUNDEEP
cssasp.net
Michael Kaldwid
Michael Kaldwid

Reputation: 72

CSS linked on master page not applying to controls on content page

I'm trying to make a warning banner for a web page. I'm using a label inside a div inside a panel with some css styles declared on the page. I don't want to declare those styles on every page, so I moved them to my Site.css file, (which is used by the master page). The problem that when I do that, the css styles aren't applied. Everything on the master page is formatted correctly, but the controls declared in the content page are not.

Hear's what I've go on the content page:

<asp:Content ID="Content2" ContentPlaceHolderID="ErrorMessages" runat="server">

<asp:Panel ID="WarningBanner" runat="server" CssClass="warningPanel" Visible="true">
    <div class="warningDiv">
        <asp:Label ID="testLabel" runat="server" Text="test" CssClass="warningLabel"></asp:Label>
    </div>
</asp:Panel>

<style>
.warningPanel {
    margin: auto;
    width: 1000px;
    background-color: red;
    border: 10px solid red;
}

.warningLabel {
    display: block;
    color: white;
    font-size: large;
}

.warningDiv {
    margin-left: auto; 
    margin-right: auto; 
    text-align: center;
}
</style>

</asp:Content>

and hear's what I've got on the master page:

<head runat="server">
...ext...
    <link href="~/Content/Site.css" rel="stylesheet" /> 
...ext...
</head>
<body>
...ext...
    <div id="body">
        <asp:ContentPlaceHolder runat="server" ID="ErrorMessages" />
    <div/>
...ext...
<body/>

and this is what my Site.css file looks like:

html {
    background-color: #e2e2e2;
    margin: 0;
    padding: 0;
}

.warningPanel {
    margin: auto;
    width: 1000px;
    background-color: red;
    border: 10px solid red;
}

.warningLabel {
    display: block;
    color: white;
    font-size: large;
}

.warningDiv {
    margin-left: auto; 
    margin-right: auto; 
    text-align: center;
}
...ext...

What am I doing wrong?

Upvotes: 0

Views: 1274

Answers (2)

Martin Parenteau
Martin Parenteau

Reputation: 73731

CSS files are often cached by browsers. When that happens, changes made to the styles will not show up in the HTML display.

You can clear your browser cache after changing the CSS contents to see the modified styles. Another way to do it, which also ensures that your clients will see the updated CSS without having to clear their browser cache, is to append a query string to the link:

<link href="~/Content/Site.css?version=2.5" rel="stylesheet" type="text/css" />

Every time the CSS file is modified, you set a new version number to force the updated CSS file to be downloaded.

Upvotes: 2

busuu
busuu

Reputation: 633

There's nothing wrong with your code. You probably haven't specified the correct file path to your CSS file. Double check that. Also, you've got a typo:

<div id="body">
    <asp:ContentPlaceHolder runat="server" ID="ErrorMessages" />
<div/>

It should be:

<div id="body">
    <asp:ContentPlaceHolder runat="server" ID="ErrorMessages" />
</div>

Upvotes: 0

Related Questions