iframe height in % doesn't work with IE

Question

Title says it all, while in different browsers height: 61%; works fine it doesn't in IE, it seems like it automaticaly sets height totally ignoring my CSS. If I try setting it to pixels it works fine, but I want height to fit lower resolutions so I need to use 61% here.

Code:

#ifrm
{
overflow: hidden;
width: 70%;       /*990px*/
height: 61%;      /*630px*/
border-width: 0px;
margin: 0 auto 0 auto;
float: left;  
}

Container div height is set to 100%

This is how it looks like on Chrome:

And this is how it looks like on IE:

I personaly hate this browser so much because it always makes a lot of trouble. Yesterday I was forced to change SVG to PNG images on my animation because IE can't handle rotation and whole thing was twisted ^^ Any ideas?

Here's the demo:

http://klaunfizia.pl/damian/

Solution 1

In fact it isn't a problem with IE, in Firefox I can see the same as in IE.

Try to put:

html, body{
    height: 100%;
}

This happens because the browser by default sets the width to 100% for all the block elements, but this is not the default behaviour for the height.

Solution 2

All you really need to do is set CSS on the iframe to use block display. Then height will be honored.

#ifrm
{
overflow: hidden;
width: 70%;       /*990px*/
height: 61%;      /*630px*/
border-width: 0px;
margin: 0 auto 0 auto;
float: left;
display: block;
}

Comments

[Neil Monroe]

@JaySullivan, is this in IE 9 that it did not work? Possibly some other CSS you have on the page interfering? The main issue is that an iframe, is by definition, inline, which cannot have height. Making sure that it is rendered as block should allow the height to be specified.