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.

• In short, Internet Explorer 6 is an out of date browser that doesn’t recognise many modern techniques for building websites.  As a result, web developers tend to support IE6 at the expense of using techniques that could save them time and effort whilst allowing more creative design.
• IE6 is also less secure than it’s successors.  Although it is still patched with Windows XP Service packs, the latest of which was released in April 2008, support will not continue forever.  Internet Explorer 8 was released in March 2009, meaning that IE6, first released in 2001, is now 2 generations old.  Microsoft have enough to worry about without supporting an obsolete browser as well.
• IE6 has less features than its successors – most notably it lacks tabbed browsing, meaning you need a new window for every site you want to visit at the same time.  In IE7+ you can have multiple sites open in the same window.
• Less web developers are supporting IE6 all the time.  Sticking with this browser means you will notice more and more sites that look broken.
• It costs nothing to upgrade.  You can upgrade to a newer version of Internet Explorer, or try one of the other browsers on offer: Mozilla Firefox, Safari, Opera and Google Chrome are just a few.

If you want a more in depth explination, read on…

HTML 101

For the uninitiated, let me first explain what html is.  Hyper Text Markup Language, to give it its full name, is the language in which websites are written.  It is how we developers create a website.  A web browser, such as Internet Explorer or Firefox, is the program responsible for reading HTML and displaying it as a website.  With me so far?  Good…

The World Wide Web Consortium

Once upon a time, the World Wide Web Consortium, or W3C to those of us in a hurry, decided it would be swell if we had a set of standards which would define how browsers should render HTML.  The idea was that any browser on any machine could take a website and produce the same result, thus making the website accessible to the widest possible audience.

Unfortunately, this is much easier said than done.  Few browsers can boast 100% compliance to the W3C standards without some small bugs or quirks, but usually these are fairly minor issues that are easily solved.  Unfortunately, this isn’t the case with all browsers.  IE6 and its predeccesors are particular headaches for web developers, as they do not support newer techniques for styling content.  And while many point the finger squarely at Microsoft for this, the problem lies with the users who continue to create a need to support IE6.  Microsoft themselves have long since moved on, releasing 2 updated browsers since IE6 was released in 2001.  I’m sure they would appreciate the opportunity to stop supporting IE6 and concentrate on newer projects instead, but while so many people cling to an old browser, this won’t be possible.

A Time For Action

If you can, go and download the latest version of Internet Explorer or one of the other browsers listed above.  If you can’t install the new version yourself (for instance if you’re part of a network at work or school), talk to the system administrator and ask if they can do it.  If you already use Windows XP then upgrading to Internet Explorer 7 or 8 is easy and costs you nothing.  If you use Windows Vista or later then you already have Internet Explorer 7 or later – congratulations, you’re a part of the solution!