Strange iframe height behaviour when placed in a table cell - css

Question

I'm having a problem with iframe height when placed within a table cell. Firefox and Chrome set its minimum height at 150px while Internet Explorer handles lower height. When cell's height is more than 150px, iframe follows nicely.
The interesting thing is that when placed within a div its height is correct regardless of div's height being less than 150px but within a table cell height seems to follow its own rules (set by the browser).
Here's a JSFiddle
Example iframe test are as followed:
iframe in a div with height of less than 150px
iframe in a table cell with height less than 150px
iframe in a div with height more than 150px
iframe in a table cell with height of more than 150px
Additional limitation
Since it seems that iframe works fine when placed within a div that could be a nice solution, but I can't control HTML since it's part of third party controls that render iframe within a table cell. Javascript manipulation is of course always an option, but I would like to resolve this by using CSS only. And since container's height is controlled by the third party as well, I can't change iframe's height to fixed height.

Answer 1

This 150px limit for an iframe in a table cell has been reported as a bug in the Gecko/Webkit browser engine:
https://bugzilla.mozilla.org/show_bug.cgi?id=253363
https://bugzilla.mozilla.org/show_bug.cgi?id=324388
It has also been remarked upon by the Telerik RAD controls dev team (see here). I haven't found a definitive reason as to why it was decided that 150px is a mandatory minimum, but it does explain the behaviour you were seeing.

Answer 2

You could try to set the table and its children to display: block.
http://jsfiddle.net/willemvb/aM2Fx/
table,
tbody,
tr,
td{
position: relative;
display: block;
width: 100%;
height: 100%;
}
Or you could use relative positioning on the table, and absolute on the iframe.
http://jsfiddle.net/eeZHZ/
table
{
width: 100%;
height: 100%;
position: relative;
}
table iframe {
position: absolute;
top: 0;
}