Databases
StackOverflow2013
Postsdbo
POMax height % not working in IE8?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POMax height % not working in IE8?
    text
    copied!<p>[CONFIRMED: IE9 suffers the same bug! :'( ]</p> <p>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.</p> <p>Problem is, if I set a max-height, I get the following behaviour:</p> <ul> <li>80px - works as expected.</li> <li>80em - works as expected.</li> <li>80% - same as height:auto and no max-height.</li> </ul> <p>Any advice? Doc-type is <code>&lt;!doctype html&gt;</code>, which is entirely valid, and normally works perfectly. I even added <code>&lt;meta http-equiv="X-UA-Compatible" content="IE=9"&gt;</code> out of frustration.</p> <p>EDIT:</p> <p>This here is the html/css that I believe is relevant:</p> <pre> &lt;!doctype&gt; &lt;html&gt; &lt;head&gt; &lt;meta http-equiv="X-UA-Compatible" content="IE=9"&gt; &lt;script type="text/javascript" src="https://getfirebug.com/firebug-lite-beta.js"&gt;&lt;/script&gt; &lt;style type="text/css"&gt; 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%; &lt;--- 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; } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="container"&gt; &lt;div id="body"&gt; &lt;div class="image"&gt; &lt;img src="construction.jpg"&gt; &lt;div class="title"&gt;Construction&lt;/div&gt; &lt;div class="caption"&gt; &lt;p&gt;Turns out, we're not ready for beta users yet.&lt;/p&gt; &lt;p&gt;We'll have a mailing list available soon. Check back periodically!&lt;/p&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload