Second linked stylesheet has no effect
I'm having problems linking a second stylesheet to my HTML document, and cannot find the (hopefully painfully obvious) problem.
I'm linking stylesheets in the head thus:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link rel="stylesheet" href="assets/css/global.css" type="text/css" media="all" title="Global styles" charset="utf-8">
<link rel="stylesheet" href="assets/css/ie.css" type="text/css" media="all" title="IE Overrides" charset="utf-8">
The problem is, the seconds stylesheet has no effect what so ever. Reversing their order proves this as well.
For testing, I put in a rule in the second stylesheet to make the body background red, even tried adding !important, but to no avail.
/* Global CSS */
body {
background-color: #fff;
}
/* IE CSS */
body {
ba开发者_开发技巧ckground-color: #f00 !important;
}
Firebug net panel shows that both stylesheets do load, and the style panel shows me the styles in both of them, but the rules in the latter just don't do squat.
This has left me baffled, since it is very, very basic stuff, which I've previously done successfully hundreds and hundreds of times.
Try removing the title attribute from both your link tags. title has a special meaning when used with stylesheet links, more here:
Alternative Style: Working With Alternate Style Sheets
In my case, I had moved working CSS rulesets from a PHP string in the page source to an external CSS file:
From:
$headCss.=
' <style type="text/css">
#containBrainForHire
{ background:url(\'/graphics/BrainForHire.png\');
display:table;
height:300px;
margin:0 auto;
width:525px;
}
</style>
';
To:
#containBrainForHire
{ background:url(\'/graphics/BrainForHire.png\');
display:table;
height:300px;
margin:0 auto;
width:525px;
}
NOTHING in the new CSS file worked until I fixed the background definition: The backslashes needed to escape the single quotes in the PHP string are invalid in the CSS file.
Corrected CSS file contents:
#containBrainForHire
{ background:url('/graphics/BrainForHire.png');
display:table;
height:300px;
margin:0 auto;
width:525px;
}
There were no errors reported in the error console, just nothing in the new CSS file had any effect on the page's display. (So much for useful debugging tools...)
I hope this saves someone else the time that it took me to recognize the problem.
加载中,请稍侯......
精彩评论