You should rarely use CSS hacks for different browsers, but sometimes you find yourself in the situation where there is no other choice. Over the years I have come across some CSS hacks and filters that can come in handy when building websites.

As web developers we all know about Internet Explorer and how it can be a pain when developing, especially IE6 and below. Here are some of the hacks I use for Internet Explorer.

Conditional Hacks

If you would like to target a specific stylesheet to a certain version of Internet Explorer you wouls use the following:

<!–[if IE 8]>
<link rel=”stylesheet” href=”ie.css” type=”text/css”>
<![endif]–>

This conditional statement will target IE8 only, to use on any other version just replace the “8″ with the version you would like. Say your site needs a stylesheet for All browsers below IE7, so IE6 and below, for this you would use:

<!–[if lt IE 7]>
<link rel=”stylesheet” href=”ie.css” type=”text/css”>
<![endif]–>

The “lt” stands for less than the version specified. You could also use “lte”, this would target the version specified as well as the versions below, so this code would produce the same result as the previous:

<!–[if lte IE 6]>
<link rel=”stylesheet” href=”ie.css” type=”text/css”>
<![endif]–>

Filters

Sometimes you find yourself only needing to change a specific style or two, in these cases you would use the same stylesheet, but add a filter below the line of the original. For instance, say you run into the IE6 double margin bug. When you float and element and give it some margin, IE6 will double this margin in some situations. If you run into this, this is what you can do:

Once you realize that IE6 is adding a 20px margin to the left side, you can add the filter below your original line:

#sidebar
{
float:left;
margin-left: 10px;
}

*html #sidebar
{
margin-left: 5px;
}

So in this case, *html followed by your CSS id or class will be applied to IE6 and below. This is how all the following filters should be implemented:

*html #code { your css here}

Applies to IE 6, 5.5, 5 and 4 for windows. IE5 on mac OS X, IE5 on Macintosh and IE4 on Macintosh.

*+html #code { your css here}

Applies to IE 7 and 5 on Windows.

Now that you have an idea of how this works, you can look up the rest in this chart I found at centricle.com

I want to emphasize that you should never develope using these hacks and filters first, this should be a last resort option. Develop, validate your code and if you find yourself stuck, then use the hacks and filters sparingly.