SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Guru redhillccwebmas's Avatar
    Join Date
    Jun 2005
    Posts
    989
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IE6/IE7 Floating child element creates strange 10px margin/padding

    Hi there,


    I have a strange issue on one of my pages that I've never come across before and was wandering if you guys would be kind enough to help.

    Only when I've floated the inline-styled span does the weird 10px bottom margin/padding appear; when it isn't floated the problem goes away which is very strange

    The code is below:-

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
      <title>Test</title>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    
    <style>
    
    *{
    	margin:0px;
    	padding:0px;
    }
    
    #container{
    background:red;
    width:350px;
    margin:auto;
    }
    
    p{
    	margin:0px 0 10px 0;
    	padding:0px;
    }
    
    
    </style>
    
    </head>
    
    <body>
    
    
    <div id="container">
     <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In ac sapien. Nullam sit amet ante ac neque dapibus tempor. Morbi volutpat mauris sit amet purus. Fusce nec ante ultrices turpis pulvinar aliquam. Phasellus tortor augue, elementum vitae, congue id, tincidunt a, libero</p>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In ac sapien. Nullam sit amet ante ac neque dapibus tempor. Morbi volutpat mauris sit amet purus. Fusce nec ante ultrices turpis pulvinar aliquam. Phasellus tortor augue, elementum vitae, congue id, tincidunt a, libero</p>
      
    <span style="display:block;width:100px;height:50px;background:blue;float:right;">fdfdfdfd</span>
      
    </div>
    
    </body>
    
    </html>
    Any help is much appreciated

    Kind Regards

    James

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,555
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    It has nothing to do with the element being a span as the same behavior happens if you use a div (which you should be using anyway as it isn't inline content that you are floating). It's a bug in IE where it seems to be applying the bottom-margin from the last p tag under the float as well.

    If you remove the bottom margin from the last p tag and apply a 10px top margin to the float instead you will get the result you wanted.

    Alternatively set the p tag to just have a 10px top margin and the bug goes away.

  3. #3
    SitePoint Guru redhillccwebmas's Avatar
    Join Date
    Jun 2005
    Posts
    989
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul,


    Thanks for your help; your suggestion gave me a idea to float the <p> to give it layout, which in fact, worked. So thanks for your suggestion, that led me to the answer!

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,555
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    float the <p> to give it layout,
    Actually "layout" wasn't the issue here (for a change) because you could give the p tag "layout" by other means and the problem still occurs .

    The issue was as I said and that IE has trouble with the bottom margin of the static content when the element underneath was a float. This is similar to another bug where it will apply margins to static content when there is a float above and the margin should pass through the float. The IE algorithm's are very shaky in these areas and don't stand up to scrutiny.

    However your solution of floating the p tag should be fine because it means there is no static content in the mix and no margin behavior to take care of (Margins on floats should never collapse.)


Bookmarks

Posting Permissions

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