July 13, 2009

Supporting IE6 as a web developer is kind of like being a doctor and having to administer a physical (“turn your head and cough”). It sucks, but it’s part of the job. One would be hard-pressed to find a developer anywhere that has anything good to say about old Internet Explorer 6. It’s slow, short on features, and just can’t handle the rich designs and layouts that have become commonplace on the internet today. Unfortunately, IE6 still commands a significant enough slice of the market that it must still be supported. The following is a collection of problems that I deal with on a regular basis. This is by no means a list to end all lists. If you have a bug that you know about that I failed to mention, please post it as a comment. I want this to simply cover as many IE6 problems as possible, even if I’m not the one to address it.

Getting Started

Before we get into the major bugs and how to fix them, there are a few preparatory things we should do that will help make our code a little less hairy.

The first thing is to create a separate stylesheet for IE6. While many fixes involve very little code (you’ll find yourself putting display: inline; on a lot of divs), its best to keep all your IE6-specific CSS in one place. To add a IE6 stylesheet, use IE conditional comments in the code, like this:

These comments can also be modified to address any version or sub-version of Internet Explorer version 5 and up. This can prove quite useful, as you will most likely find your IE6 hack breaks IE7 or IE8 (or that your sane, standards-compliant code breaks IE6, IE7, or IE8). Having at the very least a separate stylesheet for Internet Explorer, if not one for each version, will ensure that your IE fixes don’t get in the way of real browsers rendering your page.

The other thing we should get out of the way from the get-go is setting up a PNG fix. Internet Explorer 6 does not support alpha transparency in images such as PNG-24, so we have to use a hack to get around this. There are a bunch of free solutions out there that use Javascript such as this PNG fix from ntlworld.com or this PNG fix that uses jQuery. There is also a way to implement a PNG fix with CSS.

Bugs

IE6 has plenty of bugs. To touch on all of them would take way too long, so I’ll go into a few of the more common ones. If there are any fairly common or especially notorious bugs that you feel I failed to mention, please leave me a comment and let me know. For a massive list of every single known IE6 bug, have a look at this Huge List of IE6 Bugs (it’s a little old, but it lists a ton of bugs).

Double Margin

One of the most common and notorious IE6 bugs, this involves the margin being doubled on any floating block-level element. The margin is only doubled on the side of the element which it is floating, so left floating elements will have double the left margin and right floating elements will have double the right margin.

Ghost Character

Another fantastic little doozy you might run into when developing for IE6 is something known as the “ghost character” or “ghost text” bug. This problem is typically triggered by having HTML comments between two floating divs. The result is characters from the first div appearing in the second div, like this:

Lucky for you, this is also an easy fix. There are a few ways to skin this cat, but the easiest in my opinion seems to be simply adding

Expanding Box Fail

Leave it to IE6 to take what the W3C recommends and do the exact opposite. This bug occurs when there is a element with content that exceeds the element’s explicitly-defined width or height, such as a really long URL with no breaks or a big image. Most browsers will preserve the width/height of the div, and treat the excessive content as overflow. IE6, however, will expand the size of the element to match the area the content takes up. When a page’s layout depends on floating divs being a particular size, this can be quite the problem.

To grasp the idea of this bug a little better, let’s look at an example. I ran the following code in Firefox, then in IE6:

<div style="float:left;width:300px;">
<div style="float:left;width:100px;background-color:#1111dd;padding:0;margin:0;">http://superlongurlthatwillbreakie6forsure.com</div>
<div style="float:left;width:200px;background-color:#11dd11;padding:0;margin:0;">Here is where the rest of the content would go</div>

</div>

This is what the code looked like in Firefox:

The URL in the blue div is longer than the fixed width of the div, and is treated as overflow. The layout is preserved. Now let’s take a look at what IE6 did to it:

IE6 expands the width of the div to accomodate the content (despite me explicitly telling it NOT TO). This of course causes a float wrap, which breaks the layout.

The solution to this is a couple of lines of CSS:

overflow: hidden;
word-wrap: break-word;

The word-wrap property will cause any text content to wrap based on the width of the containing element even if there are no breaks. The overflow property will cause any other content such as images to be hidden past the width or height of the containing element. For more info about this bug, check out Internet Explorer 6 and the Expanding Box Problem.

Min/Max Height/Width

The easiest way to achieve this in IE6 is to use Internet Explorer’s expression CSS declaration. Expression allows you to execute Javascript inside a CSS document. The only down side to using this method is that it will not work if Javascript is disabled (but let’s be honest, if you’re using IE6 and you have Javascript disabled, you’re pretty much S.O.L.).

For example, to emulate a min-width of 200px on an element in IE6, use something like this:

This is saying if the document window is smaller than 200 pixels, set the width to 200 pixels, otherwise just go with auto. Luckily, since we’re only worrying about one browser, clientWidth will work just fine for getting the window size. If you wanted to implement max-width instead of min-width on the above code, simply change the greater-than sign to a less-than sign. Emulating min-height and max-height involves similar code:

I find this becoming more and more of a problem as I begin to make pages that have more interactive elements. I may build a div that I want to slide open to reveal a form. This isn’t a link, but it would be nice to change the cursor to let the user know that it’s something that will react if they click it. Of course, in more modern browsers this can be accomplished with one line of CSS, but IE6 requires a little more finesse. There are a number of ways to do it, but I find the easiest way is to use jQuery (or your Javascript library/code of choice), like so:

That’s All (for now)

Hopefully this has saved you a little time or prevented a headache or two. Again, I encourage any contributions you might have to this. Diggs and Stumbles are very much appreciated, and if you really liked this, you can follow me on Twitter at @jimdanko