Problem with iframe and IE6 and IE7 causing extra bottom padding

Question

Hi all,

I'm trying to insert a Google Maps iframe into my website. The iframe has a padding of 4px and a border of 1px already applied to it but for some reason in IE6 and IE7 there is an extra 3px padding added to the bottom of the iframe.

You can see my test site here:

http://www.prashantraju.com/test/

Is there a reason why this is occurring and if so is there a fix to this?

Answer 1

Near as I can find it's a rendering issue in IE6 and IE7. Both of those browser's have some interesting quirks when it comes to CSS and it looks like you might have found some.

An option to deal with this quirk would be to conditionally set the padding-bottom for IE6 and IE7 to be 1px instead of 4px.

Kind of hacky but welcome to CSS and IE.

Answer 2

You will often run into problems setting top/bottom padding and a fixed height, or left/right padding and a fixed width. If you are wanting to leave your code as is, you will want to play with something like this. Put it on the page after your style block:

<!--[if lte IE 7]>
<style type="text/css" media="screen">
 iframe { padding-right: 2px; padding-bottom: 1px }
</style>
<![endif]-->

Answer 3

try setting the following CSS and see if it helps:

iframe { 
    margin: 0;
    padding: 0;
    padding: 4px;
    border: 1px solid #d5d5d5;
}

.clear { 
    clear: both;
}

Answer 4

IE 6 and 7 appear to be doubling the bottom padding. You can test for this by increasing the padding to a large number and watching the bottom grow twice the size. If you subsequently set padding-bottom: 0, it will be the right size for these versions of IE.

I can't explain why it's happening. I think it's probably due to the fact that there is a series of nested iframes inside Google's iframe, but even if you address your frame specifically using id-based CSS, it still happens.

I would simply apply a conditional stylesheet for IE6 and IE7 that sets padding-bottom: 0. Something like this:

<style type="text/css">
iframe { padding: 4px ; border: 1px solid #d5d5d5; }
.clear { clear: both; }
</style>
<!--[if lte IE 7]>
<style type="text/css">
iframe { padding-bottom: 0 }
</style>
<![endif]-->

Answer 5

The problem is with the Google maps page inside the IFrame. I don't know where, and I'm afraid to go into it... It's probably got a MB of CSS or something... in one long line...

If you replace the google page with your own page and a colored background, you'll see that the padding is gone. Giving the google page a colored background didn't show it, so it's obviously something else on top of that. Probably a bug in the javascript code or some kind of tile positioning code. Edit: It did show a colored background, so that just proves that it is in that page.

Answer 6

I usually start my CSSs with

*{ margin: 0; padding: 0; border: 0; }

That (universal selector) tells the browsers not to add margin/padding/border by default but to reset it to "0". It's usually enough to save a lot of trouble with cross-browser issues.

But for this one you're already half-way through, perhaps the best thing to do is to use conditional comments to add an ie6 css and on it add:

iframe{ padding-bottom: 0; }

Answer 7

There is a way to do it without hacking, it's simple, put you IFRAME within a DIV.

Example:

<div style="width:400px; height:150px;"><iframe width="100%" frameborder="0" height="100%" src="/chatbox/testb.html" marginheight="0" marginwidth="0" scrolling="no" name="add" style="border: #4EAD18 3px solid" id="add"></iframe></div>

This fix IE6 issue.

Regards.

Oscar