How To Easily Tame the IE6 Monster in 5 Minutes

Oddly enough I got a lot of random questions asking me how I deal with IE6 yesterday, so I thought it would be a perfect way to expand on how I get IE6 to behave properly (most of the time) in 5 minutes or less. Let’s start with some of the most common problems developers have in IE6, and if I missed anything, let me know if the comments and I’ll offer advice on that too.

Don’t close your eyes and hope the monster goes away

IE6 is slowly phasing out, but don’t hold your breathe. Thanks to business IT and corporate America, it’s probably going to be an issue for awhile. It’s best now just to learn how to work with it, not against it. You could be alientaing some potential clients if you decided not to support it. Also, I was asked if I charge more money to make my websites work in IE6. Honestly, even though complicated layouts really are a pain in the arse sometimes, most of the time it really does take me less than 5 minutes to get it working correctly, so it’s just a part of the browsers I support with all of my coding.

Before you begin the battle

Ensure you have your CSS Reset and/or PNG Fix in place (mentioned in my Nifty IE CSS and HTML Tricks post) before you even begin to code for any browser. The CSS Reset really does resolve a good 90% of all IE problems, just copy and paste right as you’re beginning your CSS. The PNG fix just allows transparent PNGs to work in IE6, although recently, I’ve tried to avoid transparent PNGs for the sake of ease and simplicity – but layouts that break out of the box model with crazy gradients and such may still require it.

Choose your weapon carefully

The best way to fix your website in IE6 is to code it properly in the first place and not have to fix your website in IE6. There are common bugs you can anticipate beforehand and avoid.  These are:

Floats and margins

This issue is probably the most common in IE6. Common because you almost always need to use a float AND a margin going in the same direction. ex. { float: left; margin-left: 10px; }. However for some odd reason (I stopped questioning Microsoft’s stupidity long ago) IE6 doubles margins that go in the same direction. So in reality, { float: left; margin-left: 10px; } in IE6 actually becomes { float: left; margin-left: 20px; }. Crazy huh? There are TWO different fixes for this:

  • Half your margins inside of your IE6 conditional stylesheet. You can do this without even looking at the website in IE6 and it will work OR
  • Use padding-left or padding-right instead of margin left or right (depending on what type of float you use) Lately, I’ve been incorporating this route more, as I’ve been trying to get rid of the IE6 conditional stylesheet altogether. This is something you can do easily with almost no extra thought, and it produces the same results as a regular margin; with no IE6 mess-up.

An easy way to do this is to use both float lefts and float rights; this eliminates the need for so many margins and positioning. Strangely, when I was first beginning to learn CSS, I almost never used float: rights; and subsequently I cursed the IE6 gods everyday.

This fix alone, in combination with the reset, is often enough for simple to medium complicated websites to work perfectly in IE6 the first time.

Floating text and images side by side

Another easy, but common problem. Floating a <p> or <li> tag next to image can create problems if it has a width. Modern browsers can actually anticipate what you’re trying to do with this, and render it properly, even if it doesn’t make sense. However, chalk it up to IE to mess things up. If you have a 600px container with a <p> tag of 300px and an image of 300px side by side, Firefox and Safari will render this properly (pushing the text to wrap around the image) but IE6 (and 7) will not, and will push the image to the bottom. While this sounds obvious, it’s actually something I find a lot of people have problems with. Fix:

  • Just remove the width from the <p> or <li> tags. This may make for some other problems, but unfortunately, CSS misses on some obvious points (like floating around the top AND sides of an image that’s positioned….it kills me you can’t do that, ex: my twitter box on the home page)

CSS Sprites

Not a problem for me, as I do mine different; however I’ve seen plenty of tutorials that tell you to put the sprite on the actual <li> element. DO NOT do this as it doesn’t work in IE6, because IE6 only supports hover states on <a> elements.

  • Make your CSS sprites like this, and you won’t have a problem

Borders a.k.a the Box Model

IE6 Calculates it’s borders and padding differently than modern browsers. While modern browsers go OUT (width 100px border of 5px makes the width 110px} IE6 goes IN (width becomes 90px } YOU SHOULD NEVER EVER EVER SEE THIS BUG, or you’re coding incorrectly. I never knew this bug existed until someone pointed it out. Here’s what Wikipedia says:

  • Internet Explorer versions 6 and 7 are not affected by the bug if the page contains certain HTML document type declarations. These versions maintain the buggy behavior when in quirks mode for reasons of backward compatibility.[12] For example, quirks mode is triggered:
  • When the document type declaration is absent or incomplete;
  • When an HTML 3 or earlier document is encountered;
  • When an HTML 4.0 Transitional or Frameset document type declaration is used and a system identifier (URI) is not present;
  • When an SGML comment or other unrecognized content appears before the document type declaration
  • When there are errors anywhere in the document
  • Internet Explorer 6 also uses quirks mode if there is an XML declaration prior to the document type declaration.[13]
  • Various workarounds have been devised to force Internet Explorer versions 5 and earlier to display Web pages using the W3C box model. These workarounds generally exploit unrelated bugs in Internet Explorer’s CSS selector processing in order to hide certain rules from the browser. The best known of these workarounds is the “box model hack” developed by Tantek Çelik, a former Microsoft employee who developed this idea while working on Internet Explorer for the Macintosh. It involves specifying a width declaration for Internet Explorer for Windows, and then overriding it with another width declaration for CSS-compliant browsers. This second declaration is hidden from Internet Explorer for Windows by exploiting other bugs in the way that that browser parses CSS rules. The implementation of these CSS “hacks” has been further complicated by the public release of Internet Explorer 7, which has had some issues fixed, but not others, causing undesired results in pages using these hacks.[12]
  • Box model hacks have proven unreliable because they rely on bugs in browsers’ CSS support that may be fixed in later versions. For this reason, some Web developers have instead recommended either avoiding specifying both width and padding for the same element or using conditional comment and/or CSS filters to work around the box model bug in older versions of Internet Explorer.[14][15]

This means if you’re working in XHTML 1.0 Strict or even Transitional..this bug should never come up. Time to modernize your validation developers!

Floating Left and Right

This is a common problem in older browsers, including older versions of Firefox and below. Thankfully the browser developers have finally started figuring out that the way float: left; and float:right work is ridiculous; common sense says if you have one box that needs to float: left; (do it) and then float:right the next box to get rid of nasty margin problems in IE6….right? So then why is your right box pushed down below the left box? Fix:

  • Make sure the box you’re floating right goes before the box you’re floating left in the HTML. Yes, it doesn’t make any sense. but it works.

Are there any other bugs you’ve come across that I’ve missed? Let me know and I’ll either include them here with the fixes; or will find a fix for you 🙂