[SOLVED] product list got disturbed

[Zen_j1]

In order to have discount percentage and price before and now on product list page I have added code given below to product_list.tpl . After adding the code alignment of product list got disturbed. I am sure someone with good knowledge off CSS can help to fix this. I am also looking forward to have percentage discount on product list page to look like product page. I have also attached Image with this post, you are request to take a look at image

Code I have added to product_list.tpl (I got this code from this post:- (http://www.prestashop.com/forums/topic/242926-solved-product-list-showing-old-price-reduction-new-price )

{if $product.price_without_reduction gt $product.price}

{if $product.specific_prices}{assign var='pro_specific_prices' value=$product.specific_prices}
{if $pro_specific_prices.reduction_type eq 'percentage' && ($pro_specific_prices.from eq $pro_specific_prices.to OR ($smarty.now|date_format:'%Y-%m-%d %H:%M:%S' <= $pro_specific_prices.to && $smarty.now|date_format:'%Y-%m-%d %H:%M:%S' >= $pro_specific_prices.from))}
<span class="price-discount">{if !$priceDisplay}{displayWtPrice p=$product.price_without_reduction}{else}{displayWtPrice p=((($product.price_without_reduction) / (1 + ((($product.rate|intval) / 100)|floatval)))|floatval)}{/if}</span>

(-{$pro_specific_prices.reduction * 100|floatval}%)
{/if}
{/if}
{/if}
Code for product_list.css (This what I have)
ul#product_list {
list-style-type: none
}
#product_list li {
text-align: center;
float: left;
width: 132px;
padding: 16px;
margin-bottom: 14px;
margin-right: 20px;
background-color: #f9f9f9

}
#product_list li.ajax_block_product.item:hover {
box-shadow: 0px 0px 10px rgb(170, 170, 170);
}

#product_list li.last_row_item {margin-right: 0;}

#product_list li a {
color: #374853;
text-decoration: none
}
#product_list a.product_img_link {
overflow:hidden;
position:relative;
float: left;
display:block;
border: 1px solid #ccc
}
#product_list a.product_img_link img {
display: block;
vertical-align: bottom
}

#product_list li span.new {
display: block;
position: absolute;
top: 15px;
right:-30px;
padding: 1px 4px;
width: 101px;
font-size:10px;
color: #fff;
text-align: center;
text-transform: uppercase;
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-o-transform:rotate(45deg);
-ms-transform: rotate(45deg);
background-color: #990000
}
#product_list li h3 {
padding:0 0 10px 0;
font-size:13px;
color:#000
}

#product_list li p.product_desc {
overflow: hidden;
padding:0;
line-height:16px;
}
#product_list li p.product_desc,
#product_list li p.product_desc a {
color:#666;
}

#product_list li .discount, ul#product_list li .on_sale, ul#product_list li .online_only {
display: block;
font-weight: bold;
margin: 5px 0;
padding: 1px 5px;
color: #990000;
text-transform: uppercase
}
#product_list li .discount {
display: inline-block;
font-size: 10px;
color: #fff;
background: none repeat scroll 0 0 #9B0000
}

#product_list li .content_price {
width: 142px;
float: left;
}
#product_list li .price {
display: block;
padding-bottom: 15px;
font-weight:bold;
font-size: 16px;
color:#990000
}
#product_list li span.availability {
display:none; /* remove to show availability */
color: #488C40
}
#product_list li .ajax_add_to_cart_button {
padding-left: 20px
}
#product_list li .ajax_add_to_cart_button span {
display: block;
position: absolute;
top: -1px;
left: -12px;
height: 26px;
width: 26px;
background: url(../img/icon/pict_add_cart.png) no-repeat 0 0 transparent
}
#product_list li p.compare {padding-bottom: 0;margin-top: 10px;}

#product_list li .price-discount {
font-size: 14px;
text-decoration: line-through;
color: #000000;
}

Edited September 26, 2013 by vekia (see edit history)

[Zen_j1]

Solved.

Edited September 26, 2013 by kartik_jh1 (see edit history)

[vekia]

please don't remove topic title, simple [solved] doesnt mean anything.

and if topic is solved, please share the information how you solved it

 

thanks in advance

[Zen_j1]

Sol 1) To align product I have increased height of in product_list.tpl in code given below
 

<span style="height:25px; margin: 5px 0; display: block"></span>
 

and pasted the code of percentage discount and price before and now below the the code which displays the price in product list.

 

These two step fixed the alignment issue

[vekia]

many thanks for your solution, im convinced that it will be usefull for other forum members

thank you again

 

with regards,

Milos