Resizing?

[Johnnyd]

Greetings,

We have a dilemma in that we built a website with a form but it's much
narrower than the reCAPTCHA images. Our form is in a column that is
about 180 pixels wide.

Any help or insight would be greatly appreciated. If reCAPTCHA can't
do the job, is there something else out there that can handle the
smaller widths?

Thanks,
JohnnyD

[ju]

Don't know if you've solved your problem already, but I just did -
I've documented it here:
http://www.jurisgalang.com/articles/show/Resizing%20reCAPTCHA's%20Widget

Good luck.

[Kaolin Fire]

can resize with css:

#recaptcha_image img { width: 180px; }

will squish it down "just so".

[ju]

I like your solution much better.

Though I could swear it didn't work before.
Could've been bad CSS on my part.

[ju]

However it does mess up the layout (at least in Safari and Firefox)
If you have something like:

<div id="recaptcha_image"></div>
<input id="recaptcha_response_field" name="recaptcha_response_field"
type="text"/>

And the CSS was:

#recaptcha_image img {
width: 150px;
height: 28.5px;
border: 1px solid gainsboro;
}

There will be a gap (the difference between the original size and the
styled size) between the text field and the captcha image when it is
rendered.
The Joys of CSS...

[Kaolin Fire]

I think the cause of that is the div that gets created inside the recaptcha_image div, around the actual image (that or it puts styles on the recaptcha_image div itself--I forget exactly).

One trick around that would be to put another div around the recaptcha_image div, give it overflow: none; and set its height and width as well.

-- 
-kaolin imago fire
-trying not to make EVERY sig about GUD Magazine
-http://www.erif.org/

[ju]

It plugs in a bunch of styles in the div (id="recaptcha_image') that
wraps the image.