Menu
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>
761
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
196
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
