iframe not taking full height of cell in firefox

StackOverflow https://stackoverflow.com/questions/23353646

  •  11-07-2023
  •  | 
  •  

Question

http://onlinehandytools.com/blah.php?board=EDE&level=AL&subject=biology&year=2011

If you click on any of the links labeled QP/MS in Firefox/Opera the iframe won't take up the full height and only takes up about 10% of the height. Not sure why this is happening as it's working perfectly fine in Chrome.

Was it helpful?

Solution

You have only given the table those iframes are sitting in height:100% – but that doesn’t mean the elements inside the table have to take that height as well.

Give the tbody, tr and td elements inside that table the same height as well.

OTHER TIPS

It is probably due to the <doctype> you used, since iFrame are not supported with XHTML strict Doctype 1.0

In general the use of iFrames is not a good practice, it would be better to use other methods like dhtml and ajax; however there are cases (like your one) when an iFrame is necessary.

So, here there are some solutions:

  1. Use a less-restrictive DTD, like transitional: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">, which allows the use of iFrames
  2. Use a "tricky" custom DTD, like explained in this article: http://madskristensen.net/post/use-iframes-with-xhtml-10-strict, which simply expands the standard Strict DTD with the iFrame definitions from the Transitional DTD
  3. Convert the iFrame into an Object, like explained here: http://sumitbansal.com/web-designing-tips/w3c-validation-iframe-error-with-xhtml-1-0-strict-doctype/
  4. Calculate the height of the TD using javascript, and assign it to the iFrame; something like document.getElementById('the-iframe-id').style.height = document.getElementById('the-td-id').offsetHeight + 'px';

I hope this may help.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top