468,272 Members | 2,045 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 468,272 developers. It's quick & easy.

background-image applies to BODY children on Mozilla?

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

Aug 6 '05 #1
5 1936
Els
Dan Novak wrote:
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.
[snip code]
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 don't think so.
I'd appreciate any insight anyone could offer, especially if I'm not
understanding some nuance of CSS.


Please provide a URL.

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vo. O resto imperfeito.
- Renato Russo -
Now playing: Billie Holiday - Good Morning Heartache
Aug 6 '05 #2
Hello Els,

Thanks for your reply. The URLs are:

http://www.gpmultimedia.com/public/g...mg/testb1.html (BODY
has no class)

http://www.gpmultimedia.com/public/g...mg/testb2.html (BODY
has "bcNav" class)

On IE, the backgrounds work as I expect. On Mozilla:
- background appears on P element
- changing class affects P element background, doesn't change the page
background

Thanks again,

Dan Novak

Aug 8 '05 #3
Sorry to reply to my own message, but I just made it work.

I took the HTML selector out, and it behaves as expected on both
browsers.

Still, why does it behave that way with the HTML selector?

Thanks,

Dan Novak

Aug 8 '05 #4
Els
Dan Novak wrote:
Hello Els,

Thanks for your reply. The URLs are:

http://www.gpmultimedia.com/public/g...mg/testb1.html (BODY
has no class)

http://www.gpmultimedia.com/public/g...mg/testb2.html (BODY
has "bcNav" class)

On IE, the backgrounds work as I expect. On Mozilla:
- background appears on P element
- changing class affects P element background, doesn't change the page
background


That is not what is happening.

What you see is not the <p> element, but the body. You didn't give it
a height, thus it's only one line high.
The white version of the background, you've set to <html> and <body>,
thus it extends to the full height of the window, which is the <html>,
not <body>.

The reason the darker 'buttons' extend to the bottom of the window
when you take out the html selecter, is that in absence of styling for
the <html> element, Firefox apparently assumes you want the styling
for body to be applied to the entire viewport.

However, this last line of mine is only a guess, and it probably would
be solved by using a complete doctype, like for instance:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

If you do use that doctype, or even the one you were using, that means
you're coding in HTML, and there is no need for the / before the > on
the <link> element. That's for XHTML pages.

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vo. O resto imperfeito.
- Renato Russo -
Aug 8 '05 #5
Dan Novak wrote:

Still, why does it behave that way with the HTML selector?


The HTML Background is applied to the full Canvas.
The BODY Background is applied to the in-flow Body Content.
(Height applied to BODY limits the vert. Background area covered. Give
BODY more content and a border to see the effect.)
In the example, both BODY and HTML have the empty circle BG image, but
the classed BODY declaration calls for the filled circle BG image, which
overrides the first declaration for BODY.
By removing the HTML selector (absence of an HTML declaration), HTML
takes on the BODY's (its child) filled circle BG image.

My Opera 8.02 behaves the same as Firefox. IE does not support HTML in
this regard.

--
Gus
Aug 8 '05 #6

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

12 posts views Thread by Stanimir Stamenkov | last post: by
1 post views Thread by P.Singh | last post: by
16 posts views Thread by J. B. Moreno | last post: by
1 post views Thread by Efkas | last post: by
1 post views Thread by laredotornado | last post: by
2 posts views Thread by frank.sconzo | last post: by
6 posts views Thread by Francois Bonzon | last post: by
8 posts views Thread by =?Utf-8?B?R3JlZyBMYXJzZW4=?= | last post: by
reply views Thread by NPC403 | last post: by
reply views Thread by zattat | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.