I've been tagged [This link opens in a new window]

Applying a css style to Internet Explorer 6 only

Due to the amount of bugs that seem to plague Internet Explorer 6, it is very useful to know how to specify a style to IE6 only. Well ironically, due to one of its many bugs, you actually can!

One feature I use this for a lot is to get the min-height: style working in IE6, as IE6 does not know what this style is and will not put a height on the element at all. So to get round this, you apply the min-height: style as always to the element, then simply add a new block with this special IE6 only fix and add a height: to that. For example:

/* All browsers */
#mydiv{ width:100px;
min-height:100px;
float:left
}

/* IE6 only */
/*\*/

* html #mydiv{height:100px}
/**/

The actual fix is the second part, by wrapping the style block with a /*\*/ and a /**/ then prefixing the style class with a * html you are taking advantage of the IE6 bug. All browsers will see this as a comment, and will not look in there, whereas IE6 will not see it as a comment and will apply the style to the page. Simple but very effective!

  • Del.icio.us [This link opens in a new window]
  • Digg [This link opens in a new window]
  • Technorati [This link opens in a new window]
  • Reddit [This link opens in a new window]
  • Stumble Upon [This link opens in a new window]
  • Furl [This link opens in a new window]