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.
Authentic Boredom is the platitudinous web home of Cameron Moll, freelance new media designer, author, and speaker. More…
Full-time and freelance job opportunities. Post a job...
A selection of fine reading, available for a limited time only:
- Jobs home page reorg
- Coming soon: Mobile Web Design, the book
- Dyson ad: Text as more than just words
- Setting sail for Europe
- Review: Sumo Omni bean bag chair
- Dashboard widget for Authentic Jobs
- Limited-time offer: $99 listings
- Nine skills that separate good and great designers
- Fire sale
- Introducing AuthenticJobs.com
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 A guide to publishing web content beyond the desktop. Tips, methodology, and resources. Now available.
Letterpress Posters The unassuming beauty of a freshly letterpressed print.
That Wicked Worn Look. Techniques for that worn, aged, distressed look.
Mister Retro Machine Wash Filters Turn the dial to “Instaworn” with these filters.
Blinksale Dive in and enjoy shamelessly easy invoicing from Firewheel Design.
Basecamp My preferred web app for internal and client project collaboration.
HOW Conference Austin, June 24–27. Pentagram, Adobe, P&G, et al.
Web Design World Seattle, July 20–22. Practical sessions on web design.
Stimulate Salt Lake City, September 2009. Entrepreneurship and design conference.
Articles:
Linkage: