Skip to: Site menu | Main content

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:

Missing border in IE6


The border appeared fine in both Firefox and Safari. Here's the CSS for the DIV before I found the solution:

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:

With border

 

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.

Submitted by michael on Thu, 09/06/2007 - 9:12am
Filed under:

Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.

Your tip saved my day.

Wasted half a day before I found your post. Thanks so much!!

Your tip saved my day.

Wasted half a day before I found your post. Thanks so much!!

Thanks... It worked for

Thanks...

It worked for me...

Thanks a lot.

Tanks alot! That probably

Tanks alot! That probably saved me alot of time :)

Thanks for the tip!

Thanks for the tip! Although it hasn't solved all my ie6 border issues...

Thanks!

Thanks, that helped me out lots! :)

IE6 "Peek-a-boo" bug

I am having the same problem. It reminded right away of the so-called IE6 "Peek-a-boo" bug, which uses the same fix of positioning the container as "relative."

The behavior is the same too, in that my missing border is on a DIV that gets hidden and displayed as a pop-up. When the page first loads, and the pop-up is activated, the border is missing. But if the pop-up is hidden, and then activated again, the border is there.

My trouble is that the pop-up is absolutely positioned. If I switch the positioning to relative, the border displays correctly on first load, but I lose the required positioning.

I'm going to try setting the DIV to "relative" and then wrapping it inside another DIV that is absolutely positioned.

Great tip!!! Thanks!

Great tip!!! Thanks!