Missing backgroud-color in Firefox

nickburrett · 11-02-2009, 06:01 PM

Hi

I'm helping out a friend with his website but I'm having trouble understanding why there the background color from the #wrapper is missing in Firefox.

Can anyone point me in the right direction?

http://www.bumble-b-roadshow.co.uk/

Thanks in advance
Cheers
Nick

Excavator · 11-02-2009, 06:14 PM

Hello nickburrett,
You need to clear your floats.
Make your CSS look like this:

Code:

#wrapper { margin: auto; width: 760px; text-align: left; background-color: #FFFFFF; overflow:auto;}

Here's a site that explains how that works.

Rowsdower! · 11-02-2009, 06:14 PM

Quote:

Originally Posted by nickburrett

Hi

I'm helping out a friend with his website but I'm having trouble understanding why there the background color from the #wrapper is missing in Firefox.

Can anyone point me in the right direction?

http://www.bumble-b-roadshow.co.uk/

Thanks in advance
Cheers
Nick

Add overflow:auto; to the CSS for #wrapper

The problem was that the content and menu divs were both floated so no height beyond the start of these elements was calculated for the wrapper. To fix this you could either insert an element below #wrapper with clear:both; or else you could apply overflow:auto; to the wrapper, as I am suggesting. Both methods have the same effect but this one avoids extra HTML markup in the page.