How do I do IE conditionals in CSS?

Question

If I want to add padding based on the browser the user is viewing the page in, is there a way in CSS that I can do something like:

if IE do padding:5px; else if not IE do padding 10px;

Answer 1

Here is a great reference: Quirksmode.org Conditional Comments.

Although the control structure is in the markup and not the CSS, it accomplishes your goal and is usually considered the best practice when serving browser-specific stylesheets.

Answer 2

The best-practice way is to have a single stylesheet for IE-only fixes, like so:

<link rel="stylesheet" href="styles.css" media="screen" type="text/css" />
<!--[if IE]>
<link rel="stylesheet" href="ie-styles.css" media="screen" type="text/css" />
<![endif]-->

Then just override specific problem-causing styles in the ie-styles.css file.

Answer 3

If you don't mind ugliness in your code, you can use something like the Holly hack:

div { padding:5px; }
* html div { padding:10px; }

There's a neat CSS Zen Garden example that does this to present two distinct designs, but I don't recall its name.