Add to cart buttons

[warrenphillips25336771]

Hi

can someone please tell me how to align my add to cart buttons so they line up correctly. I have a test at www.warrenphillipswebdesign.co.uk/ziggy/ceramic-knife.php you will see what i mean.

thanks

warren

[warrenphillips25336771]

is there a css file somewhere?

[deno1965]

Hi,

If you go to the GSG .pdf for ecart, there is something written in there. On page 35 of the GSG .pdf you'll find this.

Styling Corrections
You'll notice that the field and button are misaligned. This unevenness is one
of the results of using a CSS-based layout. The solution is to create a CSS
class with a margin-bottom property, like this:
.alignField { margin-bottom: 7px; }

Note: The pixel value may vary depending on the image button selected.

Once created, this class should be applied to the quantity text field. When
previewed in Firefox, Safari or Opera browser, the field and button will align;
however, you may notice a slight variation in Dreamweaver. Internet
Explorer, on the other hand, needs a little special handling to compensate for
the difference in rendering. The best way to handle Internet Explorer
rendering issues is through conditional comments. Place the following in the
head editable region:
<!--[if IE]>
<style>
.alignField { margin-bottom: 5px; }
</style>
<![endif]-->


Hope that helps.

Dean

[Travis250923]

I had trouble with this and could get it fine in IE7 but not in FF 3. I had to put them (Add button and Quantity field) in a table in separate cells and use vertical-align: top on the table cells.

[robert329616]

I had the same issue. I ended up adding the following style to the button image.

#cartform .alignField {
vertical-align:middle
}

It works well.

Regards,
Rob

[deno1965]

I did something similar as Rob did, I put the button and field in it's own div and got my alignment in the css.

Dean

[wilyumcj205276]

IN the code view, the correction seems to be done, but in FF or any other browsers it is still misaligned

I tried to create a new class , but an error message states I "need a alphabetical letter and then period"

[Eric Mittman]

Do you have a link to the site, I can take a look with Firefox and Firebug to see if I can spot the problem.