quantity text box/ input field

[mellonade]

does anyone know where the padding or margin comes from on the quantity input field in the Add to Cart box? ive played around with the css for 'input' and for '.cartAdd', and ive tried in vain to wrap the relevant php code in div's and in <span style>s with various margin settings, but i can't seem to get it showing up on the same visual line as the submit button next to it. basically, the quantity input field and Qty: text are showing up 5px or so below the top of the submit button, even though both are on the same line and both are considered 'input' as far as the css is concerned.

so, this is what it looks like with no inventive margin or padding alteration (red arrows show the disparity)



when i adjust the css and set the 'input' padding to a negative amount to try and pull it up, (#cartAdd input {margin-top:-0.5em} this is what happens:



only the 'Qty:' goes up the 0.5em, but not the input field!!

anyone know how i can move the quantity text input field up so that starts inline with the button? seems as though theres some margin or padding around the input field box, but not on the button. (i know this b/c when i increase the height of the button image so that at least the bottom will match up, the qty: and text field both get moved down so that they are still the same amount below the button.)

ive been working on this all day and really can't get it. ANY help would be greatly appreciated! thanks :)

[haredo]

Please submit a url to the products page so I can view the problem.

[mellonade]

here you go
http://bridgetbullentemp.dreamhoster...&products_id=9

[gjh42]

That is a nasty one! Both the textbox and the button are "input" with no way to distinguish between them. They are different input types, but I don't know if that can be used in CSS.
Did you try wrapping the button in <span class="addButton"> button code </span> and styling that in the stylesheet? (You said you tried lots of things... just checking.)
Something that might get you out of the box is to use position: relative; top: 1em; or whatever. it works in Edit CSS to shift both inputs, but I have no way to apply it to just one of them.

[mellonade]

hmm, just tried the position:relative and it didnt do much, i'll play around with it to see if i can make it work. as for the <span style>, i tried wrapping the button code with span classes and new div classes in the tpl_product_info_display.php. i must admit, though, since im not a native php programmer, i didnt know exactly where to start and where to end the <span> tags. based on intuition, i tried just about every mix of positions i could think of between the lines of 113 and 128. i set the span style to margin-top:-5px when trying to move the quantity box up. i originally was trying to move the button down (also using span style) but i abandoned that when i realized it was the qty box and input field that were being bumped down, not the button sitting too high (based on my trial of inserting a larger button and seeing the qty text get bumped down even more).

[gjh42]

I have long been annoyed by that button mismatch too, so I just fixed it on my own site. Here it is:

In tpl_product_info_display.php find this

 } else {
              // show the quantity box  
    $the_button = PRODUCTS_ORDER_QTY_TEXT . '<input type="text" name="cart_quantity" value="' . (zen_get_buy_now_qty($_GET['products_id'])) . '" maxlength="6" size="4" /><br />' . zen_get_products_quantity_min_units_display((int)$_GET['products_id']) . '<br />' . zen_draw_hidden_field('products_id', (int)$_GET['products_id']) . zen_image_submit(BUTTON_IMAGE_IN_CART, BUTTON_IN_CART_ALT);
            } 

and edit it with
<span id="cartAddButton">
and
. '</span>'
to get this

 } else {
              // show the quantity box  gjh42 4/13/06 - chg box layout to horiz.
    $the_button = PRODUCTS_ORDER_QTY_TEXT . '<input type="text" name="cart_quantity" value="' . (zen_get_buy_now_qty($_GET['products_id'])) . '" maxlength="6" size="4" />' . zen_get_products_quantity_min_units_display((int)$_GET['products_id']) . '<span id="cartAddButton">' . zen_draw_hidden_field('products_id', (int)$_GET['products_id']) . zen_image_submit(BUTTON_IMAGE_IN_CART, BUTTON_IN_CART_ALT) . '</span>';
            } 

In your stylesheet find #cartAdd and below it add this

#cartAddButton {
    position: relative;
    top: 1em;
    } 

[mellonade]

AMAZING. works beautifully.

thanks for all your help, again

[Soniccc]

Hi!

I was thrilled to seet his solution! I tried it right away (with ZenCart 1.39e) but when I copied your (gjh42) code into 'tpl_product_info_display.php' the product information page disappeared I'd really appreciate to have the fix for cartadd you posted
on this page!!

Please help me!

Thanks!

Regards
Jacob

[gjh42]

We need to see your site to be sure of the correct fix for you. Also, post the actual section of code from your file to be sure it is correctly applied.

[NoobGal]

I am having a similar problem, I would like the add to cart button and the qty box on the same line with space between them and aligned neatly so they don't look mismatched. I did what you said and managed to get them on the same line but they are still misaligned. Here is a link to the page in question http://www.lovetolust.com/test/zen/i...roducts_id=181

Would greatly appreciate some help with this.