reCAPTCHA changing the height of my content by about -20px
css, html, recaptcha
Solution
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/.
Problem
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?