reCaptcha styling is broken

Question

I implemented reCaptcha into the following website. I used recaptchalib.php from Google Code and did not change anything in the PHP file.

However, the result reCaptcha in my website seems to broke. The buttons have weird white space above them. It works just fine, but it is not pretty :(

Here is the website that has problem: http://### (removed)

Here is the code that I used to echo reCaptcha form

require_once('recaptchalib.php');
$publickey = "XXXXXXXXXXX"; // you got this from the signup page
echo recaptcha_get_html($publickey);

Best regards

Answer 1

I had the same problem on all the websites I used reCaptcha. The CSS was somehow distorted. But I discovered that it was my line-height in the body tag. I believe you have the same problem too. Just use this css in your style sheet.

#recaptcha_area, #recaptcha_table { line-height: 0!important;}

Answer 2

Just recently added Re-Captcha (05/2014), and the following css snippets work for me.

   .recaptchatable, #recaptcha_area tr, #recaptcha_area td, #recaptcha_area th {
        line-height: 0 !important;
   }
   #recaptcha_area input {
        height: auto;
        display: inline;
   }

Answer 3

In my case, I had to reset the display and height properties of the input widget:

#recaptcha_area input {
    height: auto;
    display: inline;
}

Answer 4

This worked for me !!

#recaptcha_area input {
       height:auto;
       display: inline;
   }
#recaptcha_area * {
  line-height:normal;
}

Answer 5

this worked for me

.recaptchatable, #recaptcha_area tr, #recaptcha_area td, #recaptcha_area th{
    line-height: 0 !important;
 }
#recaptcha_area input {
    height: auto;
    display: inline;

}

to customize it more https://developers.google.com/recaptcha/old/docs/customization?hl=en

Answer 6

This did the trick for me

#recaptcha_table { 
    table-layout: auto;
}