Question

I was just wondering about CSS for IE. Typically we have a separate style sheet and but I wondered if there was any way of incorporating different options in the same sheet, e.g.:

h1 {
    /* font size for Firefox to be 22px */
    font-size: 22px;
    /* font size for Internet Explorer to be 20px */
    font-size: 20px;
}

I.e. my question is it it possible to have all the options in one CSS sheet with conditions.

Answer 1

Just so it’s posted as an answer (wasn’t 100% sure it’s what you wanted)…

Check out http://css-tricks.com/132-how-to-create-an-ie-only-stylesheet/ and look beneith the Hacks heading for in-line styles that are applicable only to specific IE versions. e.g.

IE 6 only

* html #div {
    height: 300px;
}

IE 7 only

*+html #div {
    height: 300px;
}

IE 8 only

#div {
  height: 300px\0/;
}

IE 7 & 8 Only

#div {
  height: 300px\9;
}

Non-IE 7 Only

#div {
   _height: 300px;
}

Hide from IE6 & Lower

#div {
   height/**/: 300px;
}

html > body #div {
      height: 300px;
}

Quoted for reference and redundancy (in case the link breaks in the future).