CODEWITHSUNDEEP
htmlcssinternet-explorer
Andre Figueiredo
Andre Figueiredo

Reputation: 13425

Max-height not working in Internet Explorer

I'm having problem to make max-height: 100% works in IE 10, (IE 9 too).

I found several Questions here in StackOverflow but none of them apply to my case. (A lot is dealing with fixed sized wrappers).

I'm showing an image in a modal dinamically.
I want to limit max-size to don't overflow visible window area.
So, I don't have any height: xxxpx because I don't want small images be stretched.
I won't also set wrapper div to height: 100% because I want that it adjusts to image size.

Here is a small demostration of the problem:

<!DOCTYPE html>
...
<div id="thumbnail-container">
    <img src="http://www.universetoday.com/wp-content/uploads/2008/09/sun_stereo_4dec2006_lrg.jpg"/>
</div>

CSS

#thumbnail-container img {
    max-height: 100%;
}

Demo in fiddle

It works in Chrome, but it does not work in IE. max-width works fine.

How can I make this work, without using Javascript?

Upvotes: 3

Views: 14886

Answers (2)

TylerH
TylerH

Reputation: 21078

Properties like min-height and max-height, when used with percentages, are applying that percentage as a percentage of the parent container. Right now, you have no parent container, so that's a problem.

Additionally, if the parent container doesn't have height set to an explicit value, using max-height with a percentage will likewise not work.

So, to use max-height: 100%; somewhere, you must also have that element's parent container's height set to an explicit value (ie 50px. Having a parent set to 50% won't work, because 50% is not explicit; it's relative).

Upvotes: 2

Karim AG
Karim AG

Reputation: 2193

max-height property works in IE7+, but only if the page has a standard DOCTYPE. Try declaring the DOCTYPE of your document. Try one of these:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<!DOCTYPE html>

Also, if IE is in compatibility mode, that can cause problems. Try adding the following to your document <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">

Upvotes: 0

Related Questions