Webkit browsers adding margin/padding?

[jatheist]

Hello Everyone, I am having difficulty getting a CSS background image to display properly in webkit browsers (Chrome, Safari), but it displays as intended in Firefox, IE9, and Opera. The site in question is: http://www.gnosisstudios.com In the upper right hand corner there is a folder looking tab that says "Contact Us". The "Contact Us" tab is inside a div that should align directly with the div above it as I have not entered any margins or padding. However in Chrome and Safari there seems to be a padding of about 25 pixels between the div above it and the tab itself. This began displaying incorrectly after I added a reCaptcha to the contact form that is revealed when you click the "Contact Us" tab. After looking through my code and the CSS I can't find a reason as to why the gap would be appearing in Chrome and Safari, as it displays perfectly as intended in Firefox, IE9, and Opera. I have tried making the padding and margins 0 for the div around the tab, as well as the div above it, but to no avail. Any help would be much appreciated! Thanks! -Jordan

[regicidedelferoz]

have you tried padding:0; margin:0; ?

[dsonesuk]

It seems in safari a iframe is added

<iframe src="about:blank" style="height: 0px; width: 0px; visibility: hidden; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; ">This frame prevents back/forward cache problems in Safari.</iframe>

, which also shows in chrome. This is causing the gap, because as soon as you add display:none; to the styling the gap disappears.

[jatheist]

Wow, you are totally correct dsonesuk. I used Chrome's inspect feature and clearly saw the same iframe, however in my actual html file the iframe is not anywhere in my code. What element should I be applying display:none to in order to make it not appear? Thanks!

[dsonesuk]

That's the problem, you have to apply it to the iframe itself, but it has no id or class ref. The only thing i can suggest is try

#contactArea + iframe {    display: none;}

or

#contactArea ~ iframe {    display: none;}

which should target the sibling element following #contactArea

[jatheist]

That worked flawlessly. Thank you very much, I sincerely appreciate it!