Five simple steps to alleviate IE6 frustration

Warning This article was written over six months ago, and may contain outdated information.

A post called Trash All IE Hacks! on the (rather lovely) Web Designer Wall blog has attracted a huge amount of comments recently with its call to stop pandering to those who have the audacity to still be using the previous version of Internet Explorer (approx. 80% of visitors on one site I manage), and to display the broken layout as punishment for anyone not au fait with modern browsers.

Just in case you missed it, I was being sarcastic there; to take that attitude would be like a TV station transmitting black & white signals to anyone who hasn’t yet bought a High Definition set.

From the many supportive comments, a few said things like 85% of my time is wasted coding for IE6! or I spent two nights getting the layout to work in IE6!; to that, I can only reply: either you are doing something wrong, or you are a bad coder — or both.

It’s not hard to get sites to display properly in IE6; sure, you’ll have to put in a little extra effort, but it shouldn’t be anything like 85% of your time, or 50%, or even 10%. All you need to do is follow these five simple steps:

  1. Use the correct doctype.

    I won’t go into the details of what a doctype is or what it does (you can get that here); all you need to know is that if you put the correct doctype for the code you are writing in the very first line of your page, you’ll nip a lot of potential problems in the bud.

  2. Start from a level playing field

    Use a reset stylesheet to remove the default styles imposed by the different browsers. Some people like to use the universal selector, but I prefer something like Eric Meyer’s version.

  3. Write good code.

    I’d wager that many ‘IE6 mistakes’ are down to quality of input. Aim to make your code validate (use the W3C’s CSS Validator and their spiffy new Markup Validator), but don’t get too hung up on it if it doesn’t, as long as you know why it doesn’t.

  4. Know why things go wrong.

    Find out which IE6 bugs exist, and what you can do to work around them. Sometimes you will have to add a little extra markup, but more often than not you can fix problems without it.

  5. Keep your fixes clean.

    Add any necessary fixes in a stylesheet with conditional comments; do not be tempted to use CSS hacks. Unless you are coding your site with extensive use of CSS 3 selectors, I bet you can resolve most problems in a few lines.

There will be times when IE6 has you slapping your forehead in frustration, of that there’s no doubt; but if your palms are sore and your forehead burning, it could be that the problem lies not with the browser, but with you.

6 comments on
“Five simple steps to alleviate IE6 frustration”

  1. The problem is that IE6, and hell even IE7 doesn’t support all of CSS2!!!!

    When we have to add things like “text-align:center;” to a previous box element just to get another box element to center when we could, logically use “margin: 0 auto;”.

    And of course; lets not even go into CSS3.

    IE could use a lot of improvement with doing things the ways STANDARDS say things should be done.

    * { display: relative; } shows such things.

  2. IE6 supports the use of ‘margin: 0 auto’. I’m using it on this site, for example.

  3. I agree 100%… if you know the most common bugs and their workarounds a lot is possible. It’s annoying that advanced selectors are missing but those can often times be worked around by using special class names.

    Also, if you keep your layouts fixed getting IE(6) to behave is a lot easier. But I must say, point 4 is the most useful but also the hardest one.

  4. I don’t know why Microsoft released IE7, it’s 100% frustration for webmasters. We have to change our html every time and it looks different in every browser. Shame shame Microsoft!

  5. Peter,

    Agreed, a little info on all of IE’s quirks will get you most of the way there, but the sheer number of bugs at all levels (HTML, CSS, DOM, JS) is just astounding sometimes, and I doubt that anyone has a complete list of all the bugs/issues with IE.

    I’ve started my own collection of the most frustrating here (for all browsers), but alas 90% of them are for IE.

    Example query:

  6. Too me using conditionals for IE6 or let alone 7 is a HACK!!

    We have finally decided to use a template/themeing strategy that already exists with our site and created a theme specifically for IE6. This allows us to change the DOM and CSS as we see fit for that evil browser instead of tying up resources trying to write utopia code for all. This has actually become more maintenance friendly for us instead of testing troublesome cascading conditionals and star hacks. Since in reality your already keeping track of two front ends anyway. (we are utilizing smarty .tpls for this)