Using Conditional Comments to Fix IE Bugs

Anyone who has ever developed a website is aware of cross browser inconsistencies. This is especially true for those of you rightfully working to eliminate table based layouts and make the move to an all css layout. Often what works in one browser won’t work in another or more precisely when you follow the standards like you should it often won’t work in Internet Explorer. Fortunately it’s not too hard to workaround the problem. The two methods I use most often are the underscore hack and Conditional Comments.

This post isn’t meant to bash IE. While I am a Firefox user and will continue to be after the release of IE 7, Internet Explorer gets a bad wrap sometimes. The browser works fine for most and mostly just lags in it’s css compliance. Many features like tabbed browsing should be coming with version 7 and while I still won’t be using it as my primary browser it’s not as bad as many people seem to think. Microsoft certainly could and should do a better job of adhering to the standards, but in truth most of the problems web developers have is with their own code and not the browser rendering that code.

It can take some practice to figure out some of the inconsistencies, but with each new one you come to understand it gets a little easier to write cross browser code quickly. My first piece of advice is to develop your sites in a browser that is not Internet Explorer. Choose a more standards compliant browser for development. Again it’s not meant to be a knock on IE, but if you develop with standards first and IE second you’ll find it much easier to get the cross browser thing right.

Of course there are times when you do everything right and Internet Explorer just won’t cooperate. Instead of throwing your laptop through a wall here are a couple of simple things you can do.

The Underscore Hack And Conditional Comments

First check the design and see if it’s really a big deal to have your pages look a little different. Sometimes the difference is a display that’s a few pixels off one way or another. Most of the time the design will look fine either way and it’s only in the comparison where it looks off. You as the developer are looking at your site in several browsers. Visitors to your site aren’t likely to use more than one. Sometimes as much as it pains me I’ll make the page look like I wanted in Internet Explorer and leave it off in my beloved Firefox. Usually though it bothers me no on else ever notices the difference.

The quick a dirty hack I use is to place an underscore in front of one or more css properties. IE will treat the underscore version the same as it will the property without the underscore, while other browsers simply ignore the underscore version. You just need to make sure to place the underscore version second in the css. A typical place you might do this is on the width of an element. IE gets the box model wrong. Different versions of IE get it wrong in different ways, but in general IE considers things like the padding and width of any borders you add as part of the overall width property which it shouldn’t. Ultimately you have IE using a different width for an element than other browsers. To correct things I might do something like:


div#example {
width:200px
_width:180px
}


Most browsers will ignore the second and give the example div a width of 200px. Internet Explorer will consider the width to be 180px. An easy way to serve different widths to browsers and have a page display the same. The major problem at the moment is that the code above won’t validate for css since there is no such property as _width. It’s also not guaranteed to work in future versions of IE. No hack is really guaranteed to work in the future and with IE7 around the corner you may want to opt for another solution. As a quick and dirty hack though the underscore works pretty well.

Another option which isn’t really a hack also works well and isn’t much harder to implement. It also has the benefit that it should work with new versions of IE. This second and better option is the use of Conditional Comments. Conditional Comments are an IE only thing and allow you to easily serve different style sheets to different browsers.


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


You can even supply a version number in the comment in case you need to add something for only one version of Explorer


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


Conditional Comments not only work well, but the code also validates since comments are perfectly fine in any HTML document. Using Conditional Comments you my never really need to use an IE specific hack again. They’re valid and should even work long into the future.

While cross browser issues have and will continue to keep coders awake long into the night there are some rather simple workarounds to make our lives easier. Still before just taking the easy way out with the comments or with the underscore hack try to see if you can’t figure out a way to write better code. These hacks aren’t meant to be used every time you having trouble getting things to work cross browser. They’re for those few times when you really need to use them.

I’ve had my share of late nights trying to get something to work and I do appreciate getting a little more sleep, but some of those late nights helped make me a much better web developer. There’s something to be said for spending a few hours understanding why something won’t work. It helps ensure you get it right the first time in the future and also leads to some insights into better ways to code familiar things. It’s also helped me get to the point where I might only need to use hacks on five or six lines of code.

« Prev PostNext Post »

Download a free sample from my book, Design Fundamentals.