CODEWITHSUNDEEP
javascripthtmlcssinternet-explorer
IAmYourFaja
IAmYourFaja

Reputation: 56912

Internet Explorer not honoring max-width or max-height

I am trying to use CSS to scale my images to precise values:

HTML:

<div id="thumbnail-container">
    <img src="sample-pic.jpg"/>
</div>

CSS:

#thumbnail-container img {
    max-height: 230px;
    max-width: 200px;
}

In this example, sample-pic.jpg is actually 320x211.

In Firefox 11.0, this code works perfectly fine, and FF resizes sample-pic.jpg to the 230x211 max constraints set forth in the CSS rule.

In IE 9, however, the max-height and max-width rules are completely ignored and the image renders as its usual 320x211 size.

How can I modify the HTML/CSS so that both IE 9 and FF 11.0 both honor these max constraints? Thanks in advance!

Upvotes: 3

Views: 13704

Answers (2)

CWSpear
CWSpear

Reputation: 3270

Make sure you've declared a doctype and that there's NO output or whitespace before it. For example, this is HTML5's doctype and it should go at the very top of your output:

<!doctype html>

Also, if IE is in compatibility mode, that can cause problems. Try adding the following to your <head>:

<!-- Forces user OUT of IE's compatibility mode and removes "broken page" icon --> 
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

edit: I was able to test, and it seems that no doctype does cause max-width not to work. Compatibility mode didn't seem to affect it (on this issue).

Upvotes: 6

Gabriele Petrioli
Gabriele Petrioli

Reputation: 196002

IE7+ supports max-width and max-height.

Demo at http://jsfiddle.net/gaby/qE6w6/

check that you page runs in standards mode.. (make sure there is a valid doctype)

Upvotes: 4

Related Questions