Beyond the serene waters of Firefox, beyond the vast fertile plains of Safari, farther even than the citadel of Opera and the murky swamps of Internet Explorer 7, there lurks a beastâ€“one that will take your best website designs, devour them, and leave nothing behind but a smoldering slag heap. It will reduce you to a blubbering pile as hours of your best work disappear into itâ€™s gaping maw.
This beast is Internet Explorer 6.
A Plan of Attack
Everyone has their own recommendations for developing for Internet Explorer 6. Some start with a webpage that works in IE6, then testing it with more modern browsers. This is fundamentally backwards. Doing your initial coding with the goal of IE6 compatibility doesnâ€™t encourage clean markup, valid code, or CSS best-practices. IE6 is the problem, so why saddle other browsers with code best suited for IE6?
We start our IE6-safe design by ignoring it. I personally am a strong advocate of using a reset stylesheet as the basis for your design; these remove inconsistencies in defaults between browsers and help ensure more consistent cross-browser rending. I start testing in Firefox, my preferred browser; feel free to use Safari, Opera, or even Internet Explorer 7 according to your preference. Once your site is perfect in your browser of choice (and you did remember to test in different resolutions and at different font sizes, didnâ€™t you?), move to one of the other browsers. Test, tweak your CSS as needed, then make sure you didnâ€™t break anything in your original browser. Keep iterating through this process until youâ€™ve gone through all four browsers. Although any order is fine, Iâ€™ve had the best luck going from Firefox to Internet Explorer 7 to Safari to Opera; chances are good that by the time you have any two browsers done, the remaining two will require minor changes (if any) to work.
Once youâ€™ve run the browser gauntlet, itâ€™s time to validate your CSS. While thereâ€™s been some debate about how important validation actually is for CSS, itâ€™s still generally considered best practice. Even if you end up without valid CSS when all is said and done, the CSS validator can help alert you to potential pitfalls along the way, including the bone-headed typos that Iâ€™m so apt to make. (Note, here, that thereâ€™s a difference between valid code and validating code; CSS vendor extensions like -moz-border-radius are valid according to the W3C, but will throw errors in their validator. So keep in mind what the rules are, when to bend them, and when to break them.)
At this point weâ€™ve dealt with everything but Internet Explorer 6, creating a stylesheet that works in modern browsers. Now weâ€™re going to give IE6 (and below) itâ€™s very own stylesheet using Microsoftâ€™s proprietary conditional comments (plain English explanation here):
<!--[if lte IE 6]>
<style type="text/css" src="ie.css" mce_src="ie.css" />
Whatâ€™s going on? The more astute of you may notice that we have inside what is actually a special HTML comment a link to a file called ie.css. Because of Internet Explorerâ€™s support for conditional comments, it will read whatâ€™s inside the comment as regular HTML if itâ€™s version 6 or earlier (the lte 6 part of the equation); everything else will ignore it (because, after all, itâ€™s just a comment). Now we can dump IE6-specific hacks in their by the truckload and not have them effect other browsers. Not only that, because the code is actually in a comment, our pageâ€™s CSS will still validate (if we decide weâ€™re into that sort of thing), no matter what kind of dirty, dirty things we have to do in there.
Know Your CSS Hacks
So what kinds of things are you going to need to put in your ie.css file? There are entire sites dedicated to Internet Explorer 6 bugs and workarounds; no point in rehashing them all here. Two that youâ€™re sure to run into are the box model and the ever-mysterious hasLayout; the former can be fixed by adjusting width and height relative to padding and margin in your ie.css file, the latter can usually be fixed with the simple addition of the proprietary â€˜zoom: 1;â€™ to the offending elements.
Testing On Any Platform
Of course, youâ€™re going to need to test all of this somehow. At this point, very (very) few designers and developers have Internet Explorer 6 as their primary browser, so weâ€™re going to have to get our hands on it somehow in order to see how all of this is looking. Luckily, weâ€™ve got some options.
Advantages: no setup, cheap or free, test multiple versions of Internet Explorer at a time, works on any operating system
Virtual Machine Based
Advantages: comprehensive interactive testing, real-time
Disadvantages: time-intensive initial setup, requires powerful computer and extra HD space
Advantages: real-time testing, easy setup
Best of luck.