PDA

View Full Version : Stretched paypal image, even with height/width attributes



whizard
06-08-2007, 07:39 PM
I'm having an issue with some paypal buttons on a site I'm working on.

The images appear stretched and squeezed, even though I have given them width/height attributes. I am really confused.

website: camp.drivenrobotics.com (http://camp.drivenrobotics.com)
scroll down to the paypal image, and you'll see it stretched.

then look here for the real image: https://www.paypal.com/en_US/i/btn/x-click-but6.gif

code:


<form action="https://www.paypal.com/cgi-bin/webscr" method="post">
<p>
<input type="hidden" name="cmd" value="_s-xclick" />
<!-- Image I am having trouble with is here -->
<input type="image" src="https://www.paypal.com/en_US/i/btn/x-click-but6.gif" width="150" height="52" class="logo" name="submit" alt="Make payments with PayPal - it's fast, free and secure!" />
<img alt="" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1" />
<input type="hidden" name="encrypted" value="-----BEGIN PKCS7-----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 tAmkg==-----END PKCS7-----" />
</p>

</form>


Any idea what's going on?

Thanks for reading
Dan

IgnorantBliss
06-08-2007, 08:20 PM
I'm just a beginner myself, so I apologize in advance if what I say is incorrect, but just some things I noticed...

You have the PayPal image marked as class "logo" in the HTML, but I don't see such a class defined in your style sheet. Instead, you do have an image class called "paypal" defined in the CSS.

Also, there is a small typo in the CSS regarding that class: There is a property called "diplay" instead of "display".

whizard
06-08-2007, 08:28 PM
Thanks for catching those.. I appreciate it!

Fixed the typo issues, but it still seems to be stretched

Dan

koyama
06-09-2007, 12:31 AM
Fixed the typo issues, but it still seems to be stretched
You are going to bang your head down on your desk when you see this in your CSS:


label,input {
display: block;
width: 200px;
float: left;
margin-bottom: 10px;
}

The width for the input element from the selector above will override the width attribute set for the input element (type="image")


<input type="image" src="https://www.paypal.com/en_US/i/btn/x-click-but6.gif"
width="150" height="52" class="paypal" name="submit"
alt="Make payments with PayPal - it's fast, free and secure!" />

whizard
06-09-2007, 01:08 AM
oh wow.. thanks a million

Half the problem probably was that I was having trouble thinking of it as an input instead of an img.

Well, that'll never happen again

Thanks
Dan