product pages

[gsdcypher]

having some trouble with the layout on the product pages.

i need the image on the left, with title, man., model, options and add to cart button on the right, with the description down below.

the problem is getting everything to align properly....

here is an example:
http://all-k-9.crsdesignsinc.com/sto...products_id=16

as you can see...
1) "please choose" is off to the right (and it should be under the man.) And for items with no man info, or model info, it should just be under the price...
2) there is a big gap between size and the drop down box

any ideas on how to get the information on the right to align properly under each other like the example below????
Schweikert Heavy Full Body Bite Suit

$1,299.00

• Model: 56305
• Manufactured by: Schweikert

<H3>Please Choose:

</H3>size
Please Select medium large x-large




Add to Cart:

[gjh42]

It must be that you did not write the product_info.css yourself (/includes/templates/ALLK9/css/product_info.css). All the settings you need are right there - set left margins and paddings to 0 and things will line up neatly.

#mainProductBox {

margin: 0 auto;

padding: 0;

}

#imagebox {

margin:0;

padding:0;

width:20%;

float:right;

}

#productMainImage {

margin:1.5em 1em 1em 0;

}

#productbox {

margin:0;

padding:0;

width:45%;

float:left;

}

h1#productName {

margin:0;

padding:0;

font-weight:700;

text-align:center;

}

#productDescription {

margin:0;

padding:0 0 2px 0;<----------------------change to 0;

line-height:1.3em;

}

#productPrices {

margin:0;

padding: 2px 0;

font-weight:700;

text-align:left;

}

#productDetailsList {

margin: 0;

padding:0;

list-style: none;

}

#productDetailsList ul {

margin: 0;

padding:0;

list-style: none;

}

#productDetailsList ul li {

padding:3px 0 3px 3px;<----------------------change to 3px 0 3px 0;

}

#freeShippingIcon {

width:50%;

height:54px;

}

#productPurchaseBox {

margin: 0;

float:right;<----------------------??maybe change to left;

width:48%;

}

#buybox {

margin:0;

padding:3px;<----------------------change to 3px 3px 3px 0;

/*width:45%;*/

text-align:center;

/*float:right;*/

}

.wrapperAttribsOptions {

margin:0.3em 0;

text-align:left;

}

#attribsOptionsText {

margin:0;

padding:0.5em 5px;<----------------------change to 0.5em 5px 0.5em 0;

text-align:center;

}

.optionName {

margin:0;

color:#580c84;

font-weight:700;

padding-left:3px;<----------------------change to 0;

text-align:left;

width:10em;

}

#cartAdd {

margin:1em;<----------------------change to 1em 1em 1em 0;

padding:3px;<----------------------change to 3px 3px 3px 0;

font-size:1em;

text-align:left;

}

#cartImage {

margin:0.5em 1em;<----------------------??change to 0.5em 1em 0.5em 0;

}



#QuantityDiscountsBox {

margin: 0;

padding: 0;

width: 20%;

/*float: left;*/

}

The suggested changes are not necessarily the best settings for you, or efficiently stated; they are simply an example of removing all left margin/padding while leaving the rest as is.

[TinaS]

Sorry but those didn't work to solve this issue :/

I am the designer working this site - and for the life of me I cannot get the dang thing to come all the way left

[gjh42]

I changed product_info.css to this in Edit CSS and got everything aligned on the left edge:

#mainProductBox {
margin: 0 auto;
padding: 0;
}
#imagebox {
margin:0;
padding:0;
width:20%;
float:right;
}
#productMainImage {
margin:1.5em 1em 1em 0;
}
#productbox {
margin:0;
padding:0;
width:45%;
float:left;
}
h1#productName {
margin:0;
padding:0;
font-weight:700;
text-align:center;
}
#productDescription {
margin:0;
padding:0 0 2px 0;
line-height:1.3em;
}
#productPrices {
margin:0;
padding: 2px 0;
font-weight:700;
text-align:left;
}
#productDetailsList {
margin: 0;
padding:0;
list-style: none;
}
#productDetailsList ul {
margin: 0;
padding:0;
list-style: none;
}
#productDetailsList ul li {
padding:3px 0 3px 3px;
}
#freeShippingIcon {
width:50%;
height:54px;
}
#productPurchaseBox {
margin: 0;
float:right;
width:48%;
}
#buybox {
margin:0;
padding:0px;
/*width:45%;*/
text-align:center;
/*float:right;*/
}
.wrapperAttribsOptions {
margin:0.3em 0;
text-align:left;
}
#attribsOptionsText {
margin:0;
padding:0.5em 0px !important;
text-align:center;
}
#productAttributes { margin-left: 0; padding-left: 0;}
#attribsOptionsText h3 {text-align: left;}
label.attribsSelect {margin-left: 0; padding-left: 0}
.optionName {
margin:0;
color:#580c84;
font-weight:700;
padding-left:0px;
text-align:left;
width:10em;
}
#cartAdd {
margin:1em;
padding:3px;
margin-left:0;
padding-left:0;
font-size:1em;
text-align:left;
}
#cartAdd input {margin-left: 0;}
#cartImage {
margin:0.5em 1em;
}

#QuantityDiscountsBox {
margin: 0;
padding: 0;
width: 20%;
/*float: left;*/
}

(Added a number of selectors not originally in the file.)

[TinaS]

Ahhhh ok I totally removed that stylesheet - cuz I thought it was a conflict there. Let me see what happens now :)

Thanks!

[TinaS]

PERFECT !

Thanks - now I will search my original css compared to yours so that I remember what to change next time :)