Looking good in every browser

Okay, “every” is overstating it. The site has always looked how it should in Firefox (and Mozilla variants) and Opera as well as almost right in Internet Explorer. And although I didn’t look in depth it seemed fine on Safari when I used a friend’s Mac.

Well now it looks how it should in IE too. Although I did have to do a pretty nasty hack of sorts (but I remain XHTML compliant).

IE supports “conditional comments”. They’re HTML comments in a specific format which IE interprets as special. Overall this is quite a clever idea since the other browsers see them as normal tags and technically my site isn’t using any no standard markup.

The dodginess in IE (if you hadn’t noticed or don’t use IE) is that the graphic behind the Google links bar was 1px to the left. So all I did was put a style definition inside an IE conditional comment to nudge it to the right: <!--[if IE]><style> #linksbar { background-position: 1px 0 } </style><![endif]-->

Apparently you can do cleverer things with the comments like so conditionals on specific version of IE but that’s getting a little silly and if you want that much control it’s probably better to do it on the server so you don’t send every version of a page to every browser…

For more information, check out conditional comments on Quirks Mode.