Fix for crashing min-width CSS emulation in IE

A quick post from the road, because I’m sure this is valuable to folks out there. There is a min-width emulation for IE floating around that involves the use of an expression() call that only IE supports. I am using min-width in the next version of an application to ensure the data doesn’t get too squished.

Upon trying to use the emulation however, I ran into instant crashes with IE from some kind of infinite loop. This was mentioned by a few people on the list but not really explored. Furthermore the test cases work but they were only in quirks mode whereas I was experiencing problems in Standards mode. After finding a standards-mode example that did work, I did a little exploring and found the problem to be padding and margin in the dimension you are trying to constrain. This code causes the crash (adapted to my problem from here:

<title> IE "min-width" </title> <style type="text/css"> #content { padding: 5px; min-width:700px; width:expression(this.parentNode.offsetWidth< =700? 700:'auto'); } </style> </style>

But removing the padding will instantly stop the crashing. Furthermore, you can also eliminate the padding (or margin) in just the horizontal direction (since this example is for min-width):

#content { padding: 5px 0 5px 0; min-width:700px; width:expression(this.parentNode.offsetWidth< =700? 700:'auto'); } Using the expression() solution isn’t ideal since it is not standards-compliant CSS but it works. I need to do further testing with older versions of IE and Mac IE (which doesn’t support min-width).