SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast
    Join Date
    Aug 2004
    Location
    Australia
    Posts
    44
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IE6 messing up left column margin?

    Does anyone know why ie6 adds an extra 5px to my leftbox div in the code below. It is basically a left column inside of a content div that already has a header and footer. The left margin for some reason ends up being like 10px instead of the 5px that I specified.

    Firefox handles it ok and looks to be only 1px off but I guess that is because my container has a 1px border.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <style type="text/css">
    /* commented backslash hack v2 \*/ 
    html, body{height:100%;} 
    /* end hack */
    
    body {
    padding: 0;
    margin: 0;
    text-align: center; /*Center the content div*/
    height: 100%;
    }
    
    * html #content{height:100%;}
    
    /* ---- Content, Header, Footer, Clear Footer, Gap etc ---*/
    #content {
    margin: 10px auto;
    height:auto;
    width: 760px;
    min-height: 100%; /* for mozilla*/
    text-align:left; /*so content isn't centered as body is*/
    border: 1px solid #000;
    background: #FFF;
    margin-bottom:-50px; /*for footer*/
    }
    
    #header {
    margin: 0 auto;
    text-align:left;
    width: 760px;
    height:100px;
    border-bottom: 1px solid #000;
    }
    
    #footer {
    margin: 0 auto; /*auto margin required for left/right to center footer*/
    width:760px;
    clear:both;
    height:50px;
    text-align:left;
    background-color: #FF8080;
    border: 1px solid #000;
    }
    
    #clearfooter{clear:both;height:50px;}
    
    #gap{
    margin: 0 auto;
    width:760px;
    height:10px;
    background:#FFF;
    }
    
    div>p {margin:0}
    
    #leftbox {
    float:left;
    text-align:left;
    margin: 5px;
    padding: 0px;
    width: 250px;
    background: #316684;
    }
    
    </style>
    </head>
    
    <body>
    <div id="content">
    	<div id="header">Header</div>
    		<div id="leftbox">
    		Left Column
    		</div>
    	<div id="clearfooter"></div>
    </div>
    <div id="footer">Footer</div>
    <div id="gap"></div>
    </body>
    </html>
    Thanks.
    Brad.

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

    Ie has a double margin bug on the side of a float that is nearest the windows edge or parents container. The margin on that side is approximately (though not exactly) doubled.

    The solution (recently found) has been to apply display:inline to the offending float. As floats are hard coded diplay block it make no difference to other browsers but for some reason it fixes ie's bad habits.
    Code:
    #leftbox {
    float:left;
    text-align:left;
    margin: 5px;
    padding: 0px;
    width: 250px;
    background: #316684;
    display:inline;/*ie fix*/
    }
    Paul

  3. #3
    SitePoint Enthusiast
    Join Date
    Aug 2004
    Location
    Australia
    Posts
    44
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul,

    That is handy to know.

    Regards,

    Brad


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
  •