I am trying to put an extremely simple table in my listing. So simple in fact here is an image of it as it should show according to FireFox and Internet Explorer:
So, now that we know how it is supposed to look, I turn my attention to creating a New Listing and copy the same HTML code on to the Auctiva Item Description editor and get this:
I can instantly see there is something wrong. Some of the rows, which I have highlighted in orange here:
are not the same 1px high they should be as shown in FF and IE.
The code for this is:
<table height="198" width="960">
<tbody>
<tr height="22">
<td colspan="2" style="width:110px;text-align:center;font-size:9pt;padding-right:4px;font-style:normal;color:#333333;background-color:#EAEAEA;">ABC</td>
</tr>
<tr height="12">
<td nowrap="nowrap" width="110"> </td>
<td> </td>
</tr>
<tr height="1">
<td width="110"> </td>
<td bgcolor="#EAEAEA" color="#333333" size="9" style="normal"> </td>
</tr>
<tr height="29">
<td style="width:110px;text-align:right;font-size:9pt;padding-right:4px;font-style:normal;color:#333333;background-color:#EAEAEA;">DEF</td>
<td style="padding: 0px 0px 0px 15px;">test1</td>
</tr>
<tr height="1">
<td nowrap="nowrap" width="110"> </td>
<td bgcolor="#EAEAEA" color="#333333" size="9" style="normal"> </td>
</tr>
<tr height="29">
<td style="width:110px;text-align:right;font-size:9pt;padding-right:4px;font-style:normal;color:#333333;background-color:#EAEAEA;">GHI</td>
<td style="padding: 0px 0px 0px 15px;">test2</td>
</tr>
<tr height="1">
<td nowrap="nowrap" width="110"> </td>
<td bgcolor="#EAEAEA" color="#333333" size="9" style="normal"> </td>
</tr>
</tbody>
</table>
OK, so this doesn't work. So I look for a compromise and come up with this, as shown in the Auctiva Item Description editor:
Looks kind of right. But wait. When I preview the listing, this is how it shows:
the colours have miraculously changed from a grey to black just by clicking on a preview button.
The code for this is:
<table border="0" cellpadding="1" cellspacing="1" height="100" style="width: 960px;" width="622">
<tbody>
<tr>
<th colspan="2" style="text-align: center; vertical-align: middle; background-color:#EAEAEA; font-size:9px; padding: 6px 0px">ABC</th>
</tr>
<tr>
<th colspan="2" style="height: 0px;"> </th>
</tr>
<tr>
<th style="height: 0px; width: 20%; text-align: right; vertical-align: middle; background-color:#EAEAEA; padding: 6px 15px 6px 0px; font-size:9px;">DEF</th>
<th style="height: 0px; width: 80%; text-align: left; border-width: 1px 0px; border-color: #EAEAEA #0; border-style:solid; padding: 6px 0px 6px 15px">test1</th>
</tr>
<tr>
<th style="height: 0px; width: 20%; text-align: right; vertical-align: middle; background-color:#EAEAEA; padding: 6px 15px 6px 0px; font-size:9px;">GHI</th>
<th style="height: 0px; width: 80%; text-align: left; border-width: 1px 0px; border-color: #EAEAEA #0; border-style:solid; padding: 6px 0px 6px 15px">test2</th>
</tr>
</tbody>
</table>
Has anyone else had issues where the listings have not displayed the same between the preview and the final listing? Does anyone know what can be done to resolve this?
Support does not see this as a problem and have advised I seek help from an HTML expert because it is not their software causing these issues!!
I'm glad I just didn't dive in and pay for a subscription without first trying this out. May seem trivial but if it ignores fundamentals and changes things without asking, what else can happen which is undesirable?
Thanks