Hello,
I'm trying to apply different backgrounds to a page based on the BODY
element class. It's working on some browsers but not on others.
I've searched Google and the groups, pored through my trusty O'Reilly
books, but I can't find anything that suggests this isn't valid.
I cut down the stylesheet and the page to the bare minimum, but the
difference still appears.
Here's the stylesheet:
-------------------------------------
BODY, HTML {
background-color: #FFF;
background-image: url(../images/interface/bodybg.jpg);
}
BODY, HTML, P, TD {
color: #000;
font: 14px arial,verdana,sans-serif;
}
BODY.bcNavbar{
background-image: url(../images/interface/navbg.jpg);
}
And the HTML:
--------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Navigation</title>
<link rel="stylesheet" type="text/css"
href="../../common/styles/test.css" />
</head>
<body>
<p>This is some content.</p>
</body>
</html>
Using just <BODY> works like I expect. <BODY class="bcNavbar"> applies
the background only to the page on IE/Opera, but to the paragraph on
Mozilla/Firefox.
I've used "BODY, HTML" in stylesheets out of habit, but have forgotten
the reason. Is this somehow related to my problem?
I'd appreciate any insight anyone could offer, especially if I'm not
understanding some nuance of CSS.
Thanks,
Dan Novak
