Forum Moderators: not2easy
Any advice is greatly appreciated.
<!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" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Gap problem in IE</title>
<style type="text/css">p, h1, h2 {margin-top: 0; padding: 0;}
html, body {margin:0; padding:0; left:0; margin-top:0;padding-top:0; font-size: 0;}
body {
font: 100% Arial, Helvetica, sans-serif;
font-size: small;
margin: 0;
padding: 0;
text-align: center;
background-color: #000; /* easier viewing */
color: #fff;
text-align: left;
}
#logo {
float: left;
background-color: #00f;
width: 150px;
height: 150px;
margin: 0;
padding: 0;
}
#title { /* liquid layout */
margin-left: 150px;
height: 50px;
background-color: #0f0;
color: #000;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="logo">
</div>
<div id="title">
<p>In Internet Explorer there will be a 4px gap <br />
<-- right here </p>
</div>
</body>
</html>
That would be a well known bug in IE6 that never got fixed in all those years.
I'd try to let the normal flow gain "hasLayout" to fix it (by e.g. applying "zoom:1" in a conditional comment so only IE6 sees it.
I added
* html #title {display:inline-block; zoom:1; }
and the gap still remained. I also tried forcing it to an inline block by adding "display: inline-block;" but that didn't work. I tried adding a "height: 1%;" in (also a has_display fix) but while the block now fit the text on the bottom, the left gap remained.
I was preparing to ask for more info and tried one last trick, putting this in the head of the
document just before the closing </head> tag:
<!--[if lte IE 6]>
<style type="text/css">
#title {margin-left: -3px; height: 1%;}
#logo {margin-right: -3px;}
</style>
<![endif]-->
And this worked! Many thanks for giving me the critical idea, especially pointing out that this was a well known 3px layout bug, and it was related to has_layout. I've added the additional info to help others hunting for answers to this in the future.
