We came across another of those infuriating IE6 bugs the other day. It’s a bit obscure but I’m sure others have hit it.
It occurs when you have a large containing block with a border around it. For example:
<div style= "border: 1px solid #ccc; padding-left: 20px; padding-right:8px;">
-
-
-
lots of text
-
-
-
-
</div>
The text needs be long enough to make the browser scroll vertically. Then you add a float block which is larger than the text then clear it. For example:
<div style= "border: 1px solid #ccc; padding-left: 20px; padding-right:8px;">
<div style=”float:right; width:400px; padding:0px 10px 10px 20px”>
<img src=”images/office.jpg” alt=”office photo” /><br /><br />
</div>
-
-
-
lots of text
-
-
-
-
<div style=”clear:right”></div>
</div>
The annoying bit
What happens is that everything appears to render correctly, but when you scroll your browser down vertically, at the point where the text ends (and the larger floated block continues), the vertical border lines disappear/corrupt.
The fix
After hours of trying different floats, padding, clearing etc, the fix is despairingly simple - just put a position:relative element in the div that contains the border declaration, as follows:
<div style= "position:relative; border: 1px solid #ccc; padding-left: 20px; padding-right:8px;”>
