Iframe - firefox


I am having a problem with iframes and firefox. It seems to be the first bug i have come accross in firefox and i dont know how to fix it.

I have an advert which is called from another site, the code that they gave me and that i have put on my site is an iframe script held within a fixed width DIV with a border. In firefox it appears to add a small margin (1px) to the left of the iframe. It dosnt make the content spill out of the DIV though. In other browsers it renders exactly how it should. In the CSS and the iframe code all margins are set to 0 as well as vpsace and hspace in the iframe code.

Any suggestions?

Try setting the iframe to display:block and see if that makes a difference. Otherwise we’d need to see an example :wink:


I changed that but it didnt work. I have since shed some more light on the problem…

This only happens in firefox but if i resize the browser window to an odd width (i.e 1439 pixels) this problem goes away.

Its getting very confusing…

Sounds like a rounding error then.

If it is then there’s probably not much you can do about it.

I see a 1px jog on any iframe in Firefox when you close the window but I don’t see how it can be a problem so I’d probably need to see your set up to see if anything could be done.

Thanks for your response.

My site is located at www.mattjadams.info - I am viewing this on a MacBook Pro on Firefox V3.6 and my screen res is 1440x900. As i said if you change the width of the browser to an odd number, there is no error i have attached a file to show the error i get.

It is only affecting iframes, so in this case the betfair ads (yellow). As i use javascript to control my ads the banner ad at the top and the skyscraper down the side may or may not show the betfair ad (as it is random) however the second advert down on the left hand side is only betfair so the error can be seen there.

I read somewhere that it may have something to do with position the iframe as absolute which fixes the problem, but i am not to sure.

Many thanks for your help.


Ok there isn’t a problem in Firefox 3.6 on the PC but I can see a 1px gap on my imac. It jogs in and out and is a rounding bug on that system.

I can’t see a fix as I tried offsetting it or placing it absolutely but it just moves the gap to the other side.

You could either remove the border from the surrounding div so that it doesn’t notice or perhaps color the div’s background black to match the inner border so it doesn’t look so bad.

#advert 234x60 iframe{background:#000}

Paul are you sure that selector is correct?
Just went to the source. The selector should be

#advert234x60 iframe{background:#000}

No - well spotted Ryan - I must be more careful :slight_smile:

I also meant to tell the op that they shouldn’t use the same ID more than once either - It should be a class.

This might be dredging up from the dead, but this is a rendering issue in Firefox that we’re now experiencing with some Ads here at Sitepoint. I’ve opened a bug at bugzilla, and would appreciate anyone who can confirm and get it escalated.



Hi Mal,

Yes I can see the bug on my imac (osx 10.6.3) in FF3.6.3 and the border disappears as you change the screen width much the same as the original posters problem.

Hi Mal,

This isn’t a solution but may look better than a missing border.

.ad{border-right:1px solid #000}
.ad iframe{

That would ensure that there is always a border but of course on odd pixels you would get a 2px border which doesn’t look as bad as a missing border.

I suppose the solution would be to remove the border from the content and place it on the container instead but I guess you have no control over that.

It seems as I mentioned above that the whole content jogs in and out by 1px thus cutting off the right pixel of the content which is only really noticable when it has a border.