Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    Senior Coder Spudhead's Avatar
    Join Date
    Jun 2002
    Location
    London, UK
    Posts
    1,856
    Thanks
    8
    Thanked 110 Times in 109 Posts

    floating child divs removes parent div bg image?

    Code:
    <style type="text/css">
    body{
    	font-family:Arial, Helvetica, sans-serif;
    	background-color:#95d3ff;
    }
    #container{
    	width:812px;
    	margin:20px auto;
    }
    #dropshadow{
    	width:812px;
    	background:url(img/content_shadow_bg.gif) top repeat-y;
    	margin:0; padding:0;
    }
    
    #page{
    	width:779px;
    	margin:0px 0px 0px 22px;
    }
    
    </style>
    Code:
    <body>
    
    <div id="container"><img src="img/content_shadow_top.gif" width="812" height="22" alt="drop shadow" /><div id="dropshadow">
    
            <div id="page">
     
                <img src="img/nav_header.gif" alt="Nav header" width="156" height="205" />
                
                <div><img src="img/banner_468x60.gif" alt="banner" /></div>
    
            </div>
    
    </div><img src="img/content_shadow_bottom.gif" width="812" height="240" alt="drop shadow" /></div>
    
    </body>
    Ok, so: that gives me a centered, 812-pixel wide "container" box, with a drop shadow all the way around. Inside that is a 779-pixel wide "page". Into that div, I start chucking elements.

    Now, with the code above, the banner element appears immediately below the nav_header image. Which is wrong - I want the banner image to be floated immediately to the right of the nav_header image.

    But as soon as I float those two images:

    Code:
    <div id="page">
     
                <img src="img/nav_header.gif" alt="Nav header" width="156" height="205" style="float:left;width:156px;" />
                
                <div style="float:left;width:470px;"><img src="img/banner_468x60.gif" alt="banner" /></div>
    
            </div>
    ... then although the banner goes where it should, in Firefox 2 the page div loses the bg image (content_shadow_bg.gif - this is a 812px wide, 1px high repeating image with about 20px of fading gradient either side: a drop shadow).

    What the...? It's fine in IE6. It passes validation. Why is FF losing the bg image if I float those child elements? Is is a bug? Is it my CSS? How do I fix it??

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Its not a bug. It is your CSS, and IE6 is showing it incorrectly. You need to clear your floats. www.positioniseverything.net/easyclearing.html
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    Senior Coder Spudhead's Avatar
    Join Date
    Jun 2002
    Location
    London, UK
    Posts
    1,856
    Thanks
    8
    Thanked 110 Times in 109 Posts
    AAAGH

    Of course it's the floats. I ALWAYS forget to clear the d*mn floats...

    Thanks


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •