Aligning Quantity Box and Add to Cart Button

**eyal8r** · 19 Feb 2010, 07:19 PM

Man, this seems like a simple thing- but I can't figure it out! I think it's something that's hardcoded into the PHP backend stuff that's causing it.

The Quantity Box is sitting lower than the bottom of my 'Add to Cart' button. Is there a way to align the bottoms of these?
MY SITE IS HERE

I did try to throw this into a UL to help align it- but that didn't seem to work. Any suggestions?

Thanks

**gjh42** · 19 Feb 2010, 07:37 PM

Add to your stylesheet

Code:

#cartAdd input+input+input {
	margin-bottom: -1.0em;
	}

And get rid of the <ul> code, as it is not going to do anything for you.

**eyal8r** · 19 Feb 2010, 07:47 PM

AWESOME! Glen thank you once again! Do you mind giving a quick explanation of how this works? I'm just trying to learn as I go...
Thanks!

**gjh42** · 20 Feb 2010, 10:01 AM

The input+input+input is a CSS feature called "adjacent selectors". It means that the rule will only apply (in this case) to a case where there are three <input> elements in a row; then it will apply to the last one of these. If there are four elements in a row, the last two will meet the criteria, as each of them is the third in a set.
You can look at the left navigation on www.nyfaeriefest.com for an extreme example of this. The links are set in a slanted column by applying different left padding to each successive line.

Code:

#ezpages li {padding-left: 30px; height: 1.2em;}
#ezpages li+li {padding-left: 25px;}
#ezpages li+li+li {padding-left: 21px;}
#ezpages li+li+li+li {padding-left: 17px;}
#ezpages li+li+li+li+li {padding-left: 14px;}
#ezpages li+li+li+li+li+li {padding-left: 11px;}
#ezpages li+li+li+li+li+li+li {padding-left: 8px;}
...

Note that IE6 does not support adjacent selectors (or a number of other important standard styling features), so all the links fall in one vertical indented column in that antiquated browser. If you really care about making things perfect for IE6, you will have to use some more convoluted methods.

**eyal8r** · 20 Feb 2010, 03:21 PM

ok, that makes sense. Now- what is considered a selector? Or how is a selector defined? I see you can apply that to LI and Input... can you apply the same thing to say, text links? Images (ie- img src)? Or even something like <H2> ?

I really appreciate the help!

**lat9** · 20 Feb 2010, 03:57 PM

I've found http://www.w3schools.com/ to be a big help in figuring out CSS and HTML constructs ...

**eyal8r** · 20 Feb 2010, 04:13 PM

I didn't find much there- but did fine THIS article...
http://meyerweb.com/eric/articles/webrev/200007a.html

**gjh42** · 20 Feb 2010, 04:55 PM

That article may be ten years old, but Eric Meyer is a CSS god, and pretty much whatever he says is to be studied and learned - not to mention that he makes it easy to understand here.

**lucky-nz** · 23 Feb 2010, 04:00 AM

Originally Posted by gjh42

Add to your stylesheet

Code:

#cartAdd input+input+input {
	margin-bottom: -1.0em;
	}

And get rid of the <ul> code, as it is not going to do anything for you.

Hello,

I seem to be having the same problem but this doesn't work for me... The "Add to Cart" button on the Listing page (not the product page) is overlapping with the bottom of the quantity box and nothing I try seems to be able to correct it. Could you please tell me what needs to be done in this case?

My URL is http: //66.11.182.82/zen (sorry for the slow loading).

I really appreciate your help and look forward to your answer!

**gjh42** · 23 Feb 2010, 07:03 AM

With your current (TM) template, there is no add to cart button nor quantity box in the product listing page, only in the product info page. Did you change templates since your post?

If you did mean the product info page, your template has had elements changed around and renamed, so standard style rules will frequently not work on it.