Common IE6 Bugs (and Fixes)

Internet Explorer 6 has been available since 2001, so it’s no wonder that it is problematic to develop for when one compares it to Firefox, Chrome, or Safari. There have been two new versions released since then (with IE9 around the corner), but due to the unfortunate popularity of ActiveX for companies’ internal applications, many people still rely on this ancient browser.

Here are some common IE6 bugs and fixes every UI developer should know:

Double Margin Bug

The Bug:

A well-known IE6 problem which occurs when one adds a (positive or negative) margin to a block-level element which is floating in the same direction.

#foo {
    background: #99f;
    float: left;
    margin-left: 10px;
}

On the left you see how it renders on a normal browser, and on the right you see IE6’s rendering of the same content.

The Fix:

#foo {
    background: #99f;
    display: inline;
    float: left;
    margin-left: 10px;
}

Simply add display: inline to the floated element’s style, and IE6 will render it correctly. Well, almost always…but we’ll cover that another time.

Minimum Height Bug

The Bug:

If you write semantic markup you shouldn’t run into this often, but many developers eventually see this when creating elements with no content (say, just to use an element for its background-image):

#foo {
    background: #99f url(image.png);
    height: 4px;
    width: 12px;
}

IE displays this 4-pixel-tall element as if there is a line of text inside.

The Fix:

Since the element has been sized to the line-height of the element, we can fix this bug by setting font-size to 0.

#foo {
    background: #99f url(image.png);
    font-size: 0;
    height: 4px;
    width: 12px;
}

3px Margin Bug

The Bug:

IE6 (even in standards-compliant mode) will add a three pixel margin to the opposite direction of the float property, pushing text or elements over by those three pixels. This can result in a few different issues, such as the following (again, with a standards-compliant browser on the left, and IE6 on the right):

#foo {
    background: #99f;
    float: left;
}

Here you’re seeing the three pixel space pushing the first line of text over and out of alignment.

The Fix:

We can fix this by adding a negative three pixel margin to the offending float, reducing its size.

#foo {
    background: #99f;
    float: left;
}
* html #foo {
    margin-right: -3px;
}