I create a popup using jQuery and when the popup includes a path, I include an IFRAME as the content of the popup. The code resizes the IFRAME to take the whole available space in the parent DIV of that IFRAME tag.
The relevant code looks like this:
jQuery("<div class='snap-popup' id='"
+ popup.id
+ "' style='position:fixed;display:none;'><div class='close-popup'>"
+ "</div><div class='inside-popup'><div class='popup-title'></div>"
+ "<div class='popup-body'></div></div></div>")
.appendTo("body");
popup.widget = jQuery("#" + popup.id);
i = popup.widget.children(".inside-popup");
b = i.children(".popup-body");
[...snip...]
if(popup.path)
{
b.empty();
b.append("<iframe class='popup-iframe' src='" + popup.path + "' frameborder='0'"
+ " marginheight='0' marginwidth='0'></iframe>");
f = b.children(".popup-iframe");
f.attr("width", b.width());
f.attr("height", popup.widget.offset().top + popup.widget.height()
- b.offset().top);
}
The whole code can be found on SourceForge.net. The resulting HTML looks like this (newlines and indentation added for clarity):
<div class="snap-popup" id="create-finball" style="position: fixed;
width: 500px; height: 300px; top: 27px; left: 390px; display: block;
z-index: 3;">
<div class="close-popup"></div>
<div class="inside-popup">
<div class="popup-title"></div>
<div class="popup-body">
<iframe class="popup-iframe" src="/finball/company/create"
marginheight="0" marginwidth="0" frameborder="0"
height="265" width="500"></iframe>
</div>
</div>
</div>
Again: I do not have any new-line or <br/> tags in that DOM. It's really just a DIV and a direct child IFRAME. That's it.
Yet, when I check the sizes of the IFRAME and it's DIV container, I notice a difference in height. I have two screenshots that show the dimensions of the DIV and the IFRAME. We can see that the DIV is 4 pixels taller than the IFRAME (see layout in the bottom-right corner.)
Is there any reason for those extra pixels in the DIV? When I dynamically change the height of the IFRAME in Firebug, the DIV changes its height too: the IFRAME height + 4.
