Customizing CSS Rules for IE

From Zanecorpwiki

There is a proprietary extension in Microsoft browsers that allows that allows designers to embed elements that all other browsers ignore (because they're embedded in comments).

Great overview of all the different problems with IE with links to more detailed discussion of particular topics. If taken down, Zane has copy in personal archive under ~/technology/dealing_with_ie.html

Good reference on menu. Maybe after someone reads, we can provide a good summary/recasting.

Best trick I've found for dealing with IE. Summary: put a div element around the HTML that only IE sees, then write roots that key off that element:

div.foo { border-color: red; }
#ie div.foo { border-color: blue; }

To do this, in the HTML, do:

<!--[if IE]>
<div id="ie">
<![endif]-->
...
<!--[if IE]>
</div>
<![endif]-->

The above must be copied/reproduced exactly. Adding a space, for instance, between before or after the '--' and brackets breaks it. To target specific versions, use:

<!--[if IE]>
<div id="ie">
<![endif]-->
<!--[if gte IE 8]>
<div id="ie8">
<![endif]-->
<!--[if gte IE 7]>
<div id="ie7">
<![endif]-->
<!--[if IE 6]>
<div id="ie6">
<![endif]-->
<!--[if IE 5.5000]>
<div id="ie5_5">
<![endif]-->
<!--[if lt IE 5.5000]>
<div id="ie5">
<![endif]-->

and at the bottom:

<!--[if IE]>
</div>
<![endif]-->
<!--[if gte IE 8]>
</div>
<![endif]-->
<!--[if gte IE 7]>
</div>
<![endif]-->
<!--[if IE 6]>
</div>
<![endif]-->
<!--[if IE 5.5000]>
</div>
<![endif]-->
<!--[if lt IE 5.5000]>
</div>
<![endif]-->

IE4 did not support these kinds of conditionals, so cannot be fixed using this technique.

When targeting specific versions, it may be somewhat useful to use a catch-all as well as some rules will apply across the board. In our experience, IE7 can drop a many of the special rules, but when they do apply, they're different in many cases. IE 5.5 needs some special treatment, but is close to 6, and 5 is generally hopeless for complex layouts.