www.webdeveloper.com
Results 1 to 10 of 10

Thread: CSS background not displaying in Mozilla

  1. #1
    Join Date
    Mar 2007
    Posts
    21

    Smile CSS background not displaying in Mozilla

    Hello:

    I've built a template using CSS, and I'm having trouble with a background color showing up in Mozilla only. The CSS works perfectly in IE 7, but not Firefox. Any suggestions?

    I checked my code at this site http://htmlhelp.com/tools/csscheck/, made the suggested corrections, and it's still not working.

    Here's my CSS:

    Code:
    body {
    	background:#cfc3ad;
    	background-image:none;
    	margin:0px;
    	font-family:Verdana, Arial, Helvetica, sans-serif;
    	font-size:12px;
    	line-height:18px;
    	color:#000000;
    }
    a:active, a:link, a:hover, a:visited {
    	background::#cfc3ad;
    	color:#000000;
    	text-decoration:underline;
    	font-weight:bold;
    	font-size:11px;
    }
    .container {
    	background:#FFFFFF;
    	color:#000000;
    	width:750px;
    	height:100%;
    	border:0;
    	margin-top:0;
    	margin-left:auto;
    	margin-right:auto;
    	margin-bottom:50px;
    	padding:0px;
    }
    .banner {
    	background:url(images/banner.gif) no-repeat center;
    	color:#000000;
    	width:750px;
    	height:95px;
    	padding:0px;
    }
    .nav {
    	background:url(images/navbar_bkgd.gif);
    	width:750px;
    	height:31px;
    	padding:0px;
    }
    .leftColumn {
    	background:#FFFFFF;
    	color:#000000;
    	float:left;
    	width:535px;
    	height:100%;
    	font-family:Verdana, Arial, Helvetica, sans-serif;
    	font-size:12px;
    	line-height:18px;
    	padding:17px;
    }
    .pds {
    	float:left;
    	width:240px;
    	height:110px;
    	padding:0px;
    	font-family:Verdana, Arial, Helvetica, sans-serif;
    	font-size:10px;
    	color:#346198;
    	line-height:15px;
    	background:#FFFFFF;
    	padding-right:15px;
    }
    .rightColumn {
    	background:#efefeb;
    	float:right;
    	width:161px;
    	height:100%;
    	padding:10px;
    	font-family:Verdana, Arial, Helvetica, sans-serif;
    	font-size:10px;
    	color:#346198;
    	line-height:14px;
    }
    .secondHeader {
    	background:url(images/bkgd_gradbox.gif) no-repeat;
    	background-color:#FFFFFF;
    	width:535px;
    	height:230px;
    	font-family:Verdana, Arial, Helvetica, sans-serif;
    	font-size:12px;
    	line-height:18px;
    	color:#000000;
    	padding:0px;;
    	border:0px;
    }
    .footer {
    	background:#f9f8f3;
    	width:730px;
    	height:60px;
    	font-family:Verdana, Arial, Helvetica, sans-serif;
    	font-size:11px;
    	color:#666666;
    	line-height:16px;
    	padding:10px;
    	border:0px;
    	float:left;
    }
    div.float {
    	background-color:#00FF99;
    	float:left;
    	width:520px;
    }
    .footer {
    	font-size:10px;
    	color:#666666;
    	line-height:14px;
    }
    My goal is to have the overall container have a white background that extends down the page as page height may change. Any ideas are helpful! And thanks in advance!

    Deanna

  2. #2
    Join Date
    Dec 2005
    Location
    American, living in Toronto, ON. CANADA
    Posts
    6,746
    body {
    background-color:#cfc3ad;
    background-image:none;
    margin:0px;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size:12px;
    line-height:18px;
    color:#000000;
    }
    Try writing it this way. The reason why it works in IE, is because IE does it incorrectly.., -showing you what it thinks you wanted to say.
    Last edited by WebJoel; 04-26-2007 at 11:36 AM.

  3. #3
    Join Date
    Mar 2007
    Posts
    21
    Hi WebJoel! Thanks for the quick response -

    I actually tried out this solution and it did not work. Any other ideas? I know I must be missing something...

    Thanks again!

    Deanna

  4. #4
    Join Date
    Dec 2005
    Location
    American, living in Toronto, ON. CANADA
    Posts
    6,746
    Other than taking out the un-needed "background-image:none;" and maybe clearing your cache (in case you are re-loading the old paged document), -no ideas. This should work. It is the background-color that you are missing, yes? Mozilla, Firefox etc., are 'picky' to be accurate actually, they require the "#" for any "color" statement to work ("color:foo;" being the color of the text, and "background-color:foo;" being the background color of the Selector to which it is apply, -in the base, "body"...)

    You're gooing to want to fix any additional instances of "background:#foo;" where no other vaule is stated, to be "background-color:#foo;" if "background-color" is the only thing that you are after, and this:

    a:active, a:link, a:hover, a:visited {
    background::#cfc3ad;
    color:#000000;
    text-decoration:underline;
    font-weight:bold;
    font-size:11px;
    }
    (note the double-colons :: )
    And, get the order in the correct order of "link, visited, hover, active;" even though they have the SAME declarations (and thus, order doesn't matter). -It's a good habit to write these in the correct 'order', else you will be getting the "mouse-down/active" color before the 'at rest', 'hover' or 'visited' color... This can save you many terrible quarter-hours of late-frustration trying to figure out why in some yet-to-be-created navigation, you cannot get the link-colors to behave nicely...
    Last edited by WebJoel; 04-26-2007 at 12:28 PM.

  5. #5
    Join Date
    Mar 2007
    Posts
    21
    Yea - it's the background color (white) i'm missing in the div container. The background of the page is a tan color, but the overall div container background should be white.

    Okay, I'm going to try this new solution. I'll let you know if it works. Thanks WebJoel!

  6. #6
    Join Date
    Mar 2007
    Posts
    21
    Okay GOOD NEWS: The double semi-colon worked! However, it changed the background color of the page as well as the background color of the div container.

    When I removed the double semi-colon here:

    body {
    background-color:#cfc3ad;
    margin:0px;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size:12px;
    line-height:18px;
    color:#000000;
    }
    It changed the page background to the correct tan color, but still not the div container to white. Am I doing something wrong?

  7. #7
    Join Date
    Dec 2005
    Location
    American, living in Toronto, ON. CANADA
    Posts
    6,746
    Possibly...

    This?

    .secondHeader {
    background:url(images/bkgd_gradbox.gif) no-repeat;
    background-color:#FFFFFF;
    width:535px;
    height:230px;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size:12px;
    line-height:18px;
    color:#000000;
    padding:0px;;
    border:0px;
    }
    and this:

    background:url(images/bkgd_gradbox.gif) no-repeat;
    background-color:#FFFFFF;

    can be condensed into this:

    background:#fff url(images/bkgd_gradbox.gif) no-repeat;

    and say exactly the same thing (and be easier to read the code 'cause there'll be less of it)

  8. #8
    Join Date
    Mar 2007
    Posts
    21
    Hi WebJoel! Actually just as you replied, I found the solution - it was at this website http://css-discuss.incutio.com/?page=ClearingSpace.

    I placed this code under the main container in CSS:

    overflow:auto;
    This made it work in all browsers. Thanks for all your help by the way and your very timely responses!

    Deanna

  9. #9
    Join Date
    Mar 2006
    Location
    Newcastle NSW Australia
    Posts
    4,033
    Which is why you should post ALL the code, not just the css. Had we had access to the full code, we could have spotted the non cleared float easily.......

  10. #10
    Join Date
    Dec 2005
    Location
    American, living in Toronto, ON. CANADA
    Posts
    6,746
    Quote Originally Posted by Centauri
    Which is why you should post ALL the code, not just the css. Had we had access to the full code, we could have spotted the non cleared float easily.......
    -Says you. *I* might have stared at a non-cleared float for a day before I spotted it...

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles