/    Sign up×
Community /Pin to ProfileBookmark

CSS background not displaying in Mozilla

Copy linkTweet thisAlerts:
Apr 26.2007

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 [URL=”http://htmlhelp.com/tools/csscheck/”]http://htmlhelp.com/tools/csscheck/[/URL], 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;
}[/CODE]

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

to post a comment
CSS

9 Comments(s) ↴

Copy linkTweet thisAlerts:
@WebJoelApr 26.2007 — body {

background-[B]color[/B]:#cfc3ad;

background-image:none;

margin:0px;

font-family:Verdana, Arial, Helvetica, sans-serif;

font-size:12px;

line-height:18px;

color:#000000;

}[/QUOTE] Try writing it this way. The reason why it works in IE, is because IE does it [I]incorrectly[/I].., -showing you what it thinks you wanted to say.
Copy linkTweet thisAlerts:
@deanna85authorApr 26.2007 — 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
Copy linkTweet thisAlerts:
@WebJoelApr 26.2007 — 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[B][SIZE="4"]::[/SIZE][/B]#cfc3ad;

color:#000000;

text-decoration:underline;

font-weight:bold;

font-size:11px;

}[/QUOTE] (note the double-colons :: )

And, get the order in the [I]correct order[/I] of [B]"link, visited, hover, active;"[/B] even though they have the SAME declarations (and thus, order doesn't matter). -It's a good habit to write these [I]in the correct 'order'[/I], else you will be getting the "mouse-down/active" color [I]before[/I] 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...
Copy linkTweet thisAlerts:
@deanna85authorApr 26.2007 — 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!
Copy linkTweet thisAlerts:
@deanna85authorApr 26.2007 — 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[B]:[/B]#cfc3ad;

margin:0px;

font-family:Verdana, Arial, Helvetica, sans-serif;

font-size:12px;

line-height:18px;

color:#000000;

}[/QUOTE]

It changed the page background to the correct tan color, but still not the div container to white. Am I doing something wrong?
Copy linkTweet thisAlerts:
@WebJoelApr 26.2007 — 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[B][SIZE="4"];;[/SIZE][/B]

border:0px;

}[/QUOTE]

and this:

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

background-color:#FFFFFF;

can be condensed into this:

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

and say exactly the same thing (and be easier to read the code 'cause there'll be less of it) ?
Copy linkTweet thisAlerts:
@deanna85authorApr 26.2007 — 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;[/QUOTE]

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

Deanna
Copy linkTweet thisAlerts:
@CentauriApr 26.2007 — Which is why you should post [B]ALL[/B] the code, not just the css. Had we had access to the full code, we could have spotted the non cleared float easily.......
Copy linkTweet thisAlerts:
@WebJoelApr 27.2007 — Which is why you should post [B]ALL[/B] the code, not just the css. Had we had access to the full code, we could have spotted the non cleared float easily.......[/QUOTE] -Says [I]you[/I]. ? *I* might have stared at a non-cleared float for a day before I spotted it... :p
×

Success!

Help @deanna85 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.16,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...