max-width on

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

As explained in other responses, you need to apply a width to a container to solve this issue in IE8. For a Galleriffic specific solution, you can add css similar to this:

a.thumb img 
{
    max-width: 160px; 
}

/* IE 8 specific bug */
a.thumb
{
    width: 160px; 
}

Answer 3

Hey one thing you might want to try (which had me banging my head against a wall), so making sure your doctype is set-up correctly.

IE8 works wiht the HTML5 version, but if it's lower case it doesn't.

http://www.kintek.com.au/blog/ie8-max-width-max-height-and-inline-ie8-css-hacks/

There's also cool CSS inline hacks you can do which will target specific platforms:

width:200px\9; /* ie8 and earlier / height:200px\9; / ie8 and earlier */

Answer 4

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.

Answer 5

I ran into a similar issue, the container solution does not work when you have images of different sizes, if the image is small it would leave a lot of space on the side of the image. Apparently max-height works just fine in IE8 i would recommend using that if you can.

Answer 6

I ran into something similar with IE 8 and 9 and found I had a different problem in my code that's worth mentioning.

I had a div with width 100%, then a div that had max width of 980px.

For some reason the max width wasn't being seen, and an element inside that 980 div which was supposed to float right was not.

I ran the page through w3 code validater and it caught a comment that was before the doctype declaration and said that IE would be in "quirks" mode.

As soon as I moved that commend below the doctype declaration the validater's 'quirks' mode warning went away and everything worked fine in IE 8 and 9.