max-widgth and max-height solution in Internet Explorer

Question

In this page:

http://tinyurl.com/widthheight

I am usign max-width and max-height.

Work fine for Firefox, Chrome, Opera, Epiphany, ecc but NOT Internet Explorer.

.

What solution do you recommend in this case ?

I have to limit max-width of 180px and max-height of 180px.

Answer 1

have a look at this hack - I dont think IE supports max-width properly

http://www.svendtofte.com/code/max_width_in_ie/

Answer 2

Check out this resource: Max width workaround for IE 6+. Note that it won't work for users with Javascript disabled.

Answer 3

Try to add this for IE max-width:

.maxwidth {
    zoom:1;
    maxwidth:expression(
        function(t){
            var w = t.parentNode.scrollWidth;
            if (w != t.w) {
                t.w = w;
                var max = parseInt(t.currentStyle['max-width'], 10);
                t.style.width = 'auto';
                if (t.scrollWidth > max) {
                    t.style.width = max;
                }
            }
        }(this)
    );
}

Answer 4

The aforementioned solutions will work to implement max-width/height in IE, but just wanted to mention that if performance is an issue, you might want to look into generating actual thumbnail images instead of relying on HTML/CSS sizing.

Thumbnails would result in a smaller filesize, and you could potentially crop them to improve your visual direction. It would also get around the need for JavaScript and/or the negative performance implications of CSS Expressions.

Might not be feasible from a maintenance standpoint, but I figured I would mention it...