I have a development page live here, which has an embedded Google Map. The iframe has a 2px solid border which fits the map perfectly in all browsers except IE6, where the inside right and bottom borders there is a 4 pixel gap.

I've tried setting the padding, margin, line-height and font-size properties on both the iframe and the parent div to zero, but the gap remains.

Please can someone give me a pointer as to how I can remove it?

2 answers

Rezzie 0
This was chosen as the best answer

It appears IE6 gives iframes two borders; one on the host page and one on the embedded page. You can only control the styling of the iframe on the host page with CSS. I managed to remove the gap by adding the following attributes to the HTML tag:

<iframe framespacing="0" frameborder="0" ...>

...at the expense of validating with W3C.

Answered about 9 years ago by Rezzie

It definitely seems more like something to do with the map that is rendered inside the iframe than anything that can be easily controlled. This is more of a work-around than a solution but if you remove the border on the iframe for IE6 using conditional comments you'd at least have something that looks clean and doesn't highlight the gap.

Answered about 9 years ago by Jude Hansen