1. Home
2. Developer Center
3. Dreamweaver Developer Center
4. CSS Advisor

CSS Advisor

Border Chaos

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.

Text ID: BORDER_CHAOS

---