Edinburgh Web Development

Border vanishes in IE6

by Iain Wilson

2 March 2007

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;">

Liked this article? Please share it with your friends and colleagues.


comments powered by Disqus
 
Blot Design,
10 Colinton Road, Edinburgh, EH10 5DT,
0131 208 1792
Terms, Cookies & Privacy