Definitive Guide to Taming the IE6 Beast

The author recommends two ways to target rules at IE: 1) create new stylesheets for each version of IE, or 2) CSS hacks that only IE understand/ignores.<p>But I prefer to use a different approach: conditional classes on the body tag. For example:<p><pre><code> &#60;!--[if lt IE 7 ]&#62; &#60;body class="ie6"&#62; &#60;![endif]--&#62; &#60;!--[if IE 7 ]&#62; &#60;body class="ie7"&#62; &#60;![endif]--&#62; &#60;!--[if IE 8 ]&#62; &#60;body class="ie8"&#62; &#60;![endif]--&#62; &#60;!--[if !IE]&#62;&#60;!--&#62; &#60;body&#62; &#60;!--&#60;![endif]--&#62; </code></pre> Then you can write IE-specific rules without CSS hacks:<p><pre><code> body div#container { background-color: white; } body.ie6 div#container { background-color: red; } </code></pre> And all your related styles can be grouped together in the same file.<p>via <a href="http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/" rel="nofollow">http://paulirish.com/2008/conditional-stylesheets-vs-css-hac...</a> and <a href="http://www.paulhammond.org/2008/10/conditional/" rel="nofollow">http://www.paulhammond.org/2008/10/conditional/</a>

I always get a little question mark over my head every time I read something talking about how IE "Broke" the CSS box model.<p>Those of us who were around back in the day recall both IE4 and NN3 allowing one to specify the Width of an object at 100px, with the refreshing expectation that nomatter what padding or borders you applied to it, the width of the rendered element would be 100px.<p>That was the universal standard at the time that the CSS specifications were written. For reasons nobody can explain, the W3C came out with a box model that broke that convention, and that's the model that NN6 followed.<p>Netscape Navigator 6, you will recall, was incapable of rendering Netscape.com correctly when it was first released. That's because Netscape.com was designed to be viewed by the current state of the art browsers on the market, both of which interpreted the box model the way that Internet Explorer did until recently.

I've always found the best solution is to avoid IE6 hacks altogether, and try to be as concise as possible when writing the CSS file, and give the IE6 a stable feel, and accepting the inherent flaws that make it so difficult to work with.<p>The casual observer who is still using such a dinosaur is never going to be bothered.

far33d's definitive guide to taming the IE6 beast: Don't support IE6.

Great article for CSS hacking! Bookmarked.

You could always use tables for layout... ;-)

After too many years of doing this, this is the best advice I can give: The most common issues are inconsistent spacing between elements. Don't try to understand why this may be, instead, use padding if margin isn't working, vice versa otherwise, and move the layout to another equivalent element (simple wrapper, etc.) if you run into a really sticky problem.<p>This has solved about 90% of the CSS-related cross-browser layout problems I've experienced.<p><i>Do not use hacks unless you absolutely must!</i><p>You should never need to target a non-Microsoft browser. When you need to target IE,<p><pre><code> * html selector (IE6-inclusive) </code></pre> and<p><pre><code> html:not([dummy]) selector (IE7-exclusive) </code></pre> Even though they work, these are for last resorts and should pretty much never be used. Most of the time that I see a cross-browser hack used, it really was due to the author's poor understanding of the CSS issue at hand and would've been corrected with good defensive styling using simple, well-supported styles.

The best thing is to educate your clients and avoid it like the plage. Either that or charge extra to support it.

This article makes my head hurt.