reCAPTCHA not displaying correctly

[Jim Geisler]

It looks to be an issue with the styling of the Privacy and Terms link. I have verified the issue on multiple browsers, a mobile OS, as well as a site other than my own. Is anyone else seeing this issue?

[Liselotte]

No. It doesn't look like that on Chrome browser.

[Jim Geisler]

Here is a live example which is having the same problem I've seen:

https://www.webscript.io/examples/recaptcha

The styling issue is problematic on Firefox, Safari and Chrome on Mac OS, as well as on Chrome and Safari on iOS.

Thanks for any help.

Jim

[Tony Hurst]

Yes I have the same exact issue and I'm asking the same question.

Page: http://www.derex.com/FlowMeterUltrasonicPurchaseDXN.html

Somebody get the teenagers out of the coding dept and get some professionals (professionals usually CHECK how it looks before publishing.)

I'll give this 24 hours before I quit using recaptcha and never go back. What a joke.

On Sunday, September 22, 2013 6:35:54 PM UTC-7, Jim Geisler wrote:

[Winston Messer]

We ran into this issue as well.  Below is how we solved it.  We are using the white theme, so you may need to tweak for red theme.

.recaptchatable {line-height: 1px;}
#recaptcha_area .recaptchatable .recaptcha_r7_c1 {background:url('http://www.google.com/recaptcha/api/img/white/sprite.png') -50px -53px no-repeat; height: 3px;}
#recaptcha_area .recaptchatable .recaptcha_r8_c1 {background:url('http://www.google.com/recaptcha/api/img/white/sprite.png') -50px -53px no-repeat; height: 3px;}
#recaptcha_area .recaptchatable .recaptcha_image_cell {background-color: white!important;}
#recaptcha_area .recaptchatable td {vertical-align: top!important;background-color: #d7d7d7;}
.recaptchatable .recaptcha_r1_c1, .recaptchatable .recaptcha_r3_c1, .recaptchatable .recaptcha_r3_c3{background-color: transparent!important;}

[Tony Hurst]

Where does this code get inserted?

[Tony Hurst]

I'm getting on again off again with display issues.

A load of the page displays the graphics well, a reload jumbles the display, a reload of the frame repairs the problem, a second reload and it's back to broken.

Is reCaptcha a dead project? (as there does not seem to be anybody home.)

Looking for other captcha solutions...

On Sunday, September 22, 2013 6:35:54 PM UTC-7, Jim Geisler wrote:

[Winston Messer]

I put it into a CSS file that was used on the page I needed the CAPTCHA on.

[Tony Hurst]

Thank you I see how that works now. Fortunately I came across another much more flexible open source captcha (http://www.phpcaptcha.org) and recaptcha's going out the window. Hopefully the new people won't F up their captcha before abandoning their project like google did.

[Andrew Price]

Thanks Winston... I've been annoyed by this for weeks until I finally decided to find a solution. A quick google search revealed your post and now my faith in reCAPTCHA has been restored... MUCH APPRECIATED!!

On Tuesday, October 1, 2013 2:07:55 PM UTC-4, Winston Messer wrote:

We ran into this issue as well.  Below is how we solved it.  We are using the white theme, so you may need to tweak for red theme...

[Nicolás Diaz Pais]

I run with the same issue, but the code provided by Winston doesn't work for me. 

Someone have another solution?

Thanks

[Matt Gelfman]

Try adding this css to your css file. The problem on one of my sites was a general font-size declaration that was overriding the recaptcha's font-size css. Hope this helps.

.recaptchatable a, .recaptchatable a:hover {
    font-size:8pt;

[Ćosić Dejan]

I think that variation in general CSS rule(s) for <input/> field cause the problem. That is the reason why someone see this error and someone don't. I solve it with quick fix, but I believe there is much better and "correct" way. However, if anyone wants to try here it is:
.recaptchatable .recaptcha_input_area #recaptcha_response_field{
 margin: 0 !important;
 top: 12px !important;
 padding: 2px !important;