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/

Answer 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.

Answer 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;
}