broken-ie6On August 1st, 2001, Microsoft revealed their newest browser, IE6, which replaced IE5.5.  IE6 came bundled with Windows XP, and as such became the most used browser of its time.  In fact, when Internet Explorer 7 was release in October 2006, IE6 continued to hold a greater market share than its successor for almost a year.  Eventually users began to move onto IE7, and many even shifted to Mozilla Firefox, the open source browser.  At the time of writing, IE6 still holds an impressive ~17% of the market, which I put down to one factor: Windows XP.

Since IE6 comes bundled with Windows XP, which currently holds a 62% market share, it’s no surprise that IE6 is so widely used despite its age.  Although it is very simple for users to upgrade to Internet Explorer 7, many choose not to simply because they prefer to use what they know, or because IE6 works just fine for them.  And in fairness, many users wouldn’t notice a difference in how websites look between one browser and the next.

But that’s because we web developers have to spend sometimes hours at a time testing and tweaking websites until they work flawlessly in a browser that was replaced over two years ago.  I don’t blame Microsoft, since Internet Explorer 7 was a huge leap forward in terms of W3C compliance.  And Internet Explorer 8, which replaced its predecessor in March this year, is even better still.  I don’t even blame the people using Internet Explorer 6, as a lot of them probably don’t even realise there is a problem.  I blame the web developers who continue to support it.  Now I know a lot of you will tell me it’s not financially viable to drop support for such a widely used browser, but I’m not talking about abandoning it altogether.  I just mean if you have to choose between supporting IE6 and using more modern techniques, then you should opt for the latter.

It starts to get a bit technical from here on in…

A simple example is this: Internet Explorer 6 can’t recognise the “:hover” meta class on any element except for a hyperlink.  It can’t recognise “:first-child” or something as simple as “ul > li” (denoting a direct descendant).  If you need to simulate these styles for the sake of functionality, then it is acceptable to use javascript.  But if you need to simlate a style for a purely visual reason, then forget it.  Here’s an example:

<ul class="horizontalList">
    <li>Test list item 1</li>
    <li>Test list item 2</li>
    <li>Test list item 3</li>
    <li>Test list item 4</li>
</ul>

Now let’s imagine we need the first item in this list to have no border, but for all other items to have a 1px solid border on the left.  Our stylesheet would contain something like this:

ul.horizontalList li {
    display:inline;
    padding:0 4px;
    border-left:1px solid #000;
}
ul.horizontalList li:first-child {
    border-left:0;
}

Relatively simple, but in IE6 the second rule is ignored due to its lack of support for :first-child.  The common way to fix this is to add “class=’first’” to the first list item and then change the selector to:

ul.horizontalList li.first

This effectively makes the first-child pseudo class useless, as there is no point in applying the style to both.  And you may think “well sure, why not? It only takes a second to add.”  But all of these add up.  Let’s look at another example:

<div class="border highlight">
    <p>This is a test paragraph</p>
</div>

<style type="text/css">
    div.border { border:1px solid #000; color:#000; }
    div.highlight { background:#F00; }
    div.border.highlight { color:#FFF; font-weight:bold; }
</style>

According to this, any div with class=”highlight” should have a red background and any div with class=”border” should have black text and a black border.  But if a div has both classes, the text should instead be white and bold.  Simple, yes?  Well IE6 ignores the last line, which can be a real pain in some cases.  Often it forces you to create a new class such as class=”borderHighlight” to encapsulate both styles, or to have parent elements with a different class to modify the appearance of their children.

My point is this: if you have to rewrite some of your CSS or markup to accomodate this kind of behaviour, don’t.  It’s simple – if I buy a computer game and it has a bug, the first thing I’m asked to do when I contact tech support is upgrade to the latest version.  Why?  Because the problem has already been addressed.  This should be your approach to web development – make the client aware that they have an out of date browser by displaying a message to only users or IE6 or below.  Recommend that they upgrade to the latest version of Internet Explorer and warn them that the site may display incorrectly if they do not.

Be flexible

This isn’t a hard and fast rule.  If a client is paying you to support IE6 then spend the extra time doing so.  And sometimes an extra line of css can make all the difference.  Don’t drop support for IE6 just to spite its users – use the fixes you can quickly apply but don’t let it impact on the markup and styles you use for other browsers.  Ultimately you have to decide whether the time you spend is worth the result.