Win a copy of Mesos in Action this week in the Cloud/Virtualizaton forum!
  • Post Reply
  • Bookmark Topic Watch Topic
  • New Topic

Firefox, CSS and background-image

 
William Brogden
Author and all-around good cowpoke
Rancher
Posts: 13061
6
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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:



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
Author and ninkuma
Marshal
Pie
Posts: 64843
86
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Author and all-around good cowpoke
Rancher
Posts: 13061
6
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Author and ninkuma
Marshal
Pie
Posts: 64843
86
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Author and ninkuma
Marshal
Pie
Posts: 64843
86
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
What's it do in Chrome or Safari?
 
William Brogden
Author and all-around good cowpoke
Rancher
Posts: 13061
6
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
author
Rancher
Posts: 15385
6
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Author and all-around good cowpoke
Rancher
Posts: 13061
6
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Author and all-around good cowpoke
Rancher
Posts: 13061
6
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Author and all-around good cowpoke
Rancher
Posts: 13061
6
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Author and ninkuma
Marshal
Pie
Posts: 64843
86
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator


I never would have thought of that.
 
  • Post Reply
  • Bookmark Topic Watch Topic
  • New Topic