Solved

Background colors in Firefox

Posted on 2006-11-03
6
2,514 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.




0
Comment
Question by:diegoslice
  • 2
  • 2
  • 2
6 Comments
 
LVL 4

Accepted Solution

by:
yeroket earned 250 total points
ID: 17872939
this should work in firefox. could you post the entire code?
0
 

Author Comment

by:diegoslice
ID: 17874844
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.
0
 
LVL 4

Expert Comment

by:yeroket
ID: 17876109
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>


0
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
LVL 19

Assisted Solution

by:VoteyDisciple
VoteyDisciple earned 250 total points
ID: 17886856
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?
0
 

Author Comment

by:diegoslice
ID: 17887197
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.
0
 
LVL 19

Expert Comment

by:VoteyDisciple
ID: 17888436
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.
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

I spend far too much time on the web keeping up with the news: politics, the environment, computer stuff, the Experts Exchange. It's never-ending. But many of the most informative web pages are overwhelmed with noise: scrolling banners, flashing tex…
Problem I downloaded the Microsoft Internet Explorer 9 Beta, today, to give it a test drive and maybe write a review for the site, and it failed miserably and got stuck in a crash restart loop. The error message given is as illustrated below i…
This Micro Tutorial will demonstrate how to add subdomains to your content reports. This can be very importing in having a site with multiple subdomains.
Shows how to create a shortcut to site-search Experts Exchange using Google in the Chrome browser. This eliminates the need to type out site:experts-exchange.com whenever you want to search the site. Launch the Search Engine Menu: In chrome, via you…

910 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

23 Experts available now in Live!

Get 1:1 Help Now