View Full Version : Paypal Shopping Cart problems

09-11-2008, 01:58 PM
Hi Everyone, i've been trying to integrate a paypal shopping cart into a site for a client and have come across a little problem.
When i paste the Paypal cart HTML into my site the "add to cart" and "view cart" buttons appear stretched
The sizes should be 96x21 but they are twice the size of that and are of poor quality. How do i counter this problem as the buttons are remotely hosted by paypal but even when using my own buttons the same thing happens
i've made a demonstration page for you to view and offer your suggestions

09-11-2008, 03:05 PM
Page not found

09-11-2008, 10:54 PM
Okay ElectroDesign,

I checked your source code and you have a style sheet referenced that is affecting your buttons.

I removed the following code....

<style type="text/css" media="all">@import "/css/master.css";</style>

.... and the buttons looked okay.

Regards, Paul

09-12-2008, 09:53 AM
Thanks Tux,
I never thought of doing that. There must be something in the stylesheet that conflicts with the imported buttons. As i'm going to need to use that stylesheet for the project, i'd better check through and see if i can see anything obvious. Is there a way round it if i can't find the problem, ie giving the buttons a class so that they appear ok?
i'll give a link to my stylesheet
Thanks again

09-12-2008, 11:12 AM
In your css file you have this......

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

What this is doing is looking for input tags in your code and applying the style to it. hence it is making your buttons 150px wide and distorting them.

Delete this and all should look fine. If you need this anywhere else in your site you will have to think of a work around.

Regards, Paul

09-12-2008, 01:58 PM
Thanks very much for that Tux it's worked a treat.
I never thought about the Label tag, i've temporarily attached a different stylesheet to counter this but i'm working on a better solution and i'll post back when ready.

Would it be correct CSS practice to create a div with a parent tag something like:

#cart {}

#cart label,input {
display: block;
width: 96px;
float: right;
margin-bottom: 10px;
margin-right: 50px;
margin-top: 10px;

Would this provide a workaround for the problem or can I not have two different label tags on the same stylesheet?
Thanks for your help

09-12-2008, 03:17 PM
What did the style we removed do on the rest of your site. I looked at the code to your home page and couldn't see any label tags.

When I want to use css on a form I add a class to the input tag like this example for a logout button...

<input name="Logout" type="button" class="form" value="Logout" onclick="document.location.href='logout.php'"/>

I would then put something like this in my css file....

.form {
background-color: #B7D8F1;

This example would make the form field a light blue colour.

Not sure if this helps.

09-12-2008, 08:18 PM
The label tag was used on a contact form that's going to be included on the clients site, just to explain, i use a stock css file to begin with on each new build then customise it as I go along depending on whats required, the label tag was just used to float the form fields instead of using a table, I will go down your route of adding a class to the form fields in future, it's a good tip. I've tried the approach I mentioned in my previous post and this works too, but whether CSS gurus would say its the right way to go is up for debate.
Thanks for taking the time to help