i'm gonna snap! bad css!

mozilla background-color isnt displaying

[sneaks]

i am almost out of my mind! a wrapper div contains a couple of divs which contain a div or two... theres just too much code to paste it but the problem is the wrapper div is not showing the white background in mozilla browsers...

heres a snippet of the css (wrapper and its children)

#bottomWrapper {
width:745px;
clear: both;
background-color:#fff;
}
#indexLeft {
float: left;
padding: 15px 0px 0px 10px;
}
#indexRight {
color: #999;
width: 360px;
float: right;
margin: 10px 0px 20px 0px;
}

theres a few more divs in the #indexRight that are floating right... other than that, i have tried everything i can think of! hope someone can help out b4 i ull out all my hair!

;)
snx

[Demaestro]

try a space after the :

You have spaces on all of them except:

background-color:#fff;

background-color: #fff;

Also try using hex values... #fff seems like an RGB value and you aren't specifying that your values are in RGB

you may want #ffffff

[Robin_reala]

You're floating everything inside the bottomWrapper, so all of it's content is removed from the flow. This means it's computed height is now 0 (you can verify this by putting on a border). There are several ways around this:

1) Add a height (or min-height) if you know what it'll be
2) Float bottomWrapper itself. Floated elements contain their floated children.
3) Same for elements with overflow values of auto or hidden.
4) Use the positioniseverything easy clearing technique:

#bottomWrapper { content: "."; display: block; clear: both; height: 0; visibility: hidden; }

This generates a full stop at the end of the element and forces it to clear the enclosed divs, effectively pulling open bottomWrapper.

[sneaks]

robin,
thanks... i going to have to look into that latter solution... not quite following it... but it is very interesting...

unfortunately i had to go with a absolute height, because the float technique causes explorer to go wonky...

i will have to figure it out properly in the end but tomorrow is a new day and for now the client can see it like that...

snx

[Robin_reala]

Sorry, there's a mistake in the code I posted above :( Revised:

#bottomWrapper:after { content: "."; display: block; clear: both; height: 0; visibility: hidden; }

You're actually generating content in a 'pseudoelement' after the bottomWrapper div.

[sneaks]

all i can say to that is... solid!