Css – Problem with iframe and IE6 and IE7 causing extra bottom padding

cssiframeinternet-explorer-6internet-explorer-7

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?

Best Answer

try setting the following CSS and see if it helps:

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

.clear { 
    clear: both;
}
Related Topic