Aligning products
 

I want to edit the alignment of the product thumbnails when they are three across. Which part of this code do I need to edit? I want them to line up either at the top of the thumbnail images or at the bottom where the price is.

Thanks in advance!

Re: Aligning products
 

Could also be this template:

Re: Aligning products
 

Wow that is a lot of tables! Is that an add-on skin or have you done some customizing? The first thing you need to do is get rid of half of those nested tables. products_t.tpl is the one you want...and you want to set the table cell that contains the image to this:

<td style="vertical-align: top;">

Re: Aligning products
 

Thanks, Balinor. That's an add-on. What do you mean by get rid of nested tables? (And what are nested tables?)

Thank you!

Re: Aligning products
 

You have tables inside of tables inside of tables. Makes for really bloated code and makes it more difficult to control the display. You could probably get rid of most of them in that particular instance.

Re: Aligning products
 

Looks great in IE, but Mozilla / Firefox ignore it. Sure would be nice if these different browsers could settle on some standards.

Thanks again!

Re: Aligning products
 

How do you know which tables are extraneous?

Re: Aligning products
 

Well that's the thing...Firefox, Opera and Safari DO follow the standards...IE does not :(

Re: Aligning products
 

Yeah - you're right about that. Is there a code that is equivalent to what you gave me that would work in Firefox? If so, can they be used together? Or do I have to make a choice between which browser is going to get the right appearance? Although, it's unfortunately not much of an option which choice is made. Most people still use IE.

Personally, I've only ever used it to check stuff like this. For personal use, I've always been a Mozilla fan.

Thanks again :)

Re: Aligning products
 

All of those tables can be removed except the one that is used to create the three columns that display your products. That way, you have one cell containing one thumbnail. I bet the code I gave you will work once you get rid of those tables, as IE tends to add unnecessary padding to each table.

Re: Aligning products
 

Thank you! :)

Re: Aligning products
 

I have a similar problem. I have tried to put the section "style="vertical-align: top;" into the products_t.tpl but wherever I put it, it doesn't appear to come out correctly. I can align the text in the 3 column layout but not the thumbs under the text. If it has a one line text in one thumb and the other product has a two or more line product name, then the thumbs are not inline with each other. I am re-inventing the wheel and starting my site over so it is still in the "basic" xcart wrapper. I have added CSS to it but am going slowly to try and get it right.

Please look at http://www.etekmart.com/xcart/home.php to see what it looks like

This is my products_t.tpl file:

{* $Id: products_t.tpl,v 1.30.2.12 2008/07/15 12:07:40 ferz Exp $ *}
<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<td>

<table width="100%" cellpadding="5" cellspacing="1">

{math equation="floor(100/x)" x=$config.Appearance.products_per_row assign="width"}

{section name=product loop=$products}
{assign var="discount" value=0}

{if %product.index% is div by $config.Appearance.products_per_row}
<tr>
{assign var="cell_counter" value=0}
{/if}

{math equation="x+1" x=$cell_counter assign="cell_counter" }

<td width="{$width}%" class="PListCell">

<a href="product.php?productid={$products[product].productid}&amp;cat={$cat}&amp;page={$navigation_p age}" class="ProductTitle">{$products[product].product}</a><br />
{if $config.Appearance.display_productcode_in_list eq "Y" and $products[product].productcode ne ""}
{$lng.lbl_sku}: {$products[product].productcode}<br />
{/if}
<div class="xroundedthumb">
<b class="xtop">
<b class="xb1"></b>
<b class="xb2 color_a"></b>
<b class="xb3 color_a"></b>
<b class="xb4 color_a"></b>
</b>
<div class="xboxcontent">
<h1 class="color_a">
{if $link_href}<a href="{$link_href}">{/if}
{$menu_title}
{if $link_href}
</a>
{/if}
</h1>
<div>
<p>
<a href="product.php?productid={$products[product].productid}&amp;cat={$cat}&amp;page={$navigation_p age}">{include file="product_thumbnail.tpl" productid=$products[product].productid image_x=$products[product].tmbn_x|default:$config.Appearance.thumbnail_width image_y=$products[product].tmbn_y product=$products[product].product tmbn_url=$products[product].tmbn_url}
</a>
{if $active_modules.Special_Offers ne "" and $products[product].have_offers}
{include file="modules/Special_Offers/customer/product_offer_thumb.tpl" product=$products[product]}
{/if}
</p>
</div>
</div>
<b class="xbottom">
<b class="xb4"></b>
<b class="xb3"></b>
<b class="xb2"></b>
<b class="xb1"></b>
</b>
</div>
{if $printable neq 'Y'}
<a href="product.php?productid={$products[product].productid}&amp;cat={$cat}&amp;page={$navigation_p age}">{$lng.lbl_see_details}</a>
{/if}
{if $products[product].product_type ne "C"}
<br />
<br />
{if $active_modules.Subscriptions ne "" and $products[product].catalogprice}
{include file="modules/Subscriptions/subscription_info_inlist.tpl"}
{else}
{if ($config.General.unlimited_products ne "Y" && ($products[product].avail le 0 or $products[product].avail lt $products[product].min_amount) && $products[product].variantid) or ($products[product].taxed_price ne 0 or ($products[product].variantid && $products[product].variants_has_price) or ($active_modules.Special_Offers ne "" and $products[product].use_special_price ne ""))}
{if $products[product].taxed_price ne 0 or ($products[product].variantid && $products[product].variants_has_price)}
{if $products[product].list_price gt 0 and $products[product].taxed_price lt $products[product].list_price}
{math equation="100-(price/lprice)*100" price=$products[product].taxed_price lprice=$products[product].list_price format="%3.0f" assign=discount}
{if $discount gt 0}
&nbsp;<font class="MarketPrice">{$lng.lbl_market_price}: <s>
{include file="currency.tpl" value=$products[product].list_price}
</s></font><br />
{/if}
{/if}
<font class="ProductPrice">{$lng.lbl_our_price}: {include file="currency.tpl" value=$products[product].taxed_price}</font><br /><font class="MarketPrice">{include file="customer/main/alter_currency_value.tpl" alter_currency_value=$products[product].taxed_price}</font>{if $discount gt 0}{if $config.General.alter_currency_symbol ne ""},{/if} {$lng.lbl_save_price} {$discount}%{/if}
{if $products[product].taxes}<br />{include file="customer/main/taxed_price.tpl" taxes=$products[product].taxes is_subtax=true}{/if}
{/if}
{if $active_modules.Special_Offers ne "" and $products[product].use_special_price ne ""}
{include file="modules/Special_Offers/customer/product_special_price.tpl" product=$products[product]}
{/if}
{else}
<font class="ProductPrice">{$lng.lbl_enter_your_price}</font>
{/if}
{/if}
{if $active_modules.Feature_Comparison ne '' && $products[product].fclassid > 0}
<div align="center" style="width: 100%; padding-top: 10px;">
{include file="modules/Feature_Comparison/compare_checkbox.tpl" id=$products[product].productid}
</div>
{/if}
{*** Uncomment it if you need 'Buy Now' button ***
{if $usertype eq "C" and $config.Appearance.buynow_button_enabled eq "Y"}
{include file="customer/main/buy_now.tpl" product=$products[product]}
{/if}
*** Uncomment it if you need 'Buy Now' button ***}
{/if}
</td>

{capture name=prod_index}
{math equation="index+x+1" index=%product.index% x=$config.Appearance.products_per_row}
{/capture}
{if $smarty.capture.prod_index is div by $config.Appearance.products_per_row }
</tr>
{/if}

{/section}

{if $cell_counter lt $config.Appearance.products_per_row}
{section name=rest_cells loop=$config.Appearance.products_per_row start=$cell_counter}
<td class="SectionBox">&nbsp;</td>

{/section}
</tr>
{/if}

</table>
</td>
</tr>
</table>
{if $active_modules.Feature_Comparison ne '' && $products && $printable ne 'Y' && $products_has_fclasses && $js_enabled}
{include file="modules/Feature_Comparison/compare_selected_button.tpl"}
{/if}

Re: Aligning products
 

Did you figure this out chetlucas? I am fighting the same issue right now.

Any help would be much appreciated!!