Definitive Guide to Taming the IE6 Beast

http://sixrevisions.com/web-development/definitive-guide-to-taming-the-ie6-beast/

by malte • 17 years ago

40 12 17 years ago

sixrevisions.com

mahmud• 17 years ago

Great article for CSS hacking! Bookmarked.

stevejohnson• 17 years ago

This article makes my head hurt.

erlanger2• 17 years ago

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.

This has solved about 90% of the CSS-related cross-browser layout problems I've experienced.

Do not use hacks unless you absolutely must!

You should never need to target a non-Microsoft browser. When you need to target IE,

  * html selector (IE6-inclusive)

and

  html:not([dummy]) selector (IE7-exclusive)

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.

sync• 17 years ago

Yep, I agree. 90% of these hacks really aren't necessary at all. Another thing to consider is that your site doesn't need to look 100% the same across all browsers -- allow room for leeway, and you won't be pulling your hair out nearly as much.

IE6 isn't as bad as y'all make it out to be. Sure, we can't use fancy CSS3 selectors or HTML5, but you can't on IE7 or 8 either...

erlanger2• 17 years ago

I've always promised the designers pixel perfection across browsers, but I agree that for a casual site it's OK to leave some aspects of typography to the browser defaults, and to fudge layouts with uncalculated "em" spacing.

audionerd• 17 years ago

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.

But I prefer to use a different approach: conditional classes on the body tag. For example:

  <!--[if lt IE 7 ]> <body class="ie6"> <![endif]--> 
  <!--[if IE 7 ]>    <body class="ie7"> <![endif]--> 
  <!--[if IE 8 ]>    <body class="ie8"> <![endif]--> 
  <!--[if !IE]><!--> <body> <!--<![endif]-->

Then you can write IE-specific rules without CSS hacks:

  body div#container { background-color: white; }
  body.ie6 div#container { background-color: red; }

And all your related styles can be grouped together in the same file.

via http://paulirish.com/2008/conditional-stylesheets-vs-css-hac... and http://www.paulhammond.org/2008/10/conditional/

run4yourlives• 17 years ago

The beauty of separating the styles into new style sheets is that an non IE user doesn't need to download all that extra IE crap.

It's also much, much easier to maintain and minimizes the code you need to write, allowing for proper style cascades.

joshfinnie• 17 years ago

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

smithjchris• 17 years ago

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

crcoffey• 17 years ago

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.

The casual observer who is still using such a dinosaur is never going to be bothered.

far33d• 17 years ago

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

jasonkester• 17 years ago

I always get a little question mark over my head every time I read something talking about how IE "Broke" the CSS box model.

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.

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.

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.

Definitive Guide to Taming the IE6 Beast

Related Stories