How can I eliminate the gap above the footer in iframes alignment?

I have a setup with four iframes: header, menuframe, bodyframe, and footer. The menuframe and bodyframe are positioned next to each other with space between the footer and the menuframe/bodyframe. How can I remove this space?

Here is the CSS:

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

And here is the HTML structure:

<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>
cssiframe

Answer №1

1) Be sure to include the following in your stylesheet or page head:

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

This is necessary because iframes are inline by default, causing them to be placed on the text baseline rather than at the bottom of the text line. The space you're seeing is for descenders in the text. Adding this code should eliminate it.

2) Add the attribute:

seamless='seamless'

To each of your iframes as the frameBorder attribute is no longer supported in HTML5.

3) Also add:

float:left;

To your 'menuframe' iframe so that the adjacent iframe will appear on its right side.

These changes should work across most browsers.

Your code should resemble the following structure:

<!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>

Please note that some unnecessary style attributes have been removed. You can find more information and sources for these solutions in the following answers:

Remove border from IFrame

HTML: Strange space between iframe elements?

Answer №2

Utilize this code for your primary IFRAME style, including the addition of display:block:

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

For your menuFrame declaration, incorporate the float:left property:

<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>

Check out a live demo here: http://jsfiddle.net/tU8XN/1/ (disregard any "Page Not Found" errors)

Also, note that the classes iframe.menuframe and iframe.bodyframe have no effect as they target class declarations rather than element names.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Position the image to the right of the dropdown menu in Bootstrap

While working with Bootstrap to create a top navbar on my webpage, I encountered some issues: Once the navbar dropdown is opened, I need to display an option list alongside an image positioned to the right of the list. The image should be the same height ...

htmlcsstwitter-bootstrap

Is your animation glitching due to axis restrictions?

I decided to create my own version of the Google Maps icon using Photoshop, and now I want to replace the current image with my duplicate when the link that wraps around both is hovered over. To achieve this, I used the position: absolute property to layer ...

jqueryhtmlcssjquery-animate

The link that has been clicked on should remain in an active state

Is there a way to make the link that is clicked on active? I have attempted various scripts but have had no luck in getting the desired effect. Can anyone identify what might be causing the issue? $("a").click(function () { if ($(this).hasClass("acti ...

javascripthtmljquerycss

Focused Filtering in DataGrid Pagination

Seeking to adjust the font size of numerical values (10, 25, and 50 as shown in the screenshot below) within rows per page selection within a pagination section of a DataGrid component. After inspecting each number, it was revealed that .MuiMenuItem-root ...

javascriptcssreactjsdatagridmaterial-ui

When implementing CSS, the background image in the header section of my webpage is not visible to me

I'm currently working on a basic webpage and encountering an issue with setting an image as the background for my header section. Despite using what I believe to be the correct code in the CSS section, specifying the right path and file name for the i ...

htmlcss

Tips for adjusting the default width of the container in Bootstrap3

Modifying the default width of a Bootstrap 3 container without causing any alignment issues can be a challenge. The default container width currently set is .container { width: 1170px; } However, I am looking to adjust it to .container { wid ...

htmlcsstwitter-bootstrap-3

Positioning the comments box on Facebook platform allows users to

Need assistance, I recently integrated the Facebook comments box into my Arabic website, but I am facing an issue where the position of the box keeps moving to the left. Here is an example of my website: Could someone please suggest a solution to fix the ...

javascriptcssfacebookfacebook-comments

The jQuery script designed to verify the page height doesn't appear to be functioning as intended

Below is a snippet of jQuery code that I'm working with: <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript"> hasVBar=""; hasHBar=""; $(docume ...

javascriptjqueryhtmlcssdom

Increase the margin for the following item if it has a specific class using CSS

Here is the HTML code that I currently have: <div class="post"> <h2 class="title">TITLE: Kausalya</h2> <p class="content">CONTENT: Shaunaka Shakha</p> </div> <div class="post"> <h2 class="title"> ...

htmlcss

My goal is to create text that is opaque against a backdrop of transparency

Is it feasible using CSS to create text with a transparent background while keeping the text opaque? I attempted the following method: p { position: absolute; background-color: blue; filter: alpha(opacity=60); opacity: 0.6; } span { color: b ...

htmlcss

When using CSS border-width:1px, I notice that the borders aren't consistently thin

I'm attempting to add thin borders to a div. My CSS code is as follows: border: solid; border-width: 1px; However, the resulting borders appear unevenly thin in my browser. The borders on the left and bottom seem thicker than those on the right and ...

css

Animate the transition between the icon and extended variant in Material-UI FAB

If you have a Material-UI FAB with the following code: <Fab size="medium" color="primary" aria-label="add"> <AddIcon /> </Fab> And you want to toggle to this other state: <Fab var ...

cssreactjsmaterial-ui

The issue of the color CSS rule not being applied to the button element when transitioning from disabled to enabled on browsers like Safari 14+ is a common challenge

There seems to be an issue with frontend form validation code affecting the disabled attribute of a submit button within a form. Two different css rules are applied for the enabled and disabled states, including changes in the text color of the button ele ...

cssiosmaterial-uiwebkit

Rings that react to both width as well as height

Below is a popular CSS markup for creating responsive circles. http://jsfiddle.net/WTWrB/355/ <div class="circle"></div> .circle { width: 25%; height:0; padding-bottom: 25%; -moz-border-radius: 50%; -webkit-border-radius: ...

htmlcss

What is the best way to target only the immediate children of a div when using tailwindcss?

Here is the HTML code snippet I am working with: <div class="section"> <div class="header">header</div> <div class="content"> <div>sub contents 1</div> <di ...

htmlcsstailwind-css

Images that adjust to different screen sizes within a grid layout

I have four images that need to be aligned in the following layout: ____________ |1 |4 | |_____| | |2 |3| | |__|__|______| They must be flush against each other, occupy 100% of the viewport's width, and most importantly, be respon ...

javascripthtmlcsstwitter-bootstrap

Is there a way to incorporate CSS or tables when converting HTML to PDF using JavaScript?

While working on a project, I successfully converted an HTML file into a PDF. However, the output did not display the CSS design. Can anyone provide suggestions on how to include CSS design in the PDF file? Below is the JavaScript function code: $(funct ...

javascripthtmlcsspdfjspdf

Issues with inconsistent behavior of the select option in a form

Having some trouble with my form code. When I checked the web page, there seems to be an extra element that shouldn't be there. You can view the webpage . Inspecting it in browser developer mode, I found this extra element . Can you please help me ide ...

htmlcss

Issue with aligning items vertically using CSS and Javascript

I must admit, I am not well-versed in CSS. My goal is to create a performance bar using CSS and Javascript. So far, I have managed to generate a background bar with another bar inside that fills up to a specific percentage. However, my issue lies in the fa ...

javascriptcssdom

What causes z-index to be ineffective with sticky elements?

In my website, I've implemented rollover effects in a sticky footer and a responsive menu that stays at the top. However, when the menu is opened and extends over the footer, it covers everything except the rollovers. Closed navigation http://www.mus ...

javascriptcss