Aligning Quantity Box and Add to Cart Button

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

Add to your stylesheet```
#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.

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!

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 https://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.```
#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.

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!

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

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

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.

gjh42:

Add to your stylesheet```
#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!

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.

Hello, thanks for your reply. I might have mixed up the name or something but I meant the page that is displayed when you go into a category (and, if present, subcategory) and look at the page that contains all of the products in that (sub)category.

I'm sorry if I mixed something up. If that is the listing page, then it's possible that the buttons didn't have enough time to load (because my connection is very slow).

I would really appreciate it if you could please take another look at that page (for example, the lasers or gift certificates category).

Also, what exactly do you mean by > your template has had elements changed around and renamed, so standard style rules will frequently not work on it. I've been told something like this before - is this because I got it from Template Monster? Is there any way to fix this?

Thanks a lot - I really appreciate your help!

OK, it was the featured products I was looking at and not seeing qty/add. For your product listing, you can add to your stylesheet_tm.css```
.productListing-data input+input {
position: relative;
top: 0.8em;
}

As for the non-standard part, TM is notorious for rejiggering elements of the page, adding lots of spacer or wrapper divs as if they were tables, and changing the names of even the elements they otherwise don't touch. It is usually possible to restyle TM pages, but you have to learn a whole new set of names, and they are often as meaningful as 
.top1 .r2 .left .inner {}
instead of 
#navMainHeader ul {}

Thank you so much - that worked wonderfully!:clap:

And thank you for your advice about Template Monster. By the way, is there any template site you recommend particularly instead of them?

No particular one that comes to mind. I haven't worked with that many identified template sources to be familiar with their practices, connected to a name.

Ok, well thanks anyway for your help! Besides, I'm stuck with this one anyway for now.