Max height % not working in IE8?

Question

[CONFIRMED: IE9 suffers the same bug! :'( ]

I have a div that is like a photo-frame style thing, which contains an img, and two divs. This outer div has a max-width (80%) that works beautifully.

Problem is, if I set a max-height, I get the following behaviour:

80px - works as expected.
80em - works as expected.
80% - same as height:auto and no max-height.

Any advice? Doc-type is <!doctype html>, which is entirely valid, and normally works perfectly. I even added <meta http-equiv="X-UA-Compatible" content="IE=9"> out of frustration.

EDIT:

This here is the html/css that I believe is relevant:

<!doctype>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=9"> 
<script type="text/javascript" src="https://getfirebug.com/firebug-lite-beta.js"></script>
<style type="text/css">
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
body
{
    background-color:black;
    color:black;
    font-size:80%;
    font-family:'Merriweather',georgia,serif;   
    max-width:1600px;
    min-width:780px;
    text-align:center;
    margin:0 auto;
    line-height:1.1;
}
div#container
{
    text-align:left;
    padding:1em 15px;
    margin:2em 5px;
    position:relative;
    background:#FFE4BE;
}


div.image
{
    background:white;
    max-width:80%;
    max-height:20%; <--- HAS NO EFFECT!
    overflow:hidden;
    margin:0 auto;
    display:block;
    padding:2em 2% 1em 2%;
}
div.image img { width:100%; margin:0 auto; display:block; }
div.image div.title { font-size:160%; font-weight:bold; text-align:center; margin-top:0.25em;  }
div.image div.caption { font-style:italic; text-align:center; }
</style>
</head>
<body>
<div id="container">
<div id="body">
<div class="image">
<img src="construction.jpg">
<div class="title">Construction</div>
<div class="caption">
<p>Turns out, we're not ready for beta users yet.</p>
<p>We'll have a mailing list available soon. Check back periodically!</p>
</div>
</div>
</div>
</div>
</body>
</html>

this only works in firefox, chrome also will not do what you are trying. — Martin Jespersen
– Martin Jespersen, Commented Feb 10, 2011 at 11:02

Martin Jespersen · Accepted Answer · 2011-02-10 08:18:19Z

0

You need to take a new approach to this - using max-height to scale an image is simply the wrong way to go about it, and you will most likely never get to a point where you like the solution.

If I was you, I'd go back to the drawing board and rethink the layout (not the design, just the markup & css) and try to reach the design goal another way.

answered Feb 10, 2011 at 8:18

Martin Jespersen

26.3k8 gold badges60 silver badges69 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Liam Dawson Over a year ago

yeah I'm tossing up other designs actually, but any examples of what you're suggesting?

Martin Jespersen Over a year ago

@dawmail333: Firstly i'd forget about working with heights and widths. then i'd go one of two ways. 1) work with paddings/margins on containing elements. 2) work with positioning. it really depends on the image content you are using, and weather or not you wish the containers to collapse around small images for example.

Hussein · Accepted Answer · 2011-02-10 02:23:28Z

0

Use * html for ie.

* html .whatever{
height:100%;
}

answered Feb 10, 2011 at 2:23

Hussein

42.9k25 gold badges115 silver badges143 bronze badges

3 Comments

Liam Dawson Over a year ago

not really following. What does height:100%; achieve? Does it trigger some quirk that makes max-height:##%; work?

Spudley Over a year ago

@dawmail333 - this is the star hack, which triggers this CSS to work in IE but ignored in other browsers. There are some IE height and width bugs that can be fixed with this hack. I was under the impression they were mainly IE6 bugs, but it may be worth a try.

Hussein Over a year ago

* html before height:100% is ignored by other browsers and only affects IE. It's a hack that fixes 100% height

coreyward · Accepted Answer · 2011-02-10 02:26:59Z

0

For what you're doing, it'd be easier to just set the image container to have a nice margin and set the max width to 100%. You probably don't want to force the max-height to be smaller than the viewport anyways since people are accustomed to scrolling vertically to see large/long images.

answered Feb 10, 2011 at 2:26

coreyward

80.5k21 gold badges148 silver badges176 bronze badges

1 Comment

Liam Dawson Over a year ago

Mm, I'll look into that idea, but I'm sure that max-height doesn't work anyway, and I'll be wanting to make this work nicely with mobile browsers, in which case, well... Nothing's set in concrete though.

Collectives™ on Stack Overflow

Max height % not working in IE8?

3 Answers 3

2 Comments

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related