iframes alignment: how do i remove the space above the footer?

Question

I am using four iframes: header, menuframe,bodyframe and footer. The menuframe and bodyframe are placed side-by-side. There is a space between the footer and the menuframe and bodyframe. How do I remove it?

css:

iframe{
    border:0;
    margin:0;
}
iframe.menuframe{
    border:0;
    margin:0;
    width:183px;
}
iframe.bodyframe{
    border:0;
    margin:0;
    width:300px;
}

html:

<iframe name="header" src="Header.html" frameborder="0" cellspacing="0" scrolling="no" style="border-style:none; padding:0; border:0; width:100%; height:110px;"></iframe>
<iframe name="menuframe" src="Menu.html" frameborder="0" cellspacing="0" scrolling="no" style="border-style:none; padding:0; border:0; height:590px;"></iframe>
<iframe name="bodyframe" src="Home.html" frameborder="0" cellspacing="0" scrolling="no" style="border-style:none; padding:0; border:0; height:590px;"></iframe>
<iframe name="footer" src="Footer.html" frameborder="0" cellspacing="0" scrolling="no" style="border-style:none; padding:0; border:0; width:100%; height:25px;"></iframe>

score 1 · Accepted Answer · edited May 23 '17 at 11:44

1) You must add:

<style>iframe { display:block; } </style>

in your stylesheet or in your page head. This is because iframe is 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.

2) You must add the attribute:

seamless='seamless'

to each of your iFrame: in HTML5, attribute frameBorder is no longer supported.

3) You must add:

float:left;

to your 'menuframe' iframe so the adiacent iframe will appear on its right.

This changes should work for the most browsers.

So your code should look like this:

<!DOCTYPE html>
<html>
    <head>
        <style>iframe { display:block; } </style>
    </head>
    <body style="margin:0;padding:0">
        <iframe name="header" src="Header.html" frameborder="0" cellspacing="0" scrolling="no" seamless='seamless' style="width:100%; height:110px;"></iframe>
        <iframe name="menuframe" src="Menu.html" frameborder="0" cellspacing="0" scrolling="no" seamless='seamless' style="float:left;height:590px;"></iframe>
        <iframe name="bodyframe" src="Home.html" frameborder="0" cellspacing="0" scrolling="no" seamless='seamless' style="height:590px;"></iframe>
        <iframe name="footer" src="Footer.html" frameborder="0" cellspacing="0" scrolling="no" seamless='seamless' style="width:100%; height:25px;"></iframe>
    </body>
</html>

Note: I removed some useless styles attributes. Some of the solution were taken by these answers:

Remove border from IFrame

HTML: Strange space between iframe elements?

i had used display:table-cell on the iframe. But it was not working in safari and google chrome. — user2665607, Aug 09 '13 at 20:03

score 0 · Answer 2 · answered Aug 08 '13 at 19:42

Use this for your main IFRAME style (note display:block added):

iframe{
    border:0;
    margin:0;
    display:block;
}

And use this for your menuFrame declaration (note float:left added):

<iframe name="menuframe" src="Menu.html" frameborder="0" cellspacing="0" scrolling="no" style="border-style:none; padding:0; border:0; height:590px;float:left;"></iframe>

Here is a working example: http://jsfiddle.net/tU8XN/1/ (never mind "Page Not Found" for missing pages)

By the way your other 2 classes iframe.menuframe and iframe.bodyframe have no effect, because this format targets class declaration and not the name of the element.

oh i forgot to put class="...frame"!! – user2665607 Aug 09 '13 at 19:54 — user2665607, Aug 09 '13 at 19:54

iframes alignment: how do i remove the space above the footer?

2 Answers2