IE6 messing up left column margin?

**bradles** · Aug 25, 2004 23:18

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.

**Paul O'B** · Aug 26, 2004 04:31

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

**bradles** · Aug 26, 2004 06:24

Thanks Paul,

That is handy to know.

Regards,

Brad

User Tag List

Thread: IE6 messing up left column margin?

Thread Tools

Display

IE6 messing up left column margin?

Bookmarks

Bookmarks

Posting Permissions