Posted on Monday 18th of December 2006 at 02:37 in Tutorials

IE6 Min/Max-Width hack

This is a nice little "hack" for one of the most annoying oversights in IE6 - minimum/maximum widths.

Say you want to have an image that fills 100% of it's containing area but only up to a maximum of 600px (to stop it from becoming all pixelated and nasty) - typically you would have some CSS looking like:

.scaling-image { width:100%; max-width:600px; }

That would work fine in Firefox/Opera/IE7 but IE6 would just continue scaling the image to 100% of the container forevermore. However, there is a neat little CSS/Javascript trick to emulate this behaviour in IE6.

Using a Javascript expression, you can define a set of implicit sizes for the image based on the width of the browser at that moment in time. See the code below for an example of this application:

.scaling-image { width:100%; max-width:600px; _width: expression(document.body.clientWidth < 742? "300px" : document.body.clientWidth > 1000? "600px" : "auto"); }

The logic for the above code is "if the browser is less than 742 pixels, this value is relevent, if it's more than 1000 pixels, set this value". This means that once the browser is resized above a certain size, the larger value is written in - resulting in a similar effect to the max-width attribute. You could probably put in as many bits of logic as you like into the statement but this is sufficient for those users who wish to have the fudged up browsing experience IE6 gives.

Very useful.

 

Enjoy this article? Why not subscribe to the full RSS feed?