IE6 Disappearing Border

As a web developer, I'm often called upon to translate a designer's mockup into valid XHTML and CSS that will work across a wide range of browsers. Like many developers, Firefox is my browser of choice while Internet Explorer (IE) is avoided at all costs.

I recently came across an issue with a simple XHTML DIV element that wasn't behaving properly when viewed with IE6. The issue with the simple DIV was that I had a 1 pixel border applied to it, but the entire border refused to show up in IE6:

div.group_message_box {
margin-top: 5px;
border: 1px solid #6699CC;
padding: 5px;
}

After much fustration, and some help from the most excellent CSS: The Missing Manual book, the solution was to add a "position: relative" declaration in the CSS definition. With the seemingly meaningless change, the border magically appeared:

Here's the final CSS definition:

div.group_message_box {
margin-top: 5px;
border: 1px solid #6699CC;
padding: 5px;
position: relative;
}

I'm not entirely sure if there's a logical reason behind this (it may have something to do with giving the DIV "layout" - a funky IE term that seems to have mystical powers), or if it is just one of the many quirky aspects of IE. Regardless, it quickly and cleanly fixed the issue with no ill effects in any of the other browsers I tested.