Which IE6 bug?

I am trying to float some text around a photo image using


<div>
<p>
<img class="floatleft" src="image.gif" alt="" width="100" height="100">Lorem ipsum dolor sit amet, consectetuer...
</p>
</div>

I have set <div> to clear:both so that if there isn’t enough text, it doesn’t matter and the <div> stack on top of each other.

In Firefox3 and Opera, there is not gap between the <div>, but in IE6 there is.

Can someone point me to the IE6 bug that is the culprit?

Hi,
It sounds like you just need to trip haslayout for IE6.

Working from the code you posted this was the best I could make of what you are trying to do.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test</title>

<style type="text/css">
div {
    clear:both;
    overflow:hidden;/*contain inner floats and IE7 haslayout*/
    background:#EEF;
}
.two {background:#CDF;}

* html div {zoom:1;}/*IE6 haslayout*/

img.floatleft {
    float:left;
    background:red;
}
.two img {background:lime;}
p {margin:0;}
</style>

</head>
<body>

<div>
    <p><img class="floatleft" src="image.gif" alt="" width="100" height="100">Lorem ipsum dolor sit amet, consectetuer...</p>
</div>
<div class="two">
    <p><img class="floatleft" src="image.gif" alt="" width="100" height="100">Lorem ipsum dolor sit amet, consectetuer...</p>
</div>

</body>
</html>

That was it!
Thank you.

Boy, do I hate IE. :slight_smile: