Menu
Question:
Consider the following HTML:
<html>
<head></head>
<body>
<div style="float:left;">
<div style="background-color: Red; padding-top: 2mm; padding-bottom: 2mm;">
Dock: Usage controls/symbol list here
</div>
<div style="height: 300px; background-color: Khaki; display:block; float:left; overflow: scroll;">
<ul style="background-color: White; float: left; margin: 0px; padding: 0px; padding-left: 30px; padding-right: 10px;">
<li>
<a href="Folders/Content/Inbox" target="ifrmFolderContent" >
Posteingang / Inbox
</a>
</li>
<li>
<a href="Folders/Content/Drafts" target="ifrmFolderContent" >
Entwürfe / Drafts
</a>
</li>
<li>
<a href="Folders/Content/Sent Items" target="ifrmFolderContent" >
Gesendet / Sent Items
</a>
</li>
<li>
Archiv / Archive
</li>
<li>
Papierkorb / Trash
</li>
<li>
Junk / Crap
</li>
<li>
Scam
</li>
<li>
Spam
</li>
<li>
Virus
</li>
<li>
Abrufen / Send & Receive
</li>
<li>
Verfassen / Compose
</li>
<li>
Adressbuch / Address book
</li>
</ul>
</div>
<div style="width: 400px; height: 300px; background-color: Green; display:block; float:left; margin: 0px; padding: 0px;">
<iframe marginwidth="0" marginheight="0" hspace="0" vspace="0" name="ifrmFolderContent" src="http://www.yahoo.com" frameborder="0" style="overflow: none; width: 400px; height: 150px; background-color: Orange; margin: 0px; padding: 0px;">
Folder Content
</iframe>
<iframe marginwidth="0" marginheight="0" hspace="0" vspace="0" name="ifrmEmail" src="http://www.msn.com" frameborder="0" style="overflow: none; width: 400px; height: 150px; background-color: Orange; margin: 0px; padding: 0px;">
E-Mail Content
</iframe>
</div>
<div style="background-color: Indigo; padding-top: 2mm; padding-bottom: 2mm; clear: left;">
Copyright here
</div>
</div>
</body>
</html>
It renders exactly as one would expect (Chrome + IE8).
But now, I add:
<!DOCTYPE html>
on top of it.
And suddenly, I get 2 to 5 mm of green space between the two iframes (folder content / email content), in both Chrome and IE8 (haven't tested FireFox).
What is even more disturbing, there seems to be no way to get rid of this space (except from removing <!DOCTYPE html>.
Why? I mean, the green comes from the background-color of the parent element, but why is there some space between the two iframes ?
317
Method 1: Add between first and second iframes.
You can use the JavaScript contentWindow property to make an iFrame automatically adjust its height according to the contents inside it, so that no vertical scrollbar will appear.
IFrames are not obsolete, but the reasons for using them are rare. Using IFrames to serve your own content creates a "wall" around accessing the content in that area. For crawlers like Google, It's not immediately clear that cotent in an iframe will be ranked as highly as if the content were simply part of the page.
HTML Non-Breaking Space ( ) The simplest way to add a space in HTML (besides hitting the spacebar) is with the non-breaking space entity, written as or  .
Just add
<style>iframe { vertical-align:bottom; } </style>
or
<style>iframe { display:block; } </style>
<!DOCTYPE html> puts the browser into standards mode, where inline elements are placed on the baseline of the containing block and a space for the character descenders is always allocated in the line box. In other modes, that space is only created when there are printable characters on the same line as the iframes which isn't the case here. Moving the iframe off the baseline by either of the methods above allows the space for the descenders to be placed within the height of the iframe.
57
An iframe in standards mode is display: inline by default. That means they will be placed on the text baseline, ie. where the bottom of an 'a' ends, not where the bottom of a 'y' does. The gap you're seeing is the space for descenders in the line of text. This should remove it:
iframe { display: block; }
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
