...

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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum