This article will give you an understanding of IE6’s limitations, enabling you to prevent IE6 bugs before they are created, and greatly minimize the time you spend struggling with IE6.
The office is quiet and dark. Christmas lights draped over cubicle walls provide a dim, warming glow. Your monitor has been emitting a blinding white light for hours. The wind howls outside. It’s a dark, cold, blustery winter night. You look at the clock in your taskbar. It’s 11:12PM.
“F#!kin’ F$!kin’ sh!#t! Who gives a sweet f#!ck about IE6!”
You’re now convinced that IE6 has ruined Christmas. You’ve been cursing it for hours. Not only is your layout still not working in IE6, but your stylesheet is a complete disaster from all the “fixes” you’ve been trying. The site needs to be sent to the client tomorrow morning and 63% of their users use IE6.
Fixing IE6 bugs is usually one of the last things developers tackle during a project. There’s nothing wrong with that. However, ignoring IE6 until the end of a project is like weaving your own nightmare. A firm understanding of IE6’s limitations and consideration of those limitations during development is the key to preventing that nightmare.
The following points are important to keep in mind when developing for IE6 support.
Overflow: hidden
When a DOM element is floated and you want to maintain the height of the parent element, it is common practice to set the parent element’s overflow property to “hidden.” However, IE6 does not always support this behavior.
For IE6 to support this behavior, the width and/or height properties must be set and in some situations the position property must be set.
The following example illustrates how overflow: hidden behaves in IE6 with and without the width, height and position properties set.
Check out the complete sample page and source code here.
Now that we know and understand overflow:hidden in IE6 (for the most part), we can add some CSS to our IE6-only stylesheet before even looking at the site in IE6. We can go through all of our CSS and pick out all the selectors that employ overflow: hidden (and expect the behavior described above). Then we can add those selectors to our IE6-only stylesheet and set the position and height properties to “relative” and “100%” respectively:
#header, #nav, #content#, #footer {
position: relative;
height: 100%;
}
It’s important to note that we only set these properties for situations where we have a floated element and need the parent to behave with overflow: hidden. We shouldn’t set the position and height for elements that use overflow:hidden for other reasons. A typical example where you wouldn’t bother setting these properties is when replacing text with a background image, like the following:
a.button {
background: url(../image/button.gif) no-repeat;
text-indent: -5000px;
overflow: hidden;
}
Chaining classes in CSS selectors
As Ryan Brill points out, “IE6 doesn’t understand the chain of classes within a CSS selector, but rather only reads the last class.” It’s simple, don’t chain classes in your CSS selectors. The following is very nice, but will get you into trouble with IE6:
<div class="box callout">
...
</div>
div.box.callout {
...
}
For now (while IE6 is still in the equation), we’ll write it like this:
<div class="box box-callout">
...
</div>
div.box-callout {
...
}
We all wish we didn’t have to do this, but we also wish we could write <header> (HTML5) instead of <div id=”header”>. Alas, these are the times we develop in and the browsers we develop for.
PNG alpha transparency
IE6 does not support PNG alpha transparency. You can get PNG alpha transparency to work using Microsoft’s proprietary DirectX filters. However, it doesn’t work over SSL (https) and the behavior can be erratic and a very frustrating experience.
In most cases, the percentage of IE6 users is now low enough that offering a slightly degraded experience for those users is acceptable. Slightly degraded means no drop shadow here and no shading there. Not a big deal and accepted by most clients (though it’s a good idea to check with them first).
This degradation strategy often means creating a GIF for every PNG that uses alpha transparency. The GIF simply replaces the drop shadow, shading, or any other alpha transparency elements with plain, solid GIF transparency. It’s a bit of a pain to create a matching GIF for every PNG, but there shouldn’t be too many that use alpha transparency.
The example above shows RMHC.org (a site we recently launched at work) in Firefox and IE6. For IE6, a GIF replaces the header and the menu background, removing the drop shadow in both cases. As you can see, the difference is subtle.
Doctype
As Dustin Diaz recently pointed out, the following is all that is needed to make sure all browsers render the page in standards mode, including IE6:
<!doctype html>
Without the doctype, browsers revert to quirks mode. This is very bad in IE6, as the box model is different than other browsers.
Min-Height, Max-Height, Min-Width, Max-Width
The min-* and max-* properties are yet another set of CSS 2 features unsupported in IE6. Fortunately, there are ways to get this working in IE6 with Javascript. The easiest and cleanest way is to write expressions in your IE6-only stylesheet.
/* For modern browsers */
div.section {
max-width: 500px;
}
/* For IE6 */
div.section {
width: expression( document.body.clientWidth > 499 ? "500px" : "auto" );
}
If you need to get these properties working in IE6 without Javascript, there’s a number of CSS hacks that provide workarounds, but they are not as accurate a solution as expressions.
Pseudo classes :first-child, :last-child, etc
IE6 ignores a great number of pseudo classes supported by more modern web browsers. Some of the pseudo classes it ignores are very useful and it can be difficult to resist employing them. But if you’re supporting IE6, you cannot use them.
Instead you can add the class “first-child”, “last-child”, etc on the element where you would use a pseudo class. The following is a typical example where classes are used instead of pseudo classes:
<ul>
<li class="first-child">item 1</li>
<li>item 2</li>
...
<li class="last-child">item 12</li>
</ul>
ul li.first-child {
...
}
Conditional Comments and !important
Make use of conditional comments and an IE6-only stylesheet. Then there should be no excuse to litter your main stylesheet with IE6 hacks. Conditional comments is the recommended way to add IE-only rules to your CSS by both Microsoft and respected web developers alike.
<!--[if lt IE 7]> <link rel="stylesheet" type="text/css" media="screen" href="/css/main-ie6.css" /> <![endif]-->
Avoid using !important as it is ignored by IE6 and will make things very confusing during debugging.
Debugging IE6
Although there are lots of other issues that can plague your development, keeping the above points in mind will put you in a much better position when you begin testing in IE6.
When it is finally time to take a look at your site in IE6, it is a good idea to first validate your markup. IE6 is particularly sensitive to any invalid markup when rendering in standards mode, so it is important to fix before attempting anything else. I’ve previously discussed the tools I use to do this.
If the markup validates but there are still issues, it’s a good idea to go over the points above in case something was missed. If that doesn’t work, a bit of controlled experimenting may be a good idea. Finally, as a last resort you can search Google for the problem.
This article also has some helpful links about debugging in IE6.