CSS background in Firefox

Problems displaying CSS backgrounds in firefox

[El_Matador]

I've been having problems with the css background being displayed in firefox, the main problem being the background isn't showing up!

It works fine in I.E, which seems weird, as normally any problems I have are the opposite.

I cant post any code as i'm not on the comp with the code and the site is not live yet. I know it sounds pretty vague as i cant point to specific code, but im just wondering if anyone instinctively knew what the problem could be?

Any help would be greatly appreciated!

[Geoffrey james]

Would really help to see code...I will wait until then.

Geoffb

[Fotiman]

This is almost always a case where you've got some container that you've assigned a background to, and then the immediate child elements of that container are all floated. For example:

<div id="container">
<div id="thisIsFloated">...</div>
<div id="thisIsFloatedToo">...</div>
</div>

Floating an element takes it out of the normal flow, so in the example above "container" is essentially empty, so no background will be shown. IE6 will incorrectly make "container" still contain the floated children, which is why the background shows up in IE.

To fix this, add something that clears the floats after them. For example:

<div id="container">
<div id="thisIsFloated">...</div>
<div id="thisIsFloatedToo">...</div>
<br class="endOfSection">
</div>

Then your styles would include:

.endOfSection { clear: both; }

Since the br is not floated, "container" still contains it. And since the br is set to clear both, it must appear below any floats. Therefore, it will appear as though "container" still contains the floated elements.

Another solution may be to float "container" as well. But this generally makes it harder to center.

Hope that helps.

[El_Matador]

Thanks for the help guys.Problem is solved now.

I took over a site and have been trying to change the CSS style, which was a bit mish-mash. Seemed the problem was something to do with background-repeat and/or background-position.

Thanks again though!