Today we take on an opponent that few dare to challenge. It's the arch nemesis of web developers across the globe, it's antics have caused countless hours of sheer agony, and it's mere presence will mutilate even the most standards-compliant designs. You better believe I'm talking about the infamous anti-browser known as Internet Explorer 6, and today I am going to share a few tricks I use to beat it into submission.

Okay, so maybe it's not quite evil, but what it does to some designs is just plain wrong. And I've recently learned that it still holds close to twenty-percent of the market share by most estimates. This is pretty surprising considering version 7 has now been out for three years and version 8 is already in beta testing. But what does it mean for web developers? It means we have to get over our fears and learn to play nice with the vicious monster in the corner. And just in case the monster bites back, I've put together a list of a few common bugs and fixes that every web developer should have in their arsenal. These are just some tricks I've picked up after fixing a handful of designs in Internet Explorer 6.

• Targeting the monster
  

  There are several CSS hacks out there that allow you to apply style to IE6 without effecting other browsers. In my opinion, the safest and cleanest way is to use conditional comments. The following markup is treated as a simple HTML comment when parsed in most browsers:

  <!--[if lte IE 6]>
  <link rel="stylesheet" type="text/css" href="/style/ie6.css" />
  <![endif]-->

  However, most versions of Internet Explorer will recognize the conditional statement inside the comment. If the browser meets the condition, it will treat the content as if it was regular HTML. So we can easily use the conditional comment to grab a specific external stylesheet for anyone viewing the site in IE6 or earlier, while keeping our markup and CSS virtually the same for all other users. For an overview of all the availible conditional comments, take a look at this article.

• Double the margins, double the fun!

  This is probably the most common problem I see when I first pull down my sites from IE6. All of my div's appear to be sized and positioned in odd ways, usually due to a known bug in Internet Explorer 6 that causes the browser to double padding and margins on certain floated divs. When I first encountered this problem I would go through and redefine all of the problem-divs' left and right margins to half of what they should be. This worked okay, but it was obviously a pain to go through and redeclare the margins for all of the effected divs. After stumbling across an article on the subject I learned that the double margin effect can be countered by adding the following css property to all of the problem-divs:

  #an-ie6-victim {display:inline;}

  Browsers that follow W3C standards will ignore the display:inline attribute on any floated div, but for some reason it forces IE6 to render your div with correct margins and padding. Although very strange, the fix works. And I like it better than my original approach because I don't have to redefine all of my margins.

• Standards, shmandards!

  After fixing the double margins problem, you may still see some oddly sized elements on your page. This is probably due to Internet Explorer's faulty box model. Basically, Internet Explorer will treat an element's width definition as the width of it's content, padding, and border. This is in contrast to the W3C's box model which treats an element's width definition as the width of it's content only. The following diagram clearly illustrates the difference:

  

  Diagram illustrating the box model mismatch.

  Unfortunately there isn't an obscure attribute we can define to magicly fix the problem this time. I recommend using a conditional comment to redefine your element's width when the page is rendered with the IE box model. Other developers will recommend that you modify your markup and styles to avoid the issue altogether. For further reading about this problem, I strongly suggest you check out this article by Roger Johansson.

• You want quirks? I'll give you quirks...

  This is one I didn't run into until later in my career. Apparantly when IE6 is pushed into quirks mode it completely neglects to recognize and calculate automatic margins (margin:0 auto 0 auto;). And to make the situation worse, Microsoft decided to add an extra quirks mode condition: IE6 will revert to quirks mode if there is anything preceding your doc-type declaration. This is a problem because it is very common practice to include an XML prologue before a doc-type definition. In fact, the W3C recommends that you do:

  XHTML document authors are strongly encouraged to use XML declarations in all their documents. Such a declaration is required when the character encoding of the document is other than the default UTF-8 or UTF-16.

  My solution is to check the request and if it's from a user-agent that is known to handle an XML declaration incorrectly (such as Internet Explorer 6), I will omit the declaration from my markup. It's probably a good idea to note that this is not a bullet-proof solution, because I'm sure there are user-agents out there that are unchecked by my server yet cannot handle an XML prologue. You may decide that physically removing the declaration from your markup is a better solution for your website. If you would like further reading on quirks mode, wander on over to the site named after it.

• Show me the alpha!

  A 32-bit PNG has something called an alpha-channel, which can define a variable level of transparency for each pixel in an image (a feature known as per-pixel-transparency). The alpha channel allows web designers to do some really cool things with their graphics, but unfortunately it is not supported in IE6. Microsoft does offer a work-around in the form of a proprietary filter called AlphaImageLoader. Any element that uses a transparent PNG will need an additional attribute that looks something like this:

   

  filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/path/to/transparent-img.png');

  The filter attribute is not defined in the W3C's CSS specification and will make your CSS invalid. Since it only applies to IE6 or earlier, I highly recommend that you use a conditional comment to include any of your stylesheets that utilize the AlphaImageLoader.

After fixing all of those bugs, I usually find that my page starts rendering like it should in IE6. The next step is to break out Firebug-Lite and start debugging the inevitable IE6 JavaScript bugs, but I'll save that for another article.