How to make product text wrap around the image?

instink · #1 08-20-2006, 04:37 PM

Hi again guys, I have another issue which is hopefully an easy one... once again I tried searching the forums but I think the search is broken - I either get a million results or none at all...

Anyway basically I want to know if there is a way to make the product text wrap around the image. To illustrate, this is what I have now:

http://www.jctech.com.au/got.jpg

and this is what I would like:

http://www.jctech.com.au/want.jpg

This should be a simpel (and common) request... any help is appreciated. thanks!

longhorn180 · #2 08-20-2006, 05:46 PM

It looks like you are currently using the default 2 column table in product.tpl. If you want the text to wrap around the image you can reduce the table to 1 column and wrap it in a div tag using css in your skin1.css file. The css you might use would look like this:

Code:

.feature {
}
.feature img {
    float: left;
    padding-right: 4px;
    padding-bottom: 4px;
}

Of course you can call the tag anything you like, I just used feature as an example. You could apply this css to the img tag, but doing that would make all images float left and you might not want that. This way only the images inside this specific tag float left.

instink · #3 08-20-2006, 07:38 PM

Hi mate, thanks for your help. I added the bit you suggested to the skin1.cs fine, but couldn't find where I can change teh number of columns in product.tpl file. Sorry I know nothing about php...

BTW, the products.tpl file you are referring to, is that the one in main/customer ?

thanks again
Justin

longhorn180 · #4 08-21-2006, 08:48 AM

The product.tpl file is in the skin1/customer/main folder. It can be quite a task changing the table layout considering the amount of code in the product.tpl. Knowledge of php is not required to edit the templates. Just some html and maybe a basic understanding of some of the smarty tags which you can research here in the forum. If you want, you can post the code to your product.tpl here and I can help you with your layout.

jdedba · #5 08-22-2006, 04:23 PM

I also like to wrap the text around the image. I am working on version 4.1.2. The product.tpl is

Code:

{* $Id: product.tpl,v 1.147.2.6 2006/06/28 08:06:26 svowl Exp $ *}
{include file="main/include_js.tpl" src="main/popup_image.js"}
{if $active_modules.Special_Offers}
{include file="modules/Special_Offers/customer/product_offers_short_list.tpl" product=$product}
{/if}
{include file="form_validation_js.tpl"}
{if $product.product_type eq "C" && $active_modules.Product_Configurator}
{include file="modules/Product_Configurator/pconf_customer_product.tpl"}
{else}
{capture name=dialog}
<form name="orderform" method="post" action="cart.php?mode=add" onsubmit="javascript: return FormValidation();">
<table width="100%">
<tr>
	<td class="PImgBox" rowspan="2">

{if $active_modules.Detailed_Product_Images ne "" && $config.Detailed_Product_Images.det_image_popup eq 'Y' && $images ne '' && $js_enabled eq 'Y'}
{include file="modules/Detailed_Product_Images/popup_image.tpl"}
{else}
{include file="product_thumbnail.tpl" productid=$product.productid image_x=$product.image_x image_y=$product.image_y product=$product.product tmbn_url=$product.tmbn_url id="product_thumbnail" type="P"}&nbsp;
{/if}
{if $active_modules.Magnifier ne "" && $config.Magnifier.magnifier_image_popup eq 'Y' && $zoomer_images ne '' && $js_enabled eq 'Y'}
{include file="modules/Magnifier/popup_magnifier.tpl"}
{/if}
	</td>
<td valign="top" width="100%">
<span>{if $product.fulldescr ne ""}{$product.fulldescr}{else}{$product.descr}{/if}</span>
<p />
<table width="100%" cellpadding="0" cellspacing="0">
<tr><td colspan="2"><b><font class="ProductDetailsTitle">{$lng.lbl_details}</font></b></td></tr>
<tr><td class="Line" height="1" colspan="2"><img src="{$ImagesDir}/spacer.gif" class="Spc" alt="" /></td></tr>
<tr><td colspan="2">&nbsp;</td></tr>
{if $config.Appearance.show_in_stock eq "Y" and $config.General.unlimited_products ne "Y" and $product.distribution eq ""}
<tr><td width="30%">{$lng.lbl_in_stock}</td><td nowrap="nowrap"><span id="product_avail_txt">{if $product.avail gt 0}{$lng.txt_items_available|substitute:"items":$product.avail}{else}{$lng.lbl_no_items_available}{/if}</span></td></tr>
{/if}
{if $product.weight ne "0.00" || $variants ne ''}<tr><td width="30%">{$lng.lbl_weight}</td><td nowrap="nowrap"><span id="product_weight">{$product.weight|formatprice}</span> {$config.General.weight_symbol}</td></tr>{/if}
{if $active_modules.Extra_Fields ne ""}
{include file="modules/Extra_Fields/product.tpl"}
{/if}
{if $active_modules.Feature_Comparison ne ""}
{include file="modules/Feature_Comparison/product.tpl"}
{/if}
{if $active_modules.Subscriptions ne "" and $subscription}
{include file="modules/Subscriptions/subscription_info.tpl"}
{else}
<tr><td class="ProductPriceConverting" valign="top">{$lng.lbl_price}:</td>
<td valign="top">
{if $product.taxed_price ne 0 || $variant_price_no_empty}
<font class="ProductDetailsTitle"><span id="product_price">{include file="currency.tpl" value=$product.taxed_price}</span></font><font class="MarketPrice"> <span id="product_alt_price">{include file="customer/main/alter_currency_value.tpl" alter_currency_value=$product.taxed_price}</span></font>
{if $product.taxes}<br />{include file="customer/main/taxed_price.tpl" taxes=$product.taxes}{/if}
{else}
<input type="text" size="7" name="price" />
{/if}
</td>
</tr>
{/if}
</table>
<p />
<table width="100%" cellpadding="0" cellspacing="0">
<tr><td colspan="2">
<b><font class="ProductDetailsTitle">{$lng.lbl_options}</font></b>
</td></tr>
<tr><td class="Line" height="1" colspan="2"><img src="{$ImagesDir}/spacer.gif" class="Spc" alt="" /></td></tr>
<tr><td colspan="2">&nbsp;</td></tr>
{if $active_modules.Product_Options ne ""}
{ include file="modules/Product_Options/customer_options.tpl"}
{/if}
<tr><td height="25" width="30%">{$lng.lbl_quantity}{if $product.min_amount gt 1}<br /><font class="ProductDetailsTitle">{$lng.txt_need_min_amount|substitute:"items":$product.min_amount}</font>{/if}</td>
<td>
{if $config.General.unlimited_products eq "N" and ($product.avail le 0 or $product.avail lt $product.min_amount) and $variants eq ''}
<script type="text/javascript" language="JavaScript 1.2">
<!--
var min_avail = 1;
var avail = 0;
var product_avail = 0;
-->
</script>
<b>{$lng.txt_out_of_stock}</b>
{else}
{if $config.General.unlimited_products eq "Y"}
{assign var="mq" value=$config.Appearance.max_select_quantity}
{else}
{math equation="x/y" x=$config.Appearance.max_select_quantity y=$product.min_amount assign="tmp"}
{if $tmp<2}
{assign var="minamount" value=$product.min_amount}
{else}
{assign var="minamount" value=1}
{/if}
{math equation="min(maxquantity+minamount, productquantity+1)" assign="mq" maxquantity=$config.Appearance.max_select_quantity minamount=$minamount productquantity=$product.avail}
{/if}
{if $product.distribution eq "" and !($active_modules.Subscriptions ne "" and $subscription)}
{if $product.min_amount le 1}
{assign var="start_quantity" value=1}
{else}
{assign var="start_quantity" value=$product.min_amount}
{/if}
{if $config.General.unlimited_products eq "Y"}
{math equation="x+y" assign="mq" x=$mq y=$start_quantity}
{/if}
<script type="text/javascript" language="JavaScript 1.2">
<!--
var min_avail = {$start_quantity|default:1};
var avail = {$mq|default:1}-1;
var product_avail = {$product.avail|default:"0"};
-->
</script>
<select id="product_avail" name="amount"{if $active_modules.Product_Options ne '' && $product_options ne ''} onchange="check_wholesale(this.value);"{/if}>
{section name=quantity loop=$mq start=$start_quantity}
<option value="{%quantity.index%}" {if $smarty.get.quantity eq %quantity.index%}selected{/if}>{%quantity.index%}</option>
{/section}
</select>
{else}
<script type="text/javascript" language="JavaScript 1.2">
<!--
var min_avail = 1;
var avail = 1;
var product_avail = 1;
-->
</script>
<font class="ProductDetailsTitle">1</font><input type="hidden" name="amount" value="1" /> {if $product.distribution ne ""}{$lng.txt_product_downloadable}{/if}
{/if}
{/if}
</td></tr>
<tr><td colspan="2">
<input type="hidden" name="mode" value="add" />
{include file="customer/main/product_prices.tpl"}
{if $config.General.unlimited_products eq "Y" or ($product.avail gt 0 and $product.avail ge $product.min_amount)}
{if $js_enabled}
<br />
{if $product.forsale ne "B"}
<table cellspacing="0" cellpadding="0">
<tr>
	<td>{include file="buttons/add_to_cart.tpl" style="button" href="javascript: if(FormValidation()) document.orderform.submit();"}</td>
	<td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
	<td>
{if ($login ne "" || $config.Wishlist.add2wl_unlogged_user eq 'Y') && $active_modules.Wishlist ne ""}
{include file="customer/add2wl.tpl"}
{/if}
	</td>
</tr>
</table>
{else}
{$lng.txt_pconf_product_is_bundled}
{/if}
{if $smarty.get.pconf ne ""}
<br /><br />
<input type="hidden" name="slot" value="{$smarty.get.slot}" />
<input type="hidden" name="addproductid" value="{$product.productid}" />
{include file="buttons/button.tpl" button_title=$lng.lbl_pconf_add_to_configuration style="button" href="javascript:if (FormValidation()) `$ldelim`document.orderform.productid.value='`$smarty.get.pconf`';document.orderform.action='pconf.php';document.orderform.submit()`$rdelim`"}
<br />
{$lng.txt_add_to_configuration_note}
<br />
{/if}
{else}
{include file="submit_wo_js.tpl" value=$lng.lbl_add_to_cart}
{/if}
{/if}
{if $active_modules.Feature_Comparison ne ""}
{include file="modules/Feature_Comparison/product_buttons.tpl"}
{/if}
<br /><br />
</td>
</tr></table>
</td>
<td align="right" valign="top" width="60" id="save_percent_box"{if $product.taxed_price >= $product.list_price} style="display: none;"{/if}>
{if $product.taxed_price gt 0 and $product.list_price gt 0}
<table width="60" cellspacing="1" cellpadding="2">
<tr>
	<td class="SaveMoneyLabel">
<br />
{math equation="100-(price/lprice)*100" price=$product.taxed_price lprice=$product.list_price format="%3.0f" assign=discount}
&nbsp;<span id="save_percent">{ $discount }</span>%
	</td>
</tr>
</table>
{/if}
</td>
</tr>
</table>
<input type="hidden" name="productid" value="{$product.productid}" />
<input type="hidden" name="cat" value="{$smarty.get.cat|escape:"html"}" />
<input type="hidden" name="page" value="{$smarty.get.page|escape:"html"}" />
</form>
{/capture}
{include file="dialog.tpl" title=$product.producttitle content=$smarty.capture.dialog extra='width="100%"'}
{/if}
{if $active_modules.Magnifier ne "" && ($config.Magnifier.magnifier_image_popup ne 'Y' || $js_enabled ne 'Y')}
<p />
{include file="modules/Magnifier/product_magnifier.tpl" productid=$product.productid}
{/if}
{if $config.Appearance.send_to_friend_enabled eq 'Y'}
<p />
{include file="customer/main/send_to_friend.tpl" }
{/if}
{if $active_modules.Detailed_Product_Images ne "" && ($config.Detailed_Product_Images.det_image_popup ne 'Y' || $js_enabled ne 'Y')}
<p />
{include file="modules/Detailed_Product_Images/product_images.tpl" }
{/if}
{if $active_modules.Upselling_Products ne ""}
<p />
{include file="modules/Upselling_Products/related_products.tpl" }
{/if}
{if $active_modules.Recommended_Products ne ""}
<p />
{include file="modules/Recommended_Products/recommends.tpl" }
{/if}
{if $active_modules.Customer_Reviews ne ""}
<p />
{include file="modules/Customer_Reviews/vote_reviews.tpl" }
{/if}
{if $active_modules.Product_Options ne '' && $product_options ne ''}
<script type="text/javascript" language="JavaScript 1.2">
<!--
check_options();
-->
</script>
{/if}

Can you give some directions on using your method? I like the detailed desc and extra fields are all wrapped.

Thanks a lot.

longhorn180 · #6 08-23-2006, 07:04 AM

Sorry, but I'm having to split this into 2 posts. Here is the code from your product.tpl with just a couple of modifications. All i did was eliminate the cell holding the thumbnail and put the thumnail code into the adjacent cell.

Code:

{* $Id: product.tpl,v 1.147.2.6 2006/06/28 08:06:26 svowl Exp $ *}
{include file="main/include_js.tpl" src="main/popup_image.js"}
{if $active_modules.Special_Offers}
{include file="modules/Special_Offers/customer/product_offers_short_list.tpl" product=$product}
{/if}
{include file="form_validation_js.tpl"}
{if $product.product_type eq "C" && $active_modules.Product_Configurator}
{include file="modules/Product_Configurator/pconf_customer_product.tpl"}
{else}
{capture name=dialog}
<form name="orderform" method="post" action="cart.php?mode=add" onsubmit="javascript: return FormValidation();">
<table width="100%">
<tr>
	<td class="PImgBox" width="100%">

{if $active_modules.Detailed_Product_Images ne "" && $config.Detailed_Product_Images.det_image_popup eq 'Y' && $images ne '' && $js_enabled eq 'Y'}
{include file="modules/Detailed_Product_Images/popup_image.tpl"}
{else}
{include file="product_thumbnail.tpl" productid=$product.productid image_x=$product.image_x image_y=$product.image_y product=$product.product tmbn_url=$product.tmbn_url id="product_thumbnail" type="P"}&nbsp;
{/if}
{if $active_modules.Magnifier ne "" && $config.Magnifier.magnifier_image_popup eq 'Y' && $zoomer_images ne '' && $js_enabled eq 'Y'}
{include file="modules/Magnifier/popup_magnifier.tpl"}
{/if}
<span>{if $product.fulldescr ne ""}{$product.fulldescr}{else}{$product.descr}{/if}</span>
<p />
<table width="100%" cellpadding="0" cellspacing="0">
<tr><td colspan="2"><b><font class="ProductDetailsTitle">{$lng.lbl_details}</font></b></td></tr>
<tr><td class="Line" height="1" colspan="2"><img src="{$ImagesDir}/spacer.gif" class="Spc" alt="" /></td></tr>
<tr><td colspan="2">&nbsp;</td></tr>
{if $config.Appearance.show_in_stock eq "Y" and $config.General.unlimited_products ne "Y" and $product.distribution eq ""}
<tr><td width="30%">{$lng.lbl_in_stock}</td><td nowrap="nowrap"><span id="product_avail_txt">{if $product.avail gt 0}{$lng.txt_items_available|substitute:"items":$product.avail}{else}{$lng.lbl_no_items_available}{/if}</span></td></tr>
{/if}
{if $product.weight ne "0.00" || $variants ne ''}<tr><td width="30%">{$lng.lbl_weight}</td><td nowrap="nowrap"><span id="product_weight">{$product.weight|formatprice}</span> {$config.General.weight_symbol}</td></tr>{/if}
{if $active_modules.Extra_Fields ne ""}
{include file="modules/Extra_Fields/product.tpl"}
{/if}
{if $active_modules.Feature_Comparison ne ""}
{include file="modules/Feature_Comparison/product.tpl"}
{/if}
{if $active_modules.Subscriptions ne "" and $subscription}
{include file="modules/Subscriptions/subscription_info.tpl"}
{else}
<tr><td class="ProductPriceConverting" valign="top">{$lng.lbl_price}:</td>
<td valign="top">
{if $product.taxed_price ne 0 || $variant_price_no_empty}
<font class="ProductDetailsTitle"><span id="product_price">{include file="currency.tpl" value=$product.taxed_price}</span></font><font class="MarketPrice"> <span id="product_alt_price">{include file="customer/main/alter_currency_value.tpl" alter_currency_value=$product.taxed_price}</span></font>
{if $product.taxes}<br />{include file="customer/main/taxed_price.tpl" taxes=$product.taxes}{/if}
{else}
<input type="text" size="7" name="price" />
{/if}
</td>
</tr>
{/if}
</table>
<p />
<table width="100%" cellpadding="0" cellspacing="0">
<tr><td colspan="2">
<b><font class="ProductDetailsTitle">{$lng.lbl_options}</font></b>
</td></tr>
<tr><td class="Line" height="1" colspan="2"><img src="{$ImagesDir}/spacer.gif" class="Spc" alt="" /></td></tr>
<tr><td colspan="2">&nbsp;</td></tr>
{if $active_modules.Product_Options ne ""}
{ include file="modules/Product_Options/customer_options.tpl"}
{/if}
<tr><td height="25" width="30%">{$lng.lbl_quantity}{if $product.min_amount gt 1}<br /><font class="ProductDetailsTitle">{$lng.txt_need_min_amount|substitute:"items":$product.min_amount}</font>{/if}</td>
<td>
{if $config.General.unlimited_products eq "N" and ($product.avail le 0 or $product.avail lt $product.min_amount) and $variants eq ''}
<script type="text/javascript" language="JavaScript 1.2">
<!--
var min_avail = 1;
var avail = 0;
var product_avail = 0;
-->
</script>
<b>{$lng.txt_out_of_stock}</b>
{else}
{if $config.General.unlimited_products eq "Y"}
{assign var="mq" value=$config.Appearance.max_select_quantity}
{else}
{math equation="x/y" x=$config.Appearance.max_select_quantity y=$product.min_amount assign="tmp"}
{if $tmp<2}
{assign var="minamount" value=$product.min_amount}
{else}
{assign var="minamount" value=1}
{/if}
{math equation="min(maxquantity+minamount, productquantity+1)" assign="mq" maxquantity=$config.Appearance.max_select_quantity minamount=$minamount productquantity=$product.avail}
{/if}
{if $product.distribution eq "" and !($active_modules.Subscriptions ne "" and $subscription)}
{if $product.min_amount le 1}
{assign var="start_quantity" value=1}
{else}
{assign var="start_quantity" value=$product.min_amount}
{/if}
{if $config.General.unlimited_products eq "Y"}
{math equation="x+y" assign="mq" x=$mq y=$start_quantity}
{/if}
<script type="text/javascript" language="JavaScript 1.2">
<!--
var min_avail = {$start_quantity|default:1};
var avail = {$mq|default:1}-1;
var product_avail = {$product.avail|default:"0"};
-->
</script>
<select id="product_avail" name="amount"{if $active_modules.Product_Options ne '' && $product_options ne ''} onchange="check_wholesale(this.value);"{/if}>
{section name=quantity loop=$mq start=$start_quantity}
<option value="{%quantity.index%}" {if $smarty.get.quantity eq %quantity.index%}selected{/if}>{%quantity.index%}</option>
{/section}
</select>
{else}
<script type="text/javascript" language="JavaScript 1.2">
<!--
var min_avail = 1;
var avail = 1;
var product_avail = 1;
-->
</script>
<font class="ProductDetailsTitle">1</font><input type="hidden" name="amount" value="1" /> {if $product.distribution ne ""}{$lng.txt_product_downloadable}{/if}
{/if}
{/if}
</td></tr>
<tr><td colspan="2">
<input type="hidden" name="mode" value="add" />
{include file="customer/main/product_prices.tpl"}
{if $config.General.unlimited_products eq "Y" or ($product.avail gt 0 and $product.avail ge $product.min_amount)}
{if $js_enabled}
<br />
{if $product.forsale ne "B"}
<table cellspacing="0" cellpadding="0">
<tr>
	<td>{include file="buttons/add_to_cart.tpl" style="button" href="javascript: if(FormValidation()) document.orderform.submit();"}</td>
	<td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
	<td>
{if ($login ne "" || $config.Wishlist.add2wl_unlogged_user eq 'Y') && $active_modules.Wishlist ne ""}
{include file="customer/add2wl.tpl"}
{/if}
	</td>
</tr>
</table>
{else}
{$lng.txt_pconf_product_is_bundled}
{/if}
{if $smarty.get.pconf ne ""}
<br /><br />
<input type="hidden" name="slot" value="{$smarty.get.slot}" />
<input type="hidden" name="addproductid" value="{$product.productid}" />
{include file="buttons/button.tpl" button_title=$lng.lbl_pconf_add_to_configuration style="button" href="javascript:if (FormValidation()) `$ldelim`document.orderform.productid.value='`$smarty.get.pconf`';document.orderform.action='pconf.php';document.orderform.submit()`$rdelim`"}
<br />
{$lng.txt_add_to_configuration_note}
<br />
{/if}
{else}
{include file="submit_wo_js.tpl" value=$lng.lbl_add_to_cart}
{/if}
{/if}
{if $active_modules.Feature_Comparison ne ""}
{include file="modules/Feature_Comparison/product_buttons.tpl"}
{/if}
<br /><br />
</td>
</tr></table>
</td>
<td align="right" valign="top" width="60" id="save_percent_box"{if $product.taxed_price >= $product.list_price} style="display: none;"{/if}>
{if $product.taxed_price gt 0 and $product.list_price gt 0}
<table width="60" cellspacing="1" cellpadding="2">
<tr>
	<td class="SaveMoneyLabel">
<br />
{math equation="100-(price/lprice)*100" price=$product.taxed_price lprice=$product.list_price format="%3.0f" assign=discount}
&nbsp;<span id="save_percent">{ $discount }</span>%
	</td>
</tr>
</table>
{/if}
</td>
</tr>
</table>
<input type="hidden" name="productid" value="{$product.productid}" />

<input type="hidden" name="cat" value="{$smarty.get.cat|escape:"html"}" />
<input type="hidden" name="page" value="{$smarty.get.page|escape:"html"}" />
</form>
{/capture}
{include file="dialog.tpl" title=$product.producttitle content=$smarty.capture.dialog extra='width="100%"'}
{/if}
{if $active_modules.Magnifier ne "" && ($config.Magnifier.magnifier_image_popup ne 'Y' || $js_enabled ne 'Y')}
<p />
{include file="modules/Magnifier/product_magnifier.tpl" productid=$product.productid}
{/if}
{if $config.Appearance.send_to_friend_enabled eq 'Y'}
<p />
{include file="customer/main/send_to_friend.tpl" }
{/if}
{if $active_modules.Detailed_Product_Images ne "" && ($config.Detailed_Product_Images.det_image_popup ne 'Y' || $js_enabled ne 'Y')}
<p />
{include file="modules/Detailed_Product_Images/product_images.tpl" }
{/if}
{if $active_modules.Upselling_Products ne ""}
<p />
{include file="modules/Upselling_Products/related_products.tpl" }
{/if}
{if $active_modules.Recommended_Products ne ""}
<p />
{include file="modules/Recommended_Products/recommends.tpl" }
{/if}
{if $active_modules.Customer_Reviews ne ""}
<p />
{include file="modules/Customer_Reviews/vote_reviews.tpl" }
{/if}
{if $active_modules.Product_Options ne '' && $product_options ne ''}
<script type="text/javascript" language="JavaScript 1.2">
<!--
check_options();
-->
</script>
{/if}

longhorn180 · #7 08-23-2006, 07:05 AM

Then I went to skin1.css and changed the PImgBox tag from the original code below:

Code:

.PImgBox {
	TEXT-ALIGN: left;
	VERTICAL-ALIGN: top;
	WIDTH: 100px;
	PADDING-RIGHT: 8px;
}

To this, as well as adding the css for the img itself:

Code:

.PImgBox {
	TEXT-ALIGN: left;
	VERTICAL-ALIGN: top;
	PADDING-RIGHT: 8px;
}
.PImgBox img {
	FLOAT: left;
	PADDING-RIGHT: 4px;
	padding-bottom: 4px;
}

Depending on how large the image is will determine how much text will wrap underneath it. Hopefully this will give you what you're looking for.

jdedba · #8 08-24-2006, 03:39 PM

Thank you so much for customizing the code for me. It works almost greatly.

The main problem is that if the description has html bullets ( <li> ... </li> ) or order list, they are overlapped by the image, and may not be visuable.

In 4.1.X, x-cart has the html editor for writing description, so it is easy to make bullets in the description.

I tried to make

Code:

.PImgBox img {
	FLOAT: left;
	PADDING-RIGHT: 16px;
	padding-bottom: 4px;
}

but, it seems it is not a solid solution, because large size image still can overlap the bullets.

The little problem is there is a space in the first line of the description. it shows

Code:

 first line ...
second line...

in stead of

Quote:

first line ...
second line...

Thanks again.

longhorn180 · #9 08-25-2006, 04:48 AM

Insert this code into your skin1.css right below the other code for .PImgBox and this should take care of it.

Code:

.PImgBox ul, .PImgBox ol {
    margin: 0px;
    padding: 0px;
}

This sets the margins and the padding for unordered lists and ordered lists to zero, but only within this div tag. This should solve your overlapping issues.

cutterc · #10 10-11-2006, 06:05 PM

Hey guys...this is exactly what I want to do as well and I went through my templates and made the same changes...but one thing that mine does is the HR is now quite thick from what is called out as only 1 px high and now some of my buttons "add to cart" and "add to wishlist" is missing some of the repeat images that make up the center section of the button... Any help on this...

Also this is probably not the best place for this question but since we are on the topic of the products page...I have varients for my products with associated weight for each...now weights over 1.0 show but under 1.0 do not the whole line dissappers..the only limitation to this is if the weight is 0.00 then it will not show but there is an associated weith that is greater than 0.00...any thoughts on this as well would be great... I will attach my product.tpl list in the next reply...

Thanks