We help IT Professionals succeed at work.

We've partnered with Certified Experts, Carl Webster and Richard Faulkner, to bring you a podcast all about Citrix Workspace, moving to the cloud, and analytics & intelligence. Episode 2 coming soon!Listen Now

x

Background colors in Firefox

diegoslice
diegoslice asked
on
Medium Priority
2,552 Views
Last Modified: 2012-06-21
Is there an explanation for why background colors in Firefox 2.0 using CSS don't seem to work? For example, choose a standard CSS layout template in Dreamweaver (I'm using the 3col_leftNav.css) and then set the background color black so the body style looks like:

body{
      font-family: Arial,sans-serif;
      color: #333333;
      background: #000000;
      line-height: 1.166;      
      margin: 0px;
}

In IE7, the page has a black background and works as expected. In Firefox it stays white.

Taking a look at the Experts-Exchange style sheet, I tried using a repeating graphic (a 500x500 black gif) so the background property is changed to:

    background: #000 url(background.gif) repeat-y left;

Once again, IE7 has a black background and Firefox has a white one.

Any thoughts on how to switch background colors from white in Firefox?

Thanks.




Comment
Watch Question

Commented:
this should work in firefox. could you post the entire code?

Not the solution you were looking for? Getting a personalized solution is easy.

Ask the Experts

Author

Commented:
Here's a stripped down page that displays in IE7 and the Dreamweaver design window as white text on a black background (as it should) and yet in Firefox, it shows as black text on a white background. Both browsers display the text as a large Verdana font (although differently sized) as proof that the style sheet is being loaded. Removing the font-family option changes the display back to Times New Roman on both.

I'm on a fully patched XP SP2 system if that matters. As for Firefox, just installed v2 a few days ago so pretty much all default options. I also tried toggling the "Print Background (colors & images)" checkbox under File / Page Setup which made no difference (as expected since it should only affect output to the printer). I didn't see any other relevant options that should affect this.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Sample Page</title>
<link rel="stylesheet" href="styles/stylesheet_test.css" type="text/css">
</head>
<body>
      <h1>My sample page.</h1>
</body>
</html>


body {
  background:#000000;
  font-size:36px;
  font-family:Verdana, Arial, Helvetica, sans-serif;
}

h1 {
  color:#FFFFFF;
}

Thanks again.

Commented:
this work fine in firefox:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Sample Page</title>
<link rel="stylesheet" href="styles/stylesheet_test.css" type="text/css">
<style>
body {
  background:#000000;
  font-size:36px;
  font-family:Verdana, Arial, Helvetica, sans-serif;
}

h1 {
  color:#FFFFFF;
}
</style>
</head>
<body>
     <h1>My sample page.</h1>
</body>
</html>


I've never had any trouble with backgrounds in Firefox.  In fact, with PNGs with alpha transparency, Firefox plays much nicer than MSIE (not that such a revelation is in any way surprising)...

What other background-related styles appear in your stylesheet that might be affecting this?  Is it possible a later rule (that MSIE is ignoring) overrides the black background for the body?  Can you apply a background to other elements?

Author

Commented:
After confirming that this did display correctly on my work laptop and wife's computer, I scratched my head a few times and uninstalled Firefox. My add / remove programs showed Firefox 1.5.0.7 and 2.0 both installed but uninstalling the first one (1.5.0.7) made it so I couldn't uninstall 2.0 because some common files were deleted. After reinstalling 2.0, the problem persisted but now I could uninstall 2.0 and also deleted my "C:\Program Files\Mozilla Firefox" directory.

After a reboot, and another 2.0 install, the problem still persisted so I deleted my profile in Documents and Settings. I also scanned the registry for 'firefox' but didn't see anything that seemed directly relevant so no keys were deleted. Now that I have a brand spanking new profile, background colors are being applied again so my test file shows a black background with white text (finally!).

Since I've been using Firefox since 1.0 and upgraded several times along the way, I don't know what baggage I may have been carrying forward. Everything seemed to be working correctly but clearly style sheets were not being applied correctly.

Thanks for letting me know this indeed worked on other computers.
My  best guess would be that somewhere in your user stylesheets you had a rule that explicitly set the background to white that was taking precedence over the rule in the page stylesheet.  Of course, it could just actually have been buggy, having picked up some funky baggage somewhere along the line like you said.
Access more of Experts Exchange with a free account
Thanks for using Experts Exchange.

Create a free account to continue.

Limited access with a free account allows you to:

  • View three pieces of content (articles, solutions, posts, and videos)
  • Ask the experts questions (counted toward content limit)
  • Customize your dashboard and profile

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.