CSS background not displaying in Mozilla

[deanna85]

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:

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

[WebJoel]

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.

[deanna85]

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

[WebJoel]

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...

[deanna85]

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!

[deanna85]

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?

[WebJoel]

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)

[deanna85]

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

[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.......

[WebJoel]

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...