Home/ Questions/Q 8989445
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-15T22:15:40+00:00

Without reCAPTCHA, my page looks like this ( jsfiddle ): <html> <body> <div class=content_wrap>

  • 0

Without reCAPTCHA, my page looks like this (jsfiddle):

<html>
<body>

<div class="content_wrap">
    <div class="left_container">
    </div>

    <div class="right_container">
        <div style="background-color: blue; margin:0px; height: 1500px;">
        <!--RECAPTCHA WOULD GO HERE-->
        </div>
    </div>

</div>

</body>
</html>

CSS:

body,html {
    height: 100%;
    width: 100%;
    background-color: #f8f8f8;
}

div.content_wrap {
    width: 100%;
    position: relative;
}

div.left_container {
    float:left;
    position:absolute;
    width: 220px;
    min-height: 100%;
    background-color: red;
}

div.right_container {
    position: relative;
    padding: 0px;
    margin-left: 220px;
    width: 1000px;
}

​

With reCAPTCHA (in the blue area) the height of the entire page’s content is reduced by ~20px at the bottom with a visible strip of white space.

Has anyone had problems with reCAPTCHA altering elements of their layout?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I’ve been able to replicate your issue based on this reCAPTCHA jsfiddle example.

    It looks like reCAPTCHA causes an empty iframe to be appended to the bottom of the page.

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

    A Google search on the message in the iframe results in a lot of discussion on the issue.

    And here’s a solution found on SO: Recaptcha creates iFrame on page, breaks styling

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

    Finally, here’s the jsfiddle with the solution implemented: http://jsfiddle.net/BXufS/7/.

    • 0