Tackling the IE factor

Written January 26. 2004, at 21:51 GMT.

CSS über-guru Douglas Bowman rants about about "the IE factor" that tends to skew all CSS programming estimates. I feel his pain - every single day at my work. Following is a comment I wrote at his place:

I've compiled a nice set of simple CSS hacks that target different OS/versions of IE:

To target IE5/Mac I make sure some element in the DOM of the page has two or more class names (i.e. the class attribute contains a space). This triggers the horrendous IE/Mac Whitespace Parsing Bug which can be used to your advantage to target IE5/mac specifically. Say we have an element set to class="wrapper foo", then the rule .wrapper-ie5mac { color : red; } will color that element red only in IE5/Mac. (The "-ie5mac" bit is just random crud that I add to the actual class-name).

To target all Windows versions of IE, I use the old "underscore hack". The invalid declaration _height : 1em; will only be applied by IE/Win. This particular declaration happens to solve most - almost all - cases of dissappearing borders and backgrounds in IE. Another common fix seems to be _position : relative;

The third and final trick I use targets only Windows IE versions 5.0 and 5.5. This tricks combines the “underscore hack” and the "/**/ comment hack". The underscore includes only IE/Win and the empty comment before the colon excludes IE6.0, leaving only the 5.x browsers to apply the declaration. Example of use: _width /**/: 200px; which seems to be the smallest/simplest "box-model hack" available.

BTW, I’ve not 100% verified yet that the above hacks don’t have unintended consequenses in some of the older versions of Opera or - say - old versions of OmniWeb, or the 4.x line of IE. Frankly, I don’t really care if they do. Getting the job done on time (factoring in the damned "IE factor") is difficult enough, without taking all the extreme minority browsers into account too. Sure, I’m as anal retentive about cross-browser compliance as the next guy - but only up to a point. Hey, sue me! :-)

A rewrite of an actual example from a recent project of mine:

.menu {
  padding : 10px 5px;
  min-height : 180px;
  _height : 180;
  _height /**/: 200px;
  overflow : auto;
}
.bodywrap-ie5mac .menu { overflow : normal; }

Note: Deciphering the actual result is left as an exercise to the reader. :-) Also note that inside the the <body> element there happens to be a single element <div class="bodywrap xxx"> ...


More like this: English Entries, .


Ţessum svarhala hefur veriđ lokađ. Kćrar ţakkir til ţeirra sem tóku ţátt í umrćđunni.


 

Flakk um vefsvćđiđ



 

Nýleg svör frá lesendum

  • Rich (Req.js - javascript lazy-loading and dependency managment made easy)
  • Rich (Req.js - javascript lazy-loading and dependency managment made easy)
  • Rich (Req.js - javascript lazy-loading and dependency managment made easy)
  • Már (Req.js - javascript lazy-loading and dependency managment made easy)
  • Rich (Req.js - javascript lazy-loading and dependency managment made easy)
  • Már (Req.js - javascript lazy-loading and dependency managment made easy)
  • Dinesh (Req.js - javascript lazy-loading and dependency managment made easy)
  • Már (Taubleyjur í nútímanum - lítill leiđarvísir handa hrćddri ţjóđ)
  • Ada (Taubleyjur í nútímanum - lítill leiđarvísir handa hrćddri ţjóđ)
  • notandi (Taubleyjur í nútímanum - lítill leiđarvísir handa hrćddri ţjóđ)
  • Geir (Lausnin á efnahagsvandanum)
  • Jenný (Lausnin á efnahagsvandanum)
  • Óli Jens (Lausnin á efnahagsvandanum)
  • Már (Lausnin á efnahagsvandanum)
  • Kjartan S (Lausnin á efnahagsvandanum)

 

 

Yfirlit yfir ţetta skjal

(Atriđin í listanum vísa á ákveđna kafla ofar á síđunni.)