Paypal Subscription button displays too large

[TimAnderson]

Hi all!

I searched the forum and couldn' find anything addressing this. If, I missed it please point me to the post.

Anyone else came across this issue?

I created my Paypal subscription buttons using the "Button Code Generators" inside the s2member options. Placed the shortcode into my site, saved the page and viewed my page. Bam! There they were, 2 massive stretched "Check out with Paypal" buttons.

This is how the button should appear.


On my site it is roughly twice the length and three times the height. A stretched out mess.

First, I figured it must be a bug with the shortcode, so I tested with the Paypal html code. - Same big buttons.

Next, I followed the link of the button which was hosted on Paypal's site. Grabbed it. Uploaded it to my server and tested again. - Same big buttons.

Next, I added a couple of tags to the code with the proper button size.

Code: Select all

width="145" height="42"

- Same big buttons.

Next, I tried inserting a button into my page by itself. No code for the button to act as a button to submit a form. - Success. The button showed correctly.

I asked myself why it shows correctly outside of the Paypal form code? The only thing I can come up with is that either Wordpress or my theme is defaulting to some standard html 'form' submit button and its size. Not accounting for the fact that I have replaced the standard submit button for an image. In this case, the Paypal button image.

This is just my guess as I am not a programmer by trade.

I am using WP 3.0.1

Anyone have an idea of what may be causing this or how to fix this issue?

Any help would be appreciated. Thanks!

[TimAnderson]

I figured out what was causing this issue and fixed it. It was indeed the WP theme I am using.

The name of the theme is two syllables long and rhymes with psychokinesis.

Adding this code to the custom.css fixes the issue.

Code: Select all

.custom .format_text input, #commentform input, #commentform textarea {
width:auto;
}

[KirkWard]

Tim,

FYI, you can control the size of the image by specifying the height and width, and you can replace the image with one of your own if you wish.

[Pauloz10]

I am having the same problem. I have tried all the above but still get this image

Membership Options_1311648167224.png (26.01 KiB) Viewed 461 times

Where can you put the image width and height and what format should they be?
I tried entering width="30" into the short code but it made no difference.
I put the image on my server and instead of "default" put "http://imagelocation..." and that made no difference either.

I also changed the image to both a .png and a .jpg but not difference either.

When I use the long code I get nothing. No matter which image i use - there just isn't an image showing at all.

I entered the code into my custom.css file in Thesis as mentioned above but it did not do anything.

This is my page - http://slowdownmusicsecrets.com/membersa/membership-options

Hope you can help
Paul

[Cristián Lávaque]

Hi Paul. Could you post the shortcode for your button and the URL to your custom image?

[Pauloz10]

Hi Cristian
Thanks for quick reply.
I ended up putting 2 links up so I could test in different $ currencies - apart from that I think they are both the same
so here they are

Test US$
[s2Member-PayPal-Button level="1" ccaps="" desc="The Line Dance CD - Bonus / description and pricing details here." ps="paypal" lc="" cc="USD" dg="0" ns="1" custom="slowdownmusicsecrets.com" ta="0" tp="0" tt="D" ra="0.01" rp="1" rt="M" rr="1" rrt="" rra="1" image="default" output="button" /]

Test AUD$0.01
[s2Member-PayPal-Button level="1" ccaps="" desc="The Line Dance CD - Bonus / description and pricing details here." ps="paypal" lc="" cc="AUD" dg="0" ns="1" custom="slowdownmusicsecrets.com" ta="0" tp="0" tt="D" ra="0.01" rp="1" rt="Y" rr="BN" rrt="" rra="1" image="default" output="button" /]

I have the image set as default but i also converted the default image into a Jpg and a png but the result was the same (slightly different for the jpg).
http://slowdownmusicsecrets.com/members ... eckout.jpg
http://slowdownmusicsecrets.com/members ... eckout.png

I hope this is what you mean.

Paul

[Cristián Lávaque]

Yeah, that's what I meant. Here's the shortcode for the button with the custom image:

[s2Member-PayPal-Button level="1" ccaps="" desc="The Line Dance CD - Bonus / description and pricing details here." ps="paypal" lc="" cc="USD" dg="0" ns="1" custom="slowdownmusicsecrets.com" ta="0" tp="0" tt="D" ra="0.01" rp="1" rt="M" rr="1" rrt="" rra="1" image="http://slowdownmusicsecrets.com/membersa/wp-content/uploads/2011/07/btn_xpressCheckout.png" output="button" /]

I just tried it and it showed correctly in the page.

I hope that helps.

[Pauloz10]

Hi Cristian
Thanks for that. Unfortunately it doesn't work on my site. If it worked for you, my guess it is a problem / issue with Thesis. i will contact their forum to see if anyone there has an idea.

Thanks again
Paul
PS if I can get to the bottom of it I will post it here and maybe it can help others.

[Cristián Lávaque]

Thanks Paul.

Yeah, it's possible the theme is interfering. Could you switch to TwentyTen as a test and see if it works then?

Could give me the URL to the page where you're testing the button?

[Pauloz10]

Hi Cristian

I ended up with this code and it is a fix but only if i use a jpg with the right background (white in this instance)

.custom .format_text input {
border-width:0.00em;
padding:0.0em;
width: auto;
}

This is the page I am working on
http://slowdownmusicsecrets.com/members ... ip-options

The second and fourth buttons are using PNG

I will try tomorrow to change files and delete the code from .css to see if that was the problem.

Thanks
Paul

[Cristián Lávaque]

I see what you mean. I hope you solve it without much trouble.

Have you tried a GIF version of the button?