CSS check for Chrome, IE, Firefox

Question

I've noticed a small alignment issue in the three major browsers when rendering my web site. As such how can I perform the following pseudo-code with pure CSS?

if Webkit (Safari/Chrome) {
    #myDIV {margin-top:-3px}
} else if (Firefox) {
    #myDIV {margin-top:0px}
} else { // IE and other browsers
    #myDIV {margin-top:1px}
}

Answer 1

If its only one property, you don't need conditional comments for including other files. But if you want it that way, do it like SLaks already wrote. Another approach is just to add a property at the end of your specific class with a browser specific hack.

.foo {
  margin-top: 5px; // general property
  _margin-top: 2px; //IE 6 and below
}

Or you seperate your classes and add under your general class a browser specific class.

/* general */
foo {
   width : 20em;
}

/* IE 6 */
* html foo {
   width : 27em;
}

/* IE 7 */
* + html foo {
   width : 29em;
}

Answer 2

You can use a CSS Hack. However, I wouldn't recommend it.

For IE, you can include a separate CSS file or <style> tag inside a conditional comment, like this:

<!--[if IE] <tag> <![endif]-->