Nomad

25 Nov 2011 by Brad

Working with Internet Explorer 6

There is a phrase often uttered by clients. A phrase so nefarious that it makes developers weep, bawl, and ultimately rage.

Oh and it really needs to look the same in IE6. That's ok right?Your client

We've all been there, you've built a gorgeous website, using the latest CSS techniques, it looks perfect in Safari, Chrome, Opera, FireFox and Internet Explorer 9. You're awesome!

Then the client says, "It doesn't work on Sally's computer." You know what that means, you can sense it. You ask what browser Sally is using. IE6 wasn't agreed at the start. "But Sally has to sign it off and it doesn't work". So you fire up IE6, shaking fingers slowly punching in the url. You hit return.

You turn your face to the sky and yell obscenities at whatever deity you do or don't believe in and resign yourself to the headache of figuring out just how IE6 has broken your baby.

How do you avoid this issue? I'm going to give you a comprehensive run down on how to build in such a way that IE6 issues should be minimal.

Is IE6 really a requirement?

As a technical company, the sites we usually build come to us with a design completed and a brief written. While this makes processes easier for us, we prefer being involved in the planning of work. As a designer / developer who is involved at the start you can more easily manage client expectation and judge client needs.

You can take the approach of Andy Clarke. His universal stylesheet for IE6 is a great idea, if your client is happy with that. So far we haven't found a client who is.

The reality is, the only people really still using IE6 are corporations who had in-house apps built ten years ago. It would cost these companies lots and lots to get everything updated in terms of hardware updates, software licenses and man hours. It's a tough cost for them to justify when the system still works.

If your client has their own clients and they are of this corporate ilk, then it's probably best for your client that you do support IE6, on the other hand, if they run a blog about Guinea Pigs then chances are they don't need IE6.

As for us.

We put our browser support restrictions in our contract, it states that we will build for the latest generation of browsers and that that is all that is included in the quotation. If they want IE6 support it will be extra. Nine times out of ten, they do not ask for IE6 support.

Testing in IE6.

So how do you get your hands on IE6 to test? Chances are if your computer (or OS) is less than 5 years old it will not have shipped with IE6 on it (IE7 shipped in 2006). Well you could uninstall your current version of IE and install IE6 if you are on windows XP. But if that sounds like a good idea, you are probably ready to be carted off by those men in white coats.

You could test using a browser site such as the ones found in this search, however in my experience these are really slow and your site needs to be visible to them. If you are building on a local setup, you'll have to upload somewhere in order to see the results.

You could get one of the programs that are out there such as IETester. In my experience these programs are buggy, and inconsistant with what they display. I don't trust them to give accurate results, if you do, they are a good way to test all the versions of IE easily.

The way I test is to use a Virtual Machine (VM).

For those that don't know VM software allows you to run another operating system inside of your own. So I can run Windows XP in a window on my Windows 7 system.

These are available for all operating systems. At Nomad we have the following preferences.

• Windows : Microsoft Virtual PC
• Mac : Vmware Fusion
• Linux : Virtual box

Then you need a virtual hard drive to load into the virtual machine, luckily Microsoft provide this for us. (for windows at least – Google will more than likely provide resources for other OS's)

http://www.microsoft.com/download/en/details.aspx?id=11575

Now you can load your virtual HD into the VM software and test with IE6 to your heart's content.

Building for an easier IE6 experience.

There are plenty of ways to make the IE6 experience easier. I don't really like to use hacks in our CSS. Also we like to keep HTTP requests to a minimum where we can.

To this end I use this technique from Paul Irish to add a class to the HTML tag if the browser is an older version of IE than IE7.

<!--[if lt IE 7]> <html class="ie6" lang="en"> <![endif]-->

Then I prefix any styles that I need to overwrite at the bottom of my main stylesheet.

For example.

body p {
   color:#333;
   font-size:100%;
}

//All my other styles

.ie6 body p {
   color:red;
}

Embracing HTML5 is great and there are a couple of scripts / shivs out there that will make the experience almost the same in IE6.

The ones I include off the bat in every build are.

Remy Sharp's "shim" that makes IE6 recognise the new elements in HTML5. You could do this yourself by creating the elements in the DOM, but since Mr Sharp was kind enough to go to the trouble for us, why repeat his effort? (Thank you Remy!).

Then I like to add selectivizr. This allows you to use advanced CSS selectors such as :nth-of-type in the older wonkier versions of IE. It can be used with various libraries including jQuery, but the one that provides the most selector support is DOMAssistant. I don't mind including that for IE6 given the benefit of the wider array of available selectors and the cleanliness of the HTML it leads to. Plus we just saved an HTTP request with our css.

Here is the code snippet that I use to include all of this.

<!--[if lt IE 9]>
<script type="text/javascript" src="http://html5shim.googlecode.com/svn/trunk/html5.js""></script
><![endif]-->

<!--[if lte IE 8]>
<script type="text/javascript" src="/assets/js/DOMAssistantCompressed-2.8.js"></script>
<script type="text/javascript" src="/assets/js/selectivizr.min.js"></script>
<![endif]--> 

Additionally I usually use a reset stylesheet, or a normalise stylesheet and CSS PIE which lets IE6 handle some of the shiny css3 that we love.

Debugging.

So hopefully now you can build and test in IE6, what happens when you open it and something is still broken?

I would always recommend having IE6 open as you build and every now and then check it. At least check it once you have your structures built, it's usually here that I find IE falls down, on layout, not on actual styling.

Your first stop should be your HTML, IE6 does not handle a missed closing tag anywhere near as gracefully as modern browsers do. If your layout explodes and you have used the scripts above, I would almost guarantee that a missed closing tag is the cause.

Beyond that my testing process usually goes as follows if it's a layout issue.

• Note the styles that are applied to the element.
• Remove the Margin and Padding – Did this fix the break? If it did then add them back in and tweak the values and width to get the result you need.
• If it didn't, add different horrific background colours (MAGENTA!) to the container and any children to better see where the elements lie. Some people use borders, however if you are on a tight space build, the 2px of width added by the border can hide that a problem is fixed.
• Tweak layout and width of elements until fixed.

Building in IE6 doesn't have to be a huge pain anymore, while I don't believe we should be shouting about how easy IE6 is to support (because it isn't) I believe that if the client needs IE6 to be supported, then that's part of our job as professionals to do that. You can manage expectations by telling them it's a 10 year old browser that was never built to handle modern coding and charge extra for the additional effort.

Hopefully this post will be useful to you, if you have any stories of IE6 being a pain, or if you use any techniques to make developing in IE6 eaiser, please share in the comments.