Recaptcha creates iFrame on page, breaks styling

Question

Recaptcha is adding a "This frame prevents back/forward cache problems in Safari" iFrame to the top of my website (code included below), which is pushing off the styling by 20-30px (approximately).

If I set display: none; to the element in Firebug it fixed the problem .

Does anyone know why this element has a height (I have no CSS that applies to iFrames)? Or how to set display: none; on it?

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

Answer 1

Try the CSS below:

/* ReCaptcha Iframe FIX */ iframe {display:none !important;} header iframe, section iframe, footer iframe, div iframe { display:inline; } 

If you don't have any other frames on the site to worry about, a simpler version should suffice:

iframe {display:none !important;} 

Alternatively, you could target all iframes where src="about:blank":

iframe[src="about:blank"]{display:none;}