CSS expression crashes IE6
March 26, 2007
CSS | Javascript | Windows

Since IE 6 does not have a "min-width" ccss attribute, I sometimes emulate it, using CSS expressions. For example:

width:expression(document.body.clientWidth <750? "750px" : "98%");
english translation:
width = (if browser window width is less than 750 pixels, set element width to 750 pixels, else set it to 98%)

This usually works fine, but I had one case where it would load the page fine, then crash if the window were resized.


Ads by Google

Posted by ellen at March 26, 2007 03:26 PM

I found out it was because if IE6 is in standards mode, you have to factor in the total width of your margins, padding, and borders to use an expression that tests for width. Otherwise the expression can enter an infinite loop.

A complete discussion of this issue is here:
Tom-Lee.blogspot.com

In the article a complex and no doubt highly precise answer to the issue is given: a very long javascript expression.

I found though that you can also resolve the issue by simply making the width you are testing for slightly larger than the minimum width you are trying to set:
See Paul Haine's post for more information.

The expression that was crashing was:


width:expression(document.body.clientWidth <750? "750px" : "98%");

And the one that worked was:


width:expression(document.body.clientWidth <755? "750px" : "98%");


Ads by Google

3 Comments

Thanks for this. I just had this exact problem and your tweak to account for margins and padding fixed it. My daily dose of MS frustration fixed!

Perfect! Thanks for this, problem solved.

Great info. IE6 has some crazy bugs :)


Ads by Google

 RSS   |   Contact Me


Ads by Google