Stuart Jarvis

I was happily recoding the CSS for the redesign of this site when I ran into some additional problems with Internet Explorer’s buggy CSS support that hadn’t been a problem before. Specifically, my new method for allowing users to differentiate between types of link (internal, external and so on) uses a background image in combination with padding to the right of the link to show a different image for each link type (there are also background position bugs in other browsers). IE screws this up by failing to position the background correctly.

OK, I thought, not a huge problem. I’ll just remove all the background and padding info for IE. Afterall, I had used CSS hacks before to isolate IE, such as the Holly Hack (described in an article on dropdown menus or the child selector hack). But then I gave bit of thought to the upcoming release of IE7 and all the uncertainties that might bring.

The problem with hacks

The current hacks work fine for IE versions 6 and below, but they rely on faults in IE to either make it read CSS it shouldn’t (in the Holly Hack) or ignore CSS it should read (in the child selector hack) so that other CSS bugs can be circumvented. They use one bug to solve another. But what if IE7 fixes the CSS bugs that I’ve coded to avoid? It’s not a disaster, but it means I’m excluding IE7 users from getting everything they can from the improved browser. Alternatively, IE7 might fix all the bugs, in which case things are fine. The third possibility is pretty nasty: what if IE fixes the bugs that the child selector and Holly hacks exploit, but not the original CSS bugs thar made me use the hacks? Hmm, I’d be up the proverbial creek without a rowing implement.

A solution?

Luckily, there is a solution, and it’s actually provided by Microsoft (though I came across it on the Quirksmode site). Internet Explorer (in Windows versions from IE5 onwards) implements a strange system known as conditional comments in which it will not ignore comments written thus:


<!--[if IE]>Internet Explorer will not ignore this text<![endif]-->


You can even select for different versions of Internet Explorer (see the Quirksmode site for details). It seems to me that this is a better way of selecting CSS for IE. I do this by enclosing a reference to an IE specific stylesheet in the header of my document:


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


An alternative, of course, would be to define the styles inline.

So, let’s return to the possible effects of Internet Explorer 7. If Microsoft fix all the CSS bugs that made me reach for the hacks in the first place then I can just modify the above code to select IE<7:


<!--[if lt IE 7]><link rel="stylesheet" media="screen" type="text/css" href="/css/ie.css"/><![endif]-->


If IE 7 still has the bugs then I leave the code alone. This has the advantage of assuming IE7 will retain the relevant CSS bugs until I’ve had a chance to check otherwise, whereas the child selector and Holly hacks might be broken from the moment IE7 is released. If it fixes some of the bugs then I can just modify the IE stylesheet to reflect this. The worst case scenario is that IE7 will drop support for conditional comments and keep the other bugs, though this doesn’t seem so likely, considering conditional comments an IE thing in the first place and don’t do any real harm.