Firefox and Chrome adds 2px bottom padding to the table cell when there is iframe inside the cell in standard mode

Asked 24/2, 2012 at 17:58 Answered 9/6, 2012 at 13:28

Solved html css iframe html-table quirks-mode

I was working on an intranet application which has been working on quirks mode in all major browsers for years. The goal was to make it work in standard mode without breaking anything so that we can use some jQuery packages. Anyway my problem is in standard mode Firefox and Chrome adds a 2px bottom padding to the table cell when there is an iframe inside the cell. This does not happen in IE.

When I switch to quirks mode the padding goes away in Firefox and Chrome.
When I add a div instead of an iframe the padding goes away.
Setting table cellpadding and cellspacing to zero doesn't help.
The iframe src page is also in standard mode.

Here is a test case for you to see:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head><title>Test</title></head>
<body style="background:#FFF;">
<table cellpadding="0" cellspacing="0" border="0">
      <tr>
            <td id='browser_td' style='width:1000px; height:500px; margin:0px; padding:0px; background:#000; border-bottom:0px;'>
                  <iframe id='browser_iframe' name='browser_iframe' src="http://houston.craigslist.org/" width='1000' height='500' frameborder="0" hspace="0" vspace="0"></iframe>
            </td>
      </tr>
</table>
</body>
</html>

Tam answered 24/2, 2012 at 17:58 Comment(0)

Add vertical-align: top to iframe. The initial value of vertical-align is baseline.

iframe is an inline element. The problematic gap is the space reserved for descenders in letters.

More information here: https://developer.mozilla.org/en/Images,_Tables,_and_Mysterious_Gaps

Fortunate answered 24/2, 2012 at 18:34 Comment(1)

This solved my problem. I spent hours for this. Thanks a bunch. – Tam 24/2, 2012 at 21:1

I had this issue with a images in the bottom <td> of a <table>. With Firefox there was an additional 2px shown below the image. (IE was ok)

Anyway, I landed on this interesting page: (posted by thirtydot) https://developer.mozilla.org/en/Images,_Tables,_and_Mysterious_Gaps

The image was sitting on the text baseline (apparently) and I added this tag to the image. All is fine now. Thanks !

style="display: block;"

Rauwolfia answered 9/6, 2012 at 13:28 Comment(0)

Recommended topics

Hot tags