473,237 Members | 1,398 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,237 software developers and data experts.

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 2167
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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

12
by: Stanimir Stamenkov | last post by:
Here are two cases regarding inline-level elements' line-height, padding and background, which I doesn't understand: <div style="background: black; color: white; line-height: 1.5">...
1
by: P.Singh | last post by:
hi all i am designing a website for a charity origanisation. they cater towards the senior crowd. i would like to have choice by which the user can change the background as required (like...
16
by: J. B. Moreno | last post by:
I read the faq, and it mentions that IE 4 on windows requires setting a printing option to allow background colors to be printed. Things change, life goes on, other browsers come into...
1
by: Efkas | last post by:
My application have some level : 1. MyButton class with Label inheritance 2. MyComponent as User Control loading and positionning some of MyButtons 3. MyApp loading and positionning MyComponent ...
1
by: laredotornado | last post by:
Hello, I was wondering if there is any cross-browser CSS way to specify that I want the background color of a readonly input text field to be the same as its parent row. Right now, I have ...
2
by: frank.sconzo | last post by:
Greetings, I was testing my web application on the Mac/Safari and noticed a problem with the background color of the select input element. Safari doesn't seem to pay any attention to the style I...
2
by: bissatch | last post by:
Hi, I am running a w3c CSS validation check on a site in development. I have many errors saying that my CSS is not valid because I have not defined the background-color but instead left it...
6
by: Francois Bonzon | last post by:
Any idea how I can launch a background task from a PHP script? For example, when a user posts on my message board, it may fire many e-mail notifications to other users, and other tasks. I want...
7
by: Guliver | last post by:
Hello. I'm configuring the apearence of my forum and I have a question for anyone who can help me. I have a backgroud picture and I would like it to be visible but I'm trying to mantain a...
8
by: =?Utf-8?B?R3JlZyBMYXJzZW4=?= | last post by:
I'm trying to figure out how to modify a panel (panel1) from a backgroundworker thread. But can't get the panel to show the new controls added by the backgroundwork task. Here is my code. In...
0
by: jianzs | last post by:
Introduction Cloud-native applications are conventionally identified as those designed and nurtured on cloud infrastructure. Such applications, rooted in cloud technologies, skillfully benefit from...
0
by: abbasky | last post by:
### Vandf component communication method one: data sharing ​ Vandf components can achieve data exchange through data sharing, state sharing, events, and other methods. Vandf's data exchange method...
0
by: stefan129 | last post by:
Hey forum members, I'm exploring options for SSL certificates for multiple domains. Has anyone had experience with multi-domain SSL certificates? Any recommendations on reliable providers or specific...
0
Git
by: egorbl4 | last post by:
Скачал я git, хотел начать настройку, а там вылезло вот это Что это? Что мне с этим делать? ...
1
by: davi5007 | last post by:
Hi, Basically, I am trying to automate a field named TraceabilityNo into a web page from an access form. I've got the serial held in the variable strSearchString. How can I get this into the...
0
by: DolphinDB | last post by:
The formulas of 101 quantitative trading alphas used by WorldQuant were presented in the paper 101 Formulaic Alphas. However, some formulas are complex, leading to challenges in calculation. Take...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, youll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: Aftab Ahmad | last post by:
Hello Experts! I have written a code in MS Access for a cmd called "WhatsApp Message" to open WhatsApp using that very code but the problem is that it gives a popup message everytime I clicked on...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.