Firefox, CSS and background-image

[William Brogden]

I am having to get back up to speed with CSS - sigh. Firefox is driving me nuts - the following seems to work everywhere but Firefox:

h1, h2, h3 {font-family: Arial; color: Blue; }
p { font-size: small; color: Black;}
li { font-size: small; color: Black;}
td { vertical-align: top; }
body 
{
margin-left: 16%; 
margin-right: 8%; 
color: black;
font-family: Verdana ;
background-image: url("/cx/resources/LogoJack.gif");
background-repeat: repeat-y;
}

I can get the body margins working but it won't show the background image and the h1, h2, h3 text stays black.

Is there a list of Firefox idiosyncrasies somewhere or am I making an obvious error?

Bill

[Bear Bibeault]

One tool that might help is the CSS browser in Firebug. It will show you exactly where the computed styles came from. I find it indispensable for helping to find out "Why the #@(% is that blue?" (or in your case, black).

[William Brogden]

Firebug shows that the CSS is being read and parsed. When I look at the HTML for the body I see the css - including a background-image as expected - BUT no background image is actually shown.

When I look at the HTML for a h2 headline, Firebug shows me that the color black inherited from body is overridden by color: Blue; - BUT the actual displayed headline is black.



This CSS works as expected with MSIE and Opera, sigh - do I need to sacrifice bits to the fox or what?

Bill

[Bear Bibeault]

OK, that's weird. I've never had the computed style say one thing, and the display show another.

Can you post an SSCCE?

[Bear Bibeault]

What's it do in Chrome or Safari?

[William Brogden]

It just got stranger...

I moved the files to another machine with the same (10.0) version of Firefox and they rendered correctly!

Both Foxes have just been updated so Fox-1 must have some kind of damage or configuration problem which prevents it from displaying HTML with certain CSS properties. Looking at the plugins etc I don't see any difference, guess I will uninstall Fox-1 and do a fresh install to see what happens next.

Onward through the fog... Bill

[Eric Pascarello]

William Brogden wrote:It just got stranger...
I moved the files to another machine with the same (10.0) version of Firefox and they rendered correctly!

Bad cache? Clear it and see if it goes away.

Eric

[William Brogden]

Not a cache problem because I could see the current CSS being parsed in firebug and the display responded to margin-left changes.

Bill

[William Brogden]

I uninstalled Firefox and installed from a fresh download - same result. Perhaps there are some weird settings hiding on my system somewhere

In any case, I submitted a question to Firefox support - lets see if they have bright ideas.

Bill

[William Brogden]

Firefox support had an answer for me in less than 12 hours.

There is an option under tools whereby you can set text and background colors that will override HTML /CSS

on that dialog there is a checkbox "Allow pages to choose their own colors, instead of my selections above"

Tools > Options > Content : Fonts & Colors > Colors : [X]

Once I checked that the CSS colors and background image were displayed!

At some time in the distant past I must have turned that off in order to read one of those ghastly pages with unreadable color settings. Sigh!

Onward through the fog.
Bill

[Bear Bibeault]

I never would have thought of that.