X-Cart forums

[scoobie]

Hi,

Can anyone help me? I am trying to get the same look in IE as what I currently get in Firefox when displaying my products for a given category (see attachments). By sheer luck, the firefox version is basically the look I am after.

How do I get my borders in IE to collapse the same as in firefox? Also I have tried to put heights on my table cells to cater for a 3 line product description but nothing changes.

Any guidance would be gratefully appreciated. The code I have is pretty much the same as the original code. I didn't paste every line because of how long it is.


.pListCell {
BACKGROUND-COLOR: #ffffff;
TEXT-ALIGN: center;
PADDING: 10px;
VERTICAL-ALIGN: top;
}

<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<td>

<table width="100%" cellpadding="0" cellspacing="0" border="1" style="border-collapse: collapse">
{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" height="60">
<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}
{/if}
<table cellpadding="3" cellspacing="0" width="100%">
<tr>
<td nowrap="nowrap">
<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>
</td>
</tr>
</table>

</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}
</table>

</td>
</tr>
</table>

[scoobie]

Can any anyone help me my non collapsing table issue in IE? I have tried all the diagnostic tools to figure this one out to no avail. I just don't know where the spacing on the bottom comes from which may be causing the problem. I have no empty rows in the table. My html code is the same as originally posted with an addition of a height tag with of 100px on the td with the nowrap on it and removed the height="60" in red.

My dialog css looks like this:

TABLE.DialogBox {
WIDTH: 100%;
HEIGHT: 100%;
VERTICAL-ALIGN: top;
padding: 0;
}

TD.DialogBox {
BACKGROUND-COLOR: #ffffff;
TEXT-ALIGN: center;
PADDING: 5px;
}
.DialogBorder {
BACKGROUND-COLOR: #ff0066;
HEIGHT: 100%;
PADDING: 0;
}

TD.DialogTitleNew {
COLOR: #ffffff;
font-weight:bold;
FONT-SIZE: 14px;
BACKGROUND-COLOR: #ff0066;
height:32px;
VERTICAL-ALIGN: middle;
padding:1px;
PADDING-LEFT: 10px;
TEXT-ALIGN: left;
}

FONT.DialogTitle {
COLOR: #ffffff;
FONT-SIZE: 12px;
VERTICAL-ALIGN: bottom;
HEIGHT: 15px;
TEXT-ALIGN: left;
MARGIN-LEFT: 10px;
}

/*
Dialog info box
*/
TABLE.DialogInfo {
WIDTH: 85%;
TEXT-ALIGN: center;
}
.DialogInfoTitle {
COLOR: #FFFFFF;
FONT-WEIGHT: bold;
FONT-SIZE: 12px;
VERTICAL-ALIGN: bottom;
TEXT-ALIGN: left;
HEIGHT: 15px;
PADDING-TOP: 0px;
PADDING-BOTTOM: 0px;
PADDING-LEFT: 10px;
PADDING-RIGHT: 10px;
}
.DialogInfoTitleBorder {
BACKGROUND-COLOR: #081589;
PADDING: 0px;
VERTICAL-ALIGN: bottom;
HEIGHT: 15px;
}
.DialogInfoBorder {
BACKGROUND-COLOR: #081589;
PADDING: 0;
}
.DialogInfoIcon {
WIDTH: 16px;
HEIGHT: 16px;
}
.DialogInfoClose {
WIDTH: 15px;
HEIGHT: 13px;
}

Thanks,
Kylie