...

View Full Version : CSS div background not repeating or appearing



chump2877
12-22-2005, 05:30 PM
Need help quickly with the CSS on the following page: http://www.mediamogulsweb.com/client/battery_gun_co/index.php

The background image of my #body_container div isn't repeating, or appearing at all, in Mozilla/Firefox....it looks fine in IE....can anyone spot the problem?

Thank you.

Bill Posters
12-22-2005, 06:16 PM
At a glance it appears that you need to clear the float.

http://www.quirksmode.org/index.html?/css/clearing.html
http://www.positioniseverything.net/easyclearing.html


Fwiw, it's actually Moz/FF that's displaying things correctly and IE incorrectly, though imho, IE's method makes more sense than the standards-compliant method from a web development pov.

chump2877
12-22-2005, 06:43 PM
Thanks, adding:


overflow: auto;

in my container div worked fine.....I had already cleared the div in #bottom_div, so apparently the problem required more than just a clear:both;....

I've seen this hack before, but I never know exactly when to us it...it's not one of those solutions that comes to mind first....

Bill Posters
12-22-2005, 07:24 PM
Thanks, adding:



in my container div worked fine.....I had already cleared the div in #bottom_div, so apparently the problem required more than just a clear:both;....
Fwiw,

'a clearing div' is not quite the same thing as adding clear: both; to the next element, which is what you currently have.
A clearing div is a div specifically added just inside the closing tag of a container element. That div is given clear: both; and this forces the container to stretch down to include it, making the container's background continue further down the page.

basic e.g.

<div id="container">

<p>This element is floated.</p>
<p>This element is floated.</p>

<div class="clear"><!-- this is the clearing div --></div>

<div>

There's a little more to it than that, but that's the basic concept of a 'clearing div'.

chump2877
12-22-2005, 08:22 PM
I guess I forgot to say that I tried to include a clearing div (I know what one is) inside my container div...still didnt do the trick...the overflow:auto; was needed...



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum