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:


In Print

CSS Mastery CSS Mastery: Advanced Web Standard Solutions A solid round-up of indispensable CSS design techniques by Andy Budd, Simon Collison, and Cameron Moll.

Mobile Web Design Mobile Web Design A guide to publishing web content beyond the desktop. Tips, methodology, and resources. Now available.


Recommended

Letterpress Posters Letterpress Posters The unassuming beauty of a freshly letterpressed print.

Wicked Worn That Wicked Worn Look. Techniques for that worn, aged, distressed look.

Mister Retro Mister Retro Machine Wash Filters Turn the dial to “Instaworn” with these filters.

Blinksale Blinksale Dive in and enjoy shamelessly easy invoicing from Firewheel Design.

Basecamp Basecamp My preferred web app for internal and client project collaboration.


Speaking

HOW Conference HOW Conference Austin, June 24–27. Pentagram, Adobe, P&G, et al.

Web Design World Web Design World Seattle, July 20–22. Practical sessions on web design.

An Event Apart Stimulate Salt Lake City, September 2009. Entrepreneurship and design conference.


Feed Me
Articles: RSS
Linkage: RSS

Follow me: Twitter