?
Solved

Background colors in Firefox

Posted on 2006-11-03
6
Medium Priority
?
2,521 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
  • 2
  • 2
6 Comments
 
LVL 4

Accepted Solution

by:
yeroket earned 750 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
On Demand Webinar: Networking for the Cloud Era

Ready to improve network connectivity? Watch this webinar to learn how SD-WANs and a one-click instant connect tool can boost provisions, deployment, and management of your cloud connection.

 
LVL 19

Assisted Solution

by:VoteyDisciple
VoteyDisciple earned 750 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

On Demand Webinar - Networking for the Cloud Era

This webinar discusses:
-Common barriers companies experience when moving to the cloud
-How SD-WAN changes the way we look at networks
-Best practices customers should employ moving forward with cloud migration
-What happens behind the scenes of SteelConnect’s one-click button

Question has a verified solution.

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

Internet is a big network which is formed by connecting multiple small networks.It is a platform for all the users which are connected to it.Internet act as platform in different fields. Such as: Internet  as a collaboration platform. Internet  as…
SSL stands for “Secure Sockets Layer” and an SSL certificate is a critical component to keeping your website safe, secured, and compliant. Any ecommerce website must have an SSL certificate to ensure the safe handling of sensitive information like…
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…
Suggested Courses
Course of the Month13 days, 8 hours left to enroll

800 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