How do you specify a css property to be applied only if the browser is IE in the stylesheet?

Question

I know in order to include a browser specific css file you can do the following

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

But is there a way to do this in the actually stylesheet itself?

EDIT

Thanks for the replies, I am just going to build a new IE specific stylesheet and override what I need there. I think this is prob the best way to do things.

Answer 1

Check this post, scroll down to Hacks:

http://www.dezinerfolio.com/2009/02/20/css-standards-best-practices

Answer 2

Actually, yes there is.

It wont validate, but if you add _ before the property name so div {width: 200px;_width: 100px;} will be 200px wide in non-ie browsers and 100px in IE.

Answer 3

you can also use the !important flag to do this, but that may have unintended side effects.

Click Me I'm !important

Answer 4

These work...

.foo{
  border:1px solid #000;
  *border:3px dotted #00f;/*IE6 & IE7 Only*/
  _border:2px dashed #f00;/*IE6 Only*/
}

Thus the outcome is:

• W3C Browsers (Firefox, Safari, Opera, etc.)
  • 1px solid black border
• IE7
  • 3px dotted blue border
• IE6
  • 2px dashed red border

As a last resort (and not highly recommended) you can use the dynamic properties by using expression() then test for the browser version (if you care)

Answer 5

I have decided that building a separate stylesheet and then using the comment IF statement is the best solution. Keeps the stylesheets clean and it is more obvious to others as to what you are doing (overriding properties due to browser quirks).

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