How to make it work in Internet Explorer 6/7

One of the worst jobs for web developers is probably to make sites and apps work in Internet Explorer. Most people use Firefox for development, the Firebug plugin is simply priceless. And the Gecko engine is fairly standards-compliant. Personally I prefer to use Safari 4 as the main browser, since WebKit is more standards-compliant and Safari 4 (even on Windows) is just incredibly fast. Also I’ve had it a few times that code worked in Firefox but not in WebKit – on the other hand if it works in Safari 4 it usually works in Firefox too, so Safari seems to be a bit more strict especially with Javascript.

Optimising for IE however can be difficult. IE8 shouldn’t cause too much trouble, but IE7 has its quirks and IE6 is well known to be the developers nightmare. While many companies like YouTube have started to phase out support for IE6 – it’s 8 year old technology after all – a lot of web developers are still forced to optimise for IE6 if many of their clients’ website visitors use it.

Surveys have shown that many people who still use IE6 are not able to upgrade due to technical problems or access-restrictions. Also sometimes you might get projects where your web audience is rather old and many use IE6 because they don’t know enough about computers to see the need to upgrade. Simply excluding them from accessing the site is not always an option. However definitely an option is, to ask clients upfront if they need support for IE6, and if yes, simply have them pay more.

While it can be very frustrating sometimes to make code work in IE6/7, a lot of trouble can be avoided in the first place by working more careful and professional when building the frontend. Here are a few tips that make IE debugging a lot easier.

Use valid markup and CSS

It’s still amazing to see how many web developers don’t care for valid markup. It has nothing to do with being picky or nerdy by validating code, it is simply a fact that a lot of browser problems are caused by wrong markup or not standard-compliant CSS rules. Some browsers may have a high fault-tolerance and will display it anyway, but then others with strict rendering engines will display it wrong for no apparent reason and then you wonder why. Therefore the most essential tools for web developers should be the W3C validators for markup and CSS. Both can give useful hints for debugging. I have seen it far too often that a website looked right in Mozilla but wrong in Internet Explorer, and after fixing all markup errors it suddenly looked good.

For best results optimise it for XHTML Strict, it’s not difficult. And of course, always use a doctype. Without a doctype you can end up with a lot of strange errors.

Use reset CSS

The problem with CSS is that browsers often have different default values for padding, margin, indentation or other properties. The best way to avoid differences in browsers is to start your CSS with a reset stylesheet that resets properties for all HTML tags to 0 or other useful values. Then all browsers will have the same base values and you don’t need to rely on default browser settings.

The following code can be used as a start, it works well for me (originally taken from WordPress):

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	width: auto;
	height: auto;
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	background: transparent;
}

Use frameworks

Today’s website development is all about frameworks. With tools like Rails, CakePHP or Django the borders between server- and clientside development are vanishing, markup and scripts are often generated automatically without the need to code HTML by hand. The advantage is that these tools usually make sure that the code they are generating is compatible and working.

And even if you’re developing your own Javascript, use a framework like MooTools or jQuery whenever possible, as their functions are tested to work in all major browsers. Getting Javascript to work properly is actually one of the main problems in IE, since it often doesn’t give very useful error messages. A tiny comma in the wrong place can break everything.

Often these days it is simply not necessary to re-invent the wheel from scratch, instead it can be easier to search for a ready plugin or script that has been tested and does almost what you want, and then customise it if the license allows it.

Keep it simple

Try to keep markup and CSS to the necessary minimum, remove containers and properties that are not really needed, don’t over-complicate. Make sure your box model has correct float settings, margins, dimensions and correct position types.

Don’t use CSS hacks like the Star Hack or Holly Hack. You never know how other (future) browsers interprete the rules. Instead simply use conditional comments to target specific versions of IE.

Use developer tools

Make sure you use tools like the IE Developer Toolbar, a free Firebug-like extension from Microsoft for IE6 and 7. It’s fairly crappy but better than nothing. IE8 comes with built-in developer tools and and can emulate IE7, but apparently it doesn’t work perfect. Better use a real IE7 to test your work.

An alternative debug toolbar can be found here.

Use Javascript to work around bugs

If there is no other solution you can use third party Javascript libraries to fix common bugs in Internet Explorer. One that I used quite a few times so far is ie7-js. It makes transparent PNG graphics work in IE6 and provides fixes for many bugs, including support for advanced CSS selectors.

Do research

There are several websites that describe the bugs and quirks in Internet Explorer 6+ including workarounds and solutions. It is a good idea to make yourself familiar with the common bugs you will find constantly, for instance the double-margin bug. By now your chances for discovering a new bug are pretty low, so most likely your bug is already described on one of the following sites:

Useful links

Run all major browsers in a sandbox without installing them (looks like it only works on Windows). Very good if you only have IE8 and don’t want to install IE6+7 permanently.
Download Safari. Do yourself a favour and give it a try, it’s an amazingly fast and sleek browser.