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 150pxiframe
in a table cell with height less than 150pxiframe
in a div
with height more than 150pxiframe
in a table cell with height of more than 150pxSince 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.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With