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

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