This page demonstrates an IE6 bug that occurs when HTML comments are inserted before divs that are relatively positioned. Thanks to Don Chambers for his help with IE6 testing.

This code is public domain; you may use it for any purpose. To comment, please visit http://judebert.com/progress/permalink/IE6-comment-bug.html.


This code has no offending HTML comments. It produces a rectangle with two yellow corners and green or blue sides:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris malesuada. Morbi venenatis.

Etiam pharetra, odio eu tempus eleifend, nunc neque dapibus libero, id lacinia lacus ipsum non nisi.

When you insert an HTML comment before one of the relatively-positioned divs, IE6 makes a mess of the whole thing:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris malesuada. Morbi venenatis.

Etiam pharetra, odio eu tempus eleifend, nunc neque dapibus libero, id lacinia lacus ipsum non nisi.

The CSS is largely identical to the Four Corner PNG Drop Shadows at Position Is Everything.