Jump to content

Webkit browsers adding margin/padding?

Recommended Posts

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

Link to post
Share on other sites

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.

Link to post
Share on other sites

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;}


#contactArea ~ iframe {    display: none;}

which should target the sibling element following #contactArea

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...