max-width on <img> tag not working in IE8

Question

I have a strange problem. On a site that were currently building we have a gallery function throuh the jQuery plugin, Gallerific. The gallery opens in a modal window. What I need is to set a max width of the images to 765px. There fore I have set the max-width: 765px; in my CSS. I know i't not working in IE6 but I don't care.

The strange thing is that when I use an image of e.g. 1400px wide, IE8 in compatibility view, Firefox, Chrome, Safari and Opera, all scales this image down to 765px in the width - but not IE8! I can't figure out why this isn't working.

Anyone have got a clue on what's going on, or how even better, how to fix it?

Your answers are greatly appreciated - Thanks!

Regards, Kim

Answer 1

IE8 requires that a container be placed around the image, with it's width either set to the max width you are looking for, or to 100% width (seems to work better on absolutely positioned divs). IE8 seems to be happy as long as a width is defined on that container.

For your example you can set the container div to the maximum width you're looking for, while setting the max-width property of all images to 100%:

.container { width: 765px;}
img { max-width: 100%;}

which forces the images to be no more than the width of the container in which they are found.

Make sure you declare an HTML5 doctype; IE doesn't like XHTML doctypes.

Kind regards, Larry

Answer 2

You've run into IE8's "Almost Standards Mode" (which is designed to be broken in the same way as IE7). Adding a meta tag:

<meta http-equiv="X-UA-Compatible" content="IE=8">

or a real HTTP header field with the same values should put you into proper standards mode. Please note that the meta tag must appear before any script or style elements in order to work properly.