Working on a recent layout, I was finally confronted with the need to have an IE CSS hack. I hate hacks, because they often break with browser updates and aren’t easily remembered. So I avoid them as much as possible. However, I finally succumbed to having to use a hack… except the method I use is not a hack so much as relying on IE functionality. My designs typically can be made to work in Opera, Mozilla/Firefox and Safari browsers very easily, and then occasionally take some head pounding to get to work for IE (first windows then mac). While some might suggest designing for IE first, that is not desirable as I use a mac to develop on, although I do use a PC at work. Also, when resolving a design for IE first, it is tempting to not check the others, as IE is still the browser of the masses. Working with Safari, Mozilla first gets the less numerous browsers out of the way. The additional nightmare of IE is that you have to deal with the subversions, 5.0 does not work the same as 5.5, which is not the same as 6.x (don’t mention 4.x browsers).

To get around this, there is much discussion available about the various CSS bugs that can be exploited to make a layout behave. There is a nice resource on the various box model hacks at htmlfixit.com. They all leave something to be desired as there is always some problem or issue that gets in the way. Also, recently I have encountered differences between Safari and Mozilla, which really sucks, as it was hard enough dealing with IE box problems. So now I am getting immersed in the icky world of CSS hacks. One that I thought was going to work, but I don’t really think of as a hack… more of an unhack, is the IE conditional statement. Which I did used in one design, but doesn’t seem to always work.

Below is an example of the IE conditional statement comment tag. basically you can do checking of the browser & version and IE will interpret that code. It looks something like this;

<!--[if gte IE 5]>
...css code...
<![endif]-->

The stuff in between will be followed by an IE version that is greater than or equal to version 5. I liked it as it is not a hack that relies on faulty CSS interpretation. It is proprietary to IE and so isn’t going to help me with the Mozilla/Safari problems. However, I tried it someplace else and it did not seem to help… as sometimes you can create proper XHTML that still creates problems for CSS to manage. Guess I’ll have to finally break down and get with the “bona fide” hacks.