Max Width and Max Height for Images in IE

.mainimage { max-width: 400px; max-height: 400px; }

This works great in Firefox, Safari, Opera, and Chrome. But it doesn't work in Microsoft IE6 or IE7 or IE8

I can't believe Microsoft STILL has not made their browsers standards-compliant for simple things like max-width and max-height.

Solution That Works For All Browsers

It turns out there's a way of doing the equivalent of max-width and max-height for IE browsers. If you use the following style, it will work on all browsers:

.mainimage { max-width: 400px; max-height: 400px; width: expression(this.width > 400 ? "400px" : true); height: expression(this.height > 400 ? "400px" : true); }

Microsoft web browsers understand the Microsoft-only, non-standard "expression" element inside CSS. The part inside parentheses must be a Javascript expression yielding the string that should be used in place of the expression() portion. No other web browsers understand it, which is good for our situation - we can check and set the width and height elements of our image with it, just for Microsoft browsers.