[SOLVED] Product-List Box Size

[Matteh]

Hai guys, my first posts. (:

I've just attempted to modify the size of the boxes on product-list.tpl but instead of the row below shifting up its left a gap.
I assume each box has a dedicated area within the css but I can't seem to find it.

I've attached the css and a screenshot to assist.

Hopefully someone can shed some light as to why the boxes are not moving up.

Thanks. ^^

[Matteh]

CSS refused to upload so I've posted below.

/* product-list.tpl */
ul#product_list{ margin-top:2em; list-style-type:none; }
ul#product_list li {
   background: #d0d3d8 url('../img/block_category_item_bg.jpg') repeat-x;
   border: solid 1px #d0d3d8;
   padding: 6px;
   height:130px;
   clear:both;
   margin-bottom:0.3em;
}
ul#product_list li a {
   text-decoration:none;
   color:#374853;
}

ul#product_list a.product_img_link{
   border: solid 1px #d0d3d8;
   float:left;
   margin-right:0.6em;
}

ul#product_list a.product_img_link img{
   vertical-align:bottom;
}
ul#product_list li h3{ margin:0.4em 0; }
ul#product_list li .new{
   background:transparent url(../img/flag_new_bg.jpg) repeat-x scroll 0%;
   border:1px solid #488C40;
   color:white;
   font-size:0.6em;
   font-weight:bold;
   margin:0pt 1em 0pt 0pt;
   padding:0pt 0.4em;
   text-transform:uppercase;
   vertical-align:0.3em;
}
ul#product_list li p.product_desc{ font-size:0.92em; }
ul#product_list li div.center_block{
   float:left;
   width:74%;
}
ul#product_list li div.right_block{
   float:left;
   width: 11em;
   text-align:right;
   margin-left:1em;
   margin-top:0;
}
ul#product_list li .discount{
   color:#da0f00;
   text-transform:uppercase;
   font-weight:bold;
   display: block;
}
ul#product_list li .on_sale{
   color:#da0f00;
   text-transform:uppercase;
   font-weight:bold;
   display: block;
}
ul#product_list li .reduction {
   display: block;
   margin-bottom: 0.3em;
}
ul#product_list li .price{
   display: block;
   font-size: 1.5em;
   margin-bottom: 0.2em;
}
ul#product_list li span.availability{
   float: right;
   color:#488c40;
   font-size:0.9em;
}
ul#product_list li a.button{ margin-top:0.5em; }

[Matteh]

No one got any ideas? :/
I'd really appreciate if someone could help me out.
The shops supposed to go live today but I just can't figure out this last thing.

I know the solution will be something easy thats staring me in the face but I just can't find any value that works and seemed like it would control such an aspect.

[daYmo]

Hi,
what's the address of the website ?
it might be because of your padding & margin... but using Firebug on your website is easy to find out
bye

[Matteh]

Hai
The address is http://www.rollmonster.com.

It would be great if someone could figure this out.
I'm in the process of setting up advertising for the store and I'd prefer if the product pages didn't look like they wern't loading correctly when people start visiting. (:

[daYmo]

Hi

it's because of the property "height" in your global.css file :

#center_column .products_block ul li {
background:url("../img/md-featured-li-bkg.gif") no-repeat scroll left top white;
clear:none;
display:block;
float:left;
height:320px;
margin:2px 0;
padding:0;
width:172px;
}

reduce it to 205 :

#center_column .products_block ul li {
background:url("../img/md-featured-li-bkg.gif") no-repeat scroll left top white;
clear:none;
display:block;
float:left;
height:205px;
margin:2px 0;
padding:0;
width:172px;
}

and that's all folks !
ciao

[Matteh]

That did it! Thanks.

I knew it would be something obvious like height.. I just didn't think to check whether the actual boxes had their own css that wasn't included in the overall page css. ^^

[daYmo]

please change the topic so as to "solved" :
Product-List Box Size => Product-List Box Size [sOLVED]
Ciao