Chris Holden .com

Undefined » Articles » CSS Hack for IE7

As you may know, with the new Internet Explorer 7, the old "star html" hack used to provide styles only to IE fails. This is causing many websites hacks to break and look crap in IE7. If you are looking for a CSS hack to single out IE7 then this is a simple solution.

body { background: #fff; }   /* all browsers */
html > body { background: #00f; } /* standards browsers and IE7 */
* html body { background: #0f0; } /* IE6 & IE7 */
* html > body { background: #f00; } /* IE7 */

The way this works is this:

  • The first rule is applied by all browsers, nothing special there
  • The second rule is applied by any browser that understands CSS2 selectors (Firefox, Safari, IE7 etc)
  • The third rule is applied by the IE family, including IE7 (this is the good old "star html" hack)
  • The last rule is the key, this is only applies to IE7 because it is the only browser to understand both "* html" and "html > body" so it applies the whole declaration.

See how simple it is? Combining the "star html" hack and CSS2 selectors makes it possible to single out IE7. Generally you will use this hack after your declarations for other browsers to override any anomalies IE7 happens to exhibit.

I hope this helps some people out there!

posted by Chris
1 November 2006