IE8 non-compatibility mode, image with max-width and height:auto

Question

I have an image with this markup

<img src="wedding_00.jpg" width="900" height="600" />

And I am using CSS to downsize it to 600px width, like so:

img {
    max-width:600px;
    height:auto;
}

Can anyone explain why this method works in Compatibility mode, but not in standard mode? Is there a way I can modify my CSS so that it will work in standard mode?

I realize that if I strip out the

width="900" height="600"

that it solves the problem, but that is not an option I have.

Test page to try it out:

http://netrivetsandbox.com/ie8/ie8.html

Answer 1

I'm not sure of the root cause but if you add

width: auto;

then it works.

Answer 2

great fix... I've been searching for this all over. why oh why is IE so difficult!

Answer 3

Thanks for that solution - saved me some time!

Answer 4

my solution was :

a.link img{ max-height:500px ; width:auto !important; max-width:400px; height:auto !important; width:1px; }

Answer 5

I had the same problem - fortunately i did'n actually need the "max" - so i just replaced "max-width" with "width" but I am getting really annoyed with IE - every thing I do is valid HTML, but there always are some problems in IE that needs to be fixed. But what really needs fixing is Internet Explorer!