Max-Width and Faking it for IE

The max-width CSS property is a great property to use when you don't want an element to get larger than a certain size. It does exactly what it says it does. Using it with images can be very handy. Of course it's best to size an image accordingly, sometimes it's good to have a backup for making sure you don't use an image larger than what the space allows for. Note that the max-width property does NOTHING for the file size if used with an image, so it's not a good idea to resize 1024x1000 3mb .jpg's down to a proper display size with max-width as you'll still be eating up bandwidth.

To use max-width the syntax is

selector {max-width:value;}

So for example, for Blogger users if you want to use max-width to keep your posted images in check you could add something like this to the CSS portion of your template

.post-body img {max-width:400px;}

Most Blogger templates have a class defined of 'post-body' for the blog posts (but your mileage may vary, it may be a different class or id that you'll need) and a statment like this will affect all images that are in the class of 'post-body'. Of course you could set the value of max-width to whatever you want. Max-width values can also be in percentages, so for those with fluid designs (that expand or collapse depending on the screen resolution) you could also do

.post-body img {max-width:95%;}

With a setting like that, the images will never exceed 95 percent of the available space (usually best to not go to 100% to leave a little wriggle room for padding and such ).

Of course there's a catch.. Internet Explorer up to version 6 doesn't support the max-width property (we can hope for IE 7), and with it's other problems and market share it's the browser that needs it the most. But there is a workaround.

IE has the ability to perform javascript like (or is it javascript? I dunno) functions on it's CSS so you can fake max-width with it. Here's the syntax.

selector {width: expression(this.width > value ? value: true);}

I'm not gonna pretend I know everything going on there, suffice to say this is how you might use it with the max-width property example we used before.

.post-body img {
  max-width:400px;
  width: expression(this.width > 400 ? 400: true);
}

The two values in the IE statement would be the same value as your max-width statement in pixels. Unfortunately, as far as I've been able to find out you can't use this method with percentages in IE(least I haven't found a way to ). Browsers other than IE will safely ignore the width:expression statement and just implement the max-width.

I probably should mention that max-width isn't just for images, it can be applied to any element that you would apply a width to. I should also note that if you try the IE fake to keep it from enlarging a container, you have to apply it to the problem element, not the container itself. You can apply the IE fake to a container (to keep it from going naturally over a certain width ) BUT if an element inside that container (an image, table, whatever) is larger than that width it will still enlarge it's container in IE. In those cases apply max-width and the fake to the element causing the issue, not the container itself. Did I just confuse the matter?

So for an example, if images in the #sidebar div were causing an issue doing this

#sidebar {width:220px;
  width: expression(this.width > 220 ? 220: true);
}

would NOT HELP IE. Here it's only applied to the containing div#sidebar. The offending images would still enlarge it.

Attack the element directly like

#sidebar img {max-width:200px;
   width: expression(this.width > 200 ? 200: true);
}

A statement like that would keep the images in the #sidebar (if that's the id of your sidebar, it could be different) in check.

Then again you could resize those damn images... ;-)

Tags: CSS || Internet Explorer || Phydeaux3