CODEWITHSUNDEEP
phpwordpressstylesheetrecaptcha
designil
designil

Reputation: 763

reCaptcha styling is broken

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

Upvotes: 6

Views: 5438

Answers (6)

Maqsood Ahmed
Maqsood Ahmed

Reputation: 11

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

Upvotes: 1

Swapnil17
Swapnil17

Reputation: 796

This worked for me !! 

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

Upvotes: 1

user1156124
user1156124

Reputation: 1

This did the trick for me

#recaptcha_table { 
    table-layout: auto;
}

Upvotes: 0

digitallica
digitallica

Reputation: 151

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

Upvotes: 15

José Tomás Tocino
José Tomás Tocino

Reputation: 10069

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

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

Upvotes: 5

MarieWeb
MarieWeb

Reputation: 331

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

Upvotes: 18

Related Questions