Hannah Scott's Blog: September 2011

Thanks Chris Coyer for this useful list of CSS examples to target different versions of IE referencing Conditional Stylesheets and Hacks:

The Code

This would go in your <head> with all the other regular CSS <link>ed CSS files. The opening and closing tags should be familiar, that's just regular ol' HTML comments. Then between the brackets, "IF" and "IE" should be fairly obvious. The syntax to note is "!" stand for "not", so !IE means "not IE". gt means "greater than", gte means "greater than or equal", lt means "less than", lte means "less than or equal."

Target ALL VERSIONS of IE



Target everything EXCEPT IE


<link rel="stylesheet" type="text/css" href="not-ie.css" />


Target IE 7 ONLY



Target IE 6 ONLY



Target IE 5 ONLY



Target IE 5.5 ONLY



Target IE 6 and LOWER





Target IE 7 and LOWER





Target IE 8 and LOWER





Target IE 6 and HIGHER





Target IE 7 and HIGHER





Target IE 8 and HIGHER





Universal IE 6 CSS

Dealing with IE 6 and below is always an extra-special challenge. These days people are dropping support for it right and left, including major businesses, major web apps, and even governments. There is a better solution than just letting the site go to hell, and that is to server IE 6 and below a special stripped-down stylesheet, and then serve IE 7 and above (and all other browsers) the regular CSS. This is been coined the universal IE 6 CSS.


<link rel="stylesheet" type="text/css" media="screen, projection" href="REGULAR-STYLESHEET.css" />






Hacks

If you must...
IE-6 ONLY

* html #div {
height: 300px;
}

IE-7 ONLY

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

IE-8 ONLY

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

IE-7 & IE-8

#div {
height: 300px\9;
}

NON IE-7 ONLY:

#div {
_height: 300px;
}

Hide from IE 6 and LOWER:

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

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

Hannah Scott's Blog

Wednesday, September 14, 2011

IE Conditional Stylesheets and Hacks

List 'Boxed' Style with One Column Layout

Blog Archive

Blogs