Why is this reCAPTCHA displaying in an odd manner?

Question

I recently added reCAPTCHA to my project

but it is displaying like this

That spaces under the input is looking funny. How can I fix that?

And in case anyone is curious about the code

script(type='text/javascript', src='http://www.google.com/recaptcha/api/challenge?k=MY_KEY')

noscript
  iframe(src='http://www.google.com/recaptcha/api/noscript?k=MY_KEY', height='300', width='500', frameborder='0')
  br
  textarea(name='recaptcha_challenge_field', rows='3', cols='40')
  input(type='hidden', name='recaptcha_response_field', value='manual_challenge')

Yes, the above is in jade. So if you have a suggestion for other captcha type solutions for a Node.JS and Express project, please leave a comment.

Answer 1

Looks like Foundation has compatibility issues with it. Add this:

#recaptcha_area input[type="text"] {
  display: inline-block;
  height: auto;
}
#recaptcha_response_field {
  margin: 12px 0 0 0!important;
}

Answer 2

In addition to Mike Causer's answer code I had to add this additional CSS to fix mine:

#recaptcha_area table thead tr th, table tfoot tr th, table tbody tr td, table tr td, table tfoot tr td {
line-height: normal;}

If anything else comes up I suggest using the browser's element inspector to systematically go through your DOM's reCaptcha nodes and uncheck all Zurb Foundation css that is being applied until you see reCaptcha displaying like it should. That's how I found out what CSS code I had to override.