Target IE in the CSS code

Question

Hi,

I know how to target IE, but that's only in HTML (which means I need to create another CSS file for IE bugs). Is their anyway, how I can implement the fixes in the same CSS file. This mean I target IE with CSS code?

Answer 1

There is no equivalent to conditional comments/code in CSS. The only thing you could do there are the old CSS hacks -- that people struggled with before conditional comments became known.

You can make CSS hacks work, for a bit, but it's not a smart or robust approach.

Recommended approach:

1. Always start with a CSS reset. Here's a good one: http://meyerweb.com/eric/tools/css/reset/reset.css

2. If at all possible, get your boss or client to realize that IE6 support is not cost-effective.

3. Design HTML and CSS with an eye for IE bugs, as much as possible. EG, float-problems, height and margin problems, etc.

4. For those few things that still need different CSS in IE, putting them in a conditionally-included, separate CSS file really is the simplest, most robust approach. The bonus is it doesn't penalize decent browsers one bit.

Answer 2

In your CSS code, precede your selectors with something that only IE will recognize. Examples of selecting <div> elements in IE6 and IE7:

IE6 only: * html div

IE7 only *:first-child+html div

A comprehensive list can be found here: http://paulirish.com/2009/browser-specific-css-hacks/

Answer 3

You can do with these hacks

For example:

selector {
 color: red; /* all browsers, of course */
 color : green\9; /* IE8 and below */
 *color : yellow; /* IE7 and below */
 _color : orange; /* IE6 */
}