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 nee

Answer 1

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 2

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 3

Maybe Gallerific applies a max-width to the fly ? Do you have tried with !important ?

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

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 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.