Widening the product-details-options box?

General General Questions
1

Hi, you know the box on each product page that shows the price, price in points, return period, any options you have, qty & add to cart?



I need to widen mine, because one of my options is sticking outside of it a little.



I tried editing this in the style sheet by increasing the width shown in red below, but it didn’t have any effect. Is this the wrong item to change in the stlyesheet? Anyone know how to make that box wider?:



/* product details styles */

.product-details-options {

background: #fffdd7 url(images/product_details_options_bg.gif) repeat-x bottom;

border: 1px solid #a3a3a3;

padding: 9px;

margin-top: 15px;

margin-left: -1px;

clear: left;

}

.product-details-options p {

font-size: 11px;

}

.product-details-option {

[COLOR=“Red”]width: 150px[/COLOR];

float: left;

}

2

What is the URL to your website?

3

Try this:



/* product details styles */
.product-details-options {
background: #fffdd7 url(images/product_details_options_bg.gif) repeat-x bottom;
border: 1px solid #a3a3a3;
padding: 9px;
margin-top: 15px;
margin-left: -1px;
clear: left;
[COLOR=Red]width: 150px;[/COLOR]
}

4

You should also have a look at it in Safari.



It is making this box narrower all the time for some reason.

5

I tried this & it didn’t make any change. I even tried it with a width of 200.

[quote name=‘mdekok3000’]Try this:



/* product details styles */
.product-details-options {
background: #fffdd7 url(images/product_details_options_bg.gif) repeat-x bottom;
border: 1px solid #a3a3a3;
padding: 9px;
margin-top: 15px;
margin-left: -1px;
clear: left;
[COLOR=Red]width: 150px;[/COLOR]
}
[/QUOTE]

6

You said you didn’t notice any change. I guess you are using IE, right? If you use Firefox browser, you should have noticed the change.



To make it works with IE, you need to change the setting at style_ie.css as well.




/* product details styles */
.product-details-options {
width: 500px;
padding: 9px 9px 5px 9px;
}
/* /product details styles */

7

YEP! That was it! Thank you very much! :smiley: :smiley: :smiley:


[quote name=‘Grabie’]You said you didn’t notice any change. I guess you are using IE, right? If you use Firefox browser, you should have noticed the change.



To make it works with IE, you need to change the setting at style_ie.css as well.




/* product details styles */
.product-details-options {
width: 500px;
padding: 9px 9px 5px 9px;
}
/* /product details styles */[/QUOTE]