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>

James Hill · Accepted Answer · 2013-05-23T10:12:31.403

49

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

edited May 23 '13 at 10:12

answered Nov 20 '11 at 23:50

James Hill

60,353
20
145
161

Here are 10 thank you points for solving my same problem on a heart beat! =P – Manatax Jan 07 '13 at 09:13
1

+1, And this is the kind of stuff that just drives a man insane! – Mike Perrenoud Jun 05 '13 at 01:23
2

THANK YOU for this. This was really driving me nuts. Side note: the reCAPTCHA API is pretty miserable... whoever designed that makes me want to die. – wnajar Jun 12 '13 at 08:53

score 24 · Answer 2 · edited Aug 30 '12 at 16:12

24

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

This matches all iframes with the "src" attribute of "about:blank".

edited Aug 30 '12 at 16:12

owenmelbz

6,180
16
63
113

answered Nov 26 '11 at 14:35

Leo Jiang

24,497
49
154
284

from @OwenMelbourne: should have been src not href for iframes – Imre L Aug 30 '12 at 15:58

score 5 · Answer 3 · answered Jul 16 '12 at 03:21

5

This seems simpler and more accurate:

body > iframe { display:none !important; }

answered Jul 16 '12 at 03:21

Brendon Muir

4,540
2
33
55

Recaptcha creates iFrame on page, breaks styling

3 Answers3