How to move the QTY box inlne with two attributes?

I want to move the QTY box from the add to cart area to a new location.

I don't want to simply move it up or down, I want to place it specifically between two dropdown attributes that reside inline on the same line.

Not sure where to start or even what info you might need to assist me,

Thanks.

J.

Zen Cart 1.3.8a
Database Patch Level: 1.3.8

Ja,
click on the Tutorials/FAQ at the top of this page and search for Move Add to Cart

haredo:

Ja,
click on the Tutorials/FAQ at the top of this page and search for Move Add to Cart

I did that. That's why I mentioned I don't want to simply move it up or down on the page.

To integrate it in between two attributes is not going to be easy. We tried using positioning in CSS, but it displays different in (nearly) every browser.

A link to see your site would make it more likely that we could give good advice for you.

Positioning it in the code is going to be a really tough job.

gjh42:

A link to see your site would make it more likely that we could give good advice for you.

Positioning it in the code is going to be a really tough job.

Oh thanks! I would really appreciate that.

Here's the link:
http://sawickiandson.com/store/index.php?main_page=product_info&cPath=1&products_id=1

Notice how the Qty[50] box is in the red text on IE? We'll it is perfect in Chrome

Here is the CSS we use to move that box around:

#cartAdd {
float: right;
text-align: center;
margin: 1em;
// border: 1px solid #000000;
padding: 1em;
}

#cartAdd.box-1 {
float: left;
font-weight: bold;
position: relative;
left: 140px;
bottom: 693px;
}

#productGeneral {position: relative;}

#cartAdd.box-1 {
    position: absolute;
    top: 331px;
    left: 154px;
    }

#cartAdd.box-1 input {
    position: relative;
    top: 6px;
    }

Positioning relative to an element dozens of lines down the page from the desired location is risky. Absolute positioning from the top of the container leaves less room for browser rendering differences to creep in.

On another subject, I see you have something that names and positions attributes individually. It's not Flexible Attributes; what is it and where did it come from? Just curious.

gjh42:

#productGeneral {position: relative;}

#cartAdd.box-1 {
position: absolute;
top: 331px;
left: 154px;
}

#cartAdd.box-1 input {
position: relative;
top: 6px;
}

> Positioning relative to an element dozens of lines down the page from the desired location is risky. Absolute positioning from the top of the container leaves less room for browser rendering differences to creep in.
> 
> On another subject, I see you have something that names and positions attributes individually. It's not Flexible Attributes; what is it and where did it come from? Just curious.

I'll dig that up for you. In the mean time, are you saying I should move that ad to cart box up the page to the same line I want it on and then move it left and right into position? If I do that, won't I have the same issue when I try to push the Buy Now button back to the bottom?

No, I'm saying that just adding that code to the bottom of your stylesheet will make the Qty box position correctly (at least in Firefox; I can't test it in other browsers on your site).

You should ideally replace the positioning code you posted with this, to eliminate extra bloat in the stylesheet.

Note - the box was also in the red text in Firefox - a rare occurrence of FF & IE behaving the same relative to another modern browser:)

gjh42:

No, I'm saying that just adding that code to the bottom of your stylesheet will make the Qty box position correctly (at least in Firefox; I can't test it in other browsers on your site).

You should ideally replace the positioning code you posted with this, to eliminate extra bloat in the stylesheet.

Note - the box was also in the red text in Firefox - a rare occurrence of FF & IE behaving the same relative to another modern browser:)

That CSS code I posted above? It is in my stylesheet.css, not at the bottom, but it is in there.

I know; you need to replace the #cartAdd.box-1 rule of that with the rules I posted.

gjh42:

I know; you need to replace the #cartAdd.box-1 rule of that with the rules I posted.

Darn, I didn't even notice you changed it. I'll drop it in right now and see what happens.

gjh42:

I know; you need to replace the #cartAdd.box-1 rule of that with the rules I posted.

Very nice! Thanks!

http://sawickiandson.com/store/index.php?main_page=product_info&cPath=1&products_id=1

gjh42:

On another subject, I see you have something that names and positions attributes individually. It's not Flexible Attributes; what is it and where did it come from? Just curious.

I beleive this is it.

/includes/templates/sas/templates/tpl_modules_attributes.php

near line 67

<div class="wrapperAttribsOptions optionsID-<?php echo $options_id[$i]; ?>" id="attributeBox-<?php echo $i ?>">
<h4 class="optionName"><?php echo $options_name[$i]; ?></h4>

Can't remember what it was before we added the extra code. You can compare it to yours.

And then we address them like this in CSS

.wrapperAttribsOptions{
border:1px transparent solid;
/*width:30em;
height:5em;*/
float:left;
}
/*
#attributeBox-0,#attributeBox-1,#attributeBox-2,#attributeBox-3,#attributeBox-4,#attributeBox-5,#attributeBox-6, #attributeBox-7,{
width:5em;
}
*/
#attributeBox-1 label, #attributeBox-2 label, #attributeBox-3 input, #attributeBox-3 label {
float: left;
}

#attributeBox-1 {
visibility:hidden;
}

#attributeBox-2, #attributeBox-3 {
 width: 130px;
}

#attributeBox-2 {
clear: both;
}

#attributeBox-3 {
margin-left: 150px;
}

.optionsID-16, .optionsID-17{
width: 49%;
}

.optionsID-10 {
width:250px;
font-weight:bold;
}

.optionsID-11 {
color: red;
margin-bottom: 20px}

.optionsID-14 {
font-weight:bold;
}

.optionsID-20 {
margin-top:37px;
width:200px;
}

.optionsID-20 h4.opotionName {
float:right;
}

.optionsID-20 div {
float:left;
}

The credit goes to NICCOL, a member here. I was reading a thread where he was walking someone through some changes.

Here's the thread: http://www.zen-cart.com/forum/showthread.php?t=130226&highlight=niccol

I took his advice for my earlier problem and it opened up a whole new world of manipulation!

JasGot:

I'll dig that up for you. In the mean time, are you saying I should move that ad to cart box up the page to the same line I want it on and then move it left and right into position? If I do that, won't I have the same issue when I try to push the Buy Now button back to the bottom?

Well, that looks good in IE, but not Chrome. Humph!

I don't have Chrome, so can't test in that. There are two possibilities: change the dimensions to ems to perhaps account for browser differences ; or add a wrapper div around just the attributes module and the add to cart box to give a closer base point for positioning.

/*this is still relative to the top*/
#cartAdd.box-1 {
    position: absolute;
    top: 27.6em;
    left: 13.0em;
    }

#cartAdd.box-1 input {
    position: relative;
    top: 6px;
    }

So what you have is very similar to Flexible Attributes, with different details.
I thought maybe the javascript at the top of the attributes module was related to the positioning, but it's not.

gjh42:

I don't have Chrome, so can't test in that. There are two possibilities: change the dimensions to ems to perhaps account for browser differences ; or add a wrapper div around just the attributes module and the add to cart box to give a closer base point for positioning.

/this is still relative to the top/
#cartAdd.box-1 {
position: absolute;
top: 27.6em;
left: 13.0em;
}

#cartAdd.box-1 input {
position: relative;
top: 6px;
}

> 
> So what you have is very similar to Flexible Attributes, with different details.
> I thought maybe the javascript at the top of the attributes module was related to the positioning, but it's not.

You're good! That worked! i had to tweak the position a bit, but the position is exactly the same in IE and Chrome. And because Chrome and Safari use the same rendering engine, it's good there too!

Thanks a bunch!

Hmm... it's now 2.6em too high in Firefox, and covers some of the text above it. Don'cha love cross-browser testing & synchronization? :)

gjh42:

Hmm... it's now 2.6em too high in Firefox, and covers some of the text above it. Don'cha love cross-browser testing & synchronization? :)

Ugh! No! 2.6ems is a LOT!

Do they anchor to different places for the position:absolute?

JasGot:

Ugh! No! 2.6ems is a LOT!

Do they anchor to different places for the position:absolute?

Well. it looked great at home last night, it was the same in IE and Chrome. At work this morning, I see what you see.

JasGot:

Well. it looked great at home last night, it was the same in IE and Chrome. At work this morning, I see what you see.

Is there a way to make inline <li>'s work?