CSS linked on master page not applying to controls on content page
Question
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?
2 answers
solution1
1 ACCPTED 2016-08-22 20:43:29
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.
solution2
0 2016-08-22 19:08:03
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.