CSS Programming and IE6, Part 1: Checking Compatibility

Like nearly all web designers, I detest making sites work in IE6. The browser is ancient; it released in 2001! There is absolutely no reason for anybody to still be using it.

Unfortunately, for some reason, people still do. This means we have to make our websites accessible to IE6 or lose a  fairly sizable minority of our users. With plain HTML, this generally isn’t a big issue, but IE6 understandably has somewhat limited CSS support (it is, after all, over nine years old!) This naturally leads to websites that are essentially unreadable to users who’ve never upgraded. In the near future, as computers running Windows XP (which shipped with IE6) reach the end of their lives, it should become irrelevant, but for now there are a few things you can watch for to keep your sites accessible.

First off, of course, is to check how the site currently looks. Chances are, you don’t have IE6 installed on your computer, but there are sites that will show you how it looks; I use netrenderer. It won’t look the same as it does in other browsers, but if it reads reasonably well, you probably want to just call it good.

But suppose it’s totally screwed up. In that case, you probably want to import an IE6-specific stylesheet that fixes the major issues; you can do so using the following code. (Remember to put this after your other style sheets are imported so that it overrides them).

<!--[if IE 6]>
	<link rel="stylesheet" type="text/css" href="ie6.css" />
<![endif]-->

If you want to target every version of IE from six on down, you can instead use [if lte IE 6]. Throwing in an if statement like this allows you to serve up a simple stripped-down stylesheet that early browsers can understand, while keeping the extra code out of the main style sheet that everyone else will download.