reCaptcha pushing down CSS elements

Question

My page is http://bonemarrow.ipage.com/contact/.

I'm using reCaptcha with Contact Form 7 under a Wordpress install. Without reCaptcha, my form looks fine and doesn't interfere with the look of the page. As soon as I pop in the reCaptcha, I new have a gap under the main content area, between it and my footer.

It seems like reCaptcha is pushing the footer div down by about the same height as the reCaptcha table itself. I tried wrapping it in a div of my own (#my_captcha) and setting a height, but that didn't work either.

I also thought it might be because of the way I style the labels and/or fields in my form, so I removed all the styling to see what would happen. No deal, even without styling reCaptcha still insists on introducing that gap.

Any help would be appreciated.

Answer 1

footer{
margin-top: -30px;
}

This is one way you could do it.

EDIT: Based on your comment...

Well you could just be more specific with your CSS for example like this

.some_specific_container footer{
margin-top: -30px
}

Assuming that form class only appears on the page I don't see a problem with that.

EDIT 2:

Just took another look, the problem is caused by the iframe, you currently have visibility:hidden if you add display:none you will fix it. No hacks required. The reason that is happening is because visibility:hidden hides an element, but it will still take up the same space as before. The element will be hidden, but still affect the layout. display:none hides an element, and it will not take up any space. The element will be hidden, and the page will be displayed as if the element is not there. source.