Solved

Background colors in Firefox

Posted on 2006-11-03
6
2,513 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
Comment Utility
this should work in firefox. could you post the entire code?
0
 

Author Comment

by:diegoslice
Comment Utility
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
Comment Utility
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
Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

 
LVL 19

Assisted Solution

by:VoteyDisciple
VoteyDisciple earned 250 total points
Comment Utility
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
Comment Utility
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
Comment Utility
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

Find Ransomware Secrets With All-Source Analysis

Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

Join & Write a Comment

Suggested Solutions

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…
Bada platform is becoming more and more famous this days and people talking about same. Some friends included those who have bada OS mobile asked me "what is bada?"and "what its features?". That encouraged me to research and write this article. [st…
This Micro Tutorial will demonstrate how nuggets on the Web are formatted by using Chrome Developer Tools. These tools would not only view the site's CSS but it can also modify it and save the CSS to use on your own site.
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…

772 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

10 Experts available now in Live!

Get 1:1 Help Now