Accessibility

CSS Advisor

Border Chaos

by CSSAdvisorAdmin on October 31, 2006
Edited by: Amy C Taylor on March 26, 2011
Avg Rating 4.0 (3)   |   Log in to rate post.

Tagged with Explorer 6.0 , Border

Problem

If the second of two consecutive block-level boxes has a negative top margin and that same box - or one of its ancestors - has a border, Internet Explorer 6 will render the borders in a highly chaotic manner.

Solution

Avoid this scenario if at all possible. The Holly Hack may work in some cases if carefully applied.

Detailed description

Setting position: relative on the offending box or its ancestors solves the problem — but only for that specific box and its descendants. Any ancestors with borders will still be rendered chaotically.

With a little difficulty, this bug may be fixed with the Holly Hack. The difficulty is identifying exactly which boxes need the hack, and I think it might vary depending on the context.

NOTE: The size of the negative margin matters; for example, if the two consecutive blocks are an <h1> followed by a <div>, the <div>'s negative top margin has to be significant enough to close the gap between the bottom of the <h1> and the top of the <div>. In other words, the problem occurs when the boxes overlap—and what size negative margin will cause an overlap depends on what kind of block boxes you have. This will make the problem more difficult to detect.

Issue originally documented by Jonathan McLean on positioniseverything.net.




Tagged with Explorer 6.0 , Border

Tag it on del.icio.us or Digg

Text ID: BORDER_CHAOS



Comments (1)

To add a comment, please Log in.




Firefox

Ok, it really helped me. The Hack worked out, but why the Firefox didn't get this problem? Can you explain me. I think understanding the diferences between Firefox and explorer we can find out other problems easily.
Thank you!





CSS Advisor home
Submit a post

rss

CSS ADVISOR RSS FEEDS
Recent: POSTS | COMMENTS | EDITS


Browsers
Internet Explorer (103)
Mozilla/Firefox (52)
Opera (18)
Safari (38)
CSS Properties
Background (25)
Border (10)
Color (10)
Float (23)
Font (6)
Margin (11)
Padding (9)
Position (40)
Text (30)
Width/Height (27)