returncontrol

There’s been a lot of talk recently about whether it’s time Web developers stop supporting Internet Explorer 6. In June, development firm 37Signals reported that Apple dropped IE6 for MobileMe, the new version of its .Mac services. Then 37Signals itself announced it would do the same by mid-August for its line of project management products.

The move makes sense for both companies, as the users of the products mentioned are largely tech-savvy individuals who are already using modern version of Web browsers, or know how to upgrade. But for those of us who build sites for audiences that still include a high number of IE6 users, it’s highly likely we’re going to be dealing with IE6’s bugs and poor implementation of standards for at least a couple more years, if not longer.

Fortunately, there are some tricks that can reduce the headaches and make building cross-browser compatible sites a lot easier. Here’s what I do:

1. First, I make sure to clear CSS floats using only the Asslet / PositionIsEverything.com method. (Paul O’Brien apparently has another, seemingly simpler way to do it, but I have yet to test it in all the different scenarios that the Asslet / PiE hack works in.)
2. Next, I explicitly set both the margins and padding on list items, paragraphs, and other major elements, so that the differences in default settings between IE and other browsers don’t mess things up.
3. For JavaScript functionality, I use the excellent jQuery library, which lets me focus on the interactivity I’m trying to create rather than worrying about cross-browser compatibility. I also use jQuery to set rollovers on elements where IE6 doesn’t support the CSS hover property.
4. Finally, if I need to set some style specifically for IE6 only — for instance, because div widths are calculated differently in IE6 — I use the underscore hack for declaring a style that only IE6 understands. (You can also use the asterisk hack for IE7-specific styles.) Here’s the basic concept:

   width:10px; /* sets width to 10px in all browsers */
   _width:8px; /* overrides first style and sets width to 8px in IE6 only */
   *width:11px; /* overrides above styles and sets width to 11px in IE7 only */
   

That’s it. There are dozens of other hacks and techniques for getting IE6 to do what other browsers do as a matter of course, but I find that if I stick to these four, I can most always create cross-browser compatible sites without pulling my hair out. So if you’re stuck supporting IE6 for a while longer, hopefully these tips will make your life easier too.