Fixed: IE 6 min/max-width hack

~ 17 April 2006 ~

First off, a big thanks to those of you who helped review code to resolve a JavaScript issue with my case study site for CSS Mastery (see “Tuscany errata”).

A temporary but corrected version resides over at cameronmoll.com/projects/book. (I’ll have the book errata updated at cssmastery.com soon.)

Note the JavaScript expression used to emulate min/max-width no longer freezes IE 6. What was the fix, you ask? Matthew Pennell serves it up:

I’ve been able to avoid the IE-freeze issue in the past by NOT specifying identical widths in the expression; so instead of saying “if the width is less than 740px, set it to 740px”, change it to “if the width is less than 745px, set it to 740px”.

In short, specifying the “less than” width to be the same as the hacked min-width caused “a racing condition in IE at the moment when the size of the window hits the target width” (thanks, Dimitri).

Whew, I think that’s the most technical jargon I’ve ever used in one sentence here on this site. Lest I leave you code aficionados unsatiated, let me see if I can elaborate further using code samples.

Here’s the code that currently sits on tuscany.cssmastery.com and is used in the book:

#container, #footer {
	width: expression(document.body.clientWidth < 740? "740px" : document.body.clientWidth > 1200? "1200px" : "auto");
	}

Note the “less/greater than” and “set it to” values as being the same. If you’re using IE 6 and you drag the window pane to resize, it freezes. In contrast, here’s the corrected code posted to cameronmoll.com/projects/book:

#container, #footer {
	width: expression(document.body.clientWidth < 742? "740px" : document.body.clientWidth > 1202? "1200px" : "auto");
	}

Different values. No freezing. Lesson learned: If you plan to use a similar expression for emulating min/max-width in IE (at least until IE 7 is adopted at large), be sure the “less/greater than” values differ from the “set it to” values.

 

Comments are either closed or disabled for this article.



About

Authentic Boredom is the platitudinous web home of Cameron Moll, freelance new media designer, author, and speaker. More…


Jobs
Come in, we're hiring

Full-time and freelance job opportunities. Post a job...

...view all jobs »


Recently

A selection of fine reading, available for a limited time only: