HTML + Tables in ebay

Associate
Joined
26 Dec 2003
Posts
2,260
Location
UK
Hi all,

I'm on the verge of ripping my hair out! I've created a template for an ebay ad, so basically all I have to do is put in the correct text for the item. When I preview the advert in Firefox/IE, it's almost spot on;

Link to page hosted on my site

So I go ahead and put the code into ebay and start the ad, but it comes out completely messed up, especially in IE7 :mad: It generates massive gaps between the tables? The exact code can be seen in the link above.

messedup.jpg


I've had to make the page small, just so I can show you how huge the gaps are in IE7. I just don't understand how it is creating SUCH a big gap for no reason!

I would be grateful if anyone could take a look and help me out :)
 
Last edited:
Grabbing at straws here but it could be that the html code is invalid for your tables.


Missing <tr>
<td bgcolor="#FFFFFF" colspan="3">
<table>
<td width="20%" align="right">...'Are the best processors for gaming'...</td>
<td width="60%" align="center"><img src="http://www.smg-computers.com/hosted/ebay/case.jpg" alt="case" align="top"> </td>
<td width="20%">...'Are the best processors for gaming'... </td>

</table>
</td>

take out the empty <p> tag
<tr>
<td bgcolor="#FFFFFF" >Warranty</td>

<td bgcolor="#FFFFFF" >AMD</td>
</tr>
<p>

No idea if that's the problem but worth a try :)
 
I just removed the <p> and added the table row, but still no luck :(

I've updated the code a bit, after running it through the validator. It still messes up, but at least it's almost valid now :p

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Welcome to SMG Computers</title>
<style type="text/css">
<!--
body {font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
background-image: url(http://www.smg-computers.com/images/big.jpg);
background-attachment: fixed;
}
-->
</style>
</head>
<body>
<table style="border-collapse: collapse; font-family:Verdana; font-size:10pt; color:#111111" align="center">
<tr>
<td><img src="http://www.smg-computers.com/images/header.jpg" alt="case" width="700" height="175" border="1"></img></td>
</tr>
</table>
<table style="border-collapse: collapse; font-family:Verdana; font-size:10pt; color:#111111" width="700" border="1" align="center" cellspacing="0" cellpadding="0">
<tr>
<td colspan="2" align="center" bgcolor="#FFFFFF" ><h2>Title </h2>
<h4>Subheading</h4>
</td>
</tr>
<tr>
<td bgcolor="#FFFFFF" colspan="3">
<table style="border-collapse: collapse; font-family:Verdana; font-size:10pt; color:#111111">
<tr>
<td width="20%" align="right">...'Are the best processors for gaming'...</td>
<td width="60%" align="center"><img src="http://www.smg-computers.com/hosted/ebay/case.jpg" alt="case"></img></td>
<td width="20%">...'Are the best processors for gaming'... </td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="2" bgcolor="#EEEEEE" align="center"> <h3>Specification</h3> </td>
</tr>
<tr>
<td bgcolor="#FFFFFF" width="33%" >CPU</td>
<td bgcolor="#FFFFFF">AMD</td>
</tr>
<tr>
<td bgcolor="#EEEEEE" >Memory</td>
<td bgcolor="#EEEEEE" >AMD</td>
</tr>
<tr>
<td bgcolor="#FFFFFF" >Graphics</td>
<td bgcolor="#FFFFFF" >AMD</td>
</tr>
<tr>
<td bgcolor="#EEEEEE" >Motherboard</td>
<td bgcolor="#EEEEEE" >AMD</td>
</tr>
<tr>
<td bgcolor="#FFFFFF" >Hard Drive</td>
<td bgcolor="#FFFFFF" >AMD</td>
</tr>
<tr>
<td bgcolor="#EEEEEE" >Optical Drives</td>
<td bgcolor="#EEEEEE" >AMD</td>
</tr>
<tr>
<td bgcolor="#FFFFFF" >Power Supply</td>
<td bgcolor="#FFFFFF" >AMD</td>
</tr>
<tr>
<td bgcolor="#EEEEEE" >Case</td>
<td bgcolor="#EEEEEE" >AMD</td>
</tr>
<tr>
<td bgcolor="#FFFFFF" >Audio</td>
<td bgcolor="#FFFFFF" >AMD</td>
</tr>
<tr>
<td bgcolor="#EEEEEE" >Software</td>
<td bgcolor="#EEEEEE" >AMD</td>
</tr>
<tr>
<td bgcolor="#FFFFFF" >Warranty</td>
<td bgcolor="#FFFFFF" >AMD</td>
</tr>
<tr>
<td bgcolor="#EEEEEE" colspan="2"><br/>
<table style="border-collapse: collapse; font-family:Verdana; font-size:10pt; color:#111111" align="center" width="360" bgcolor="#FFFFFF" bordercolor="#000000" border="1" cellspacing="0" cellpadding="1">

<tr>
<td colspan="2" align="center">Processor</td>
</tr>
<tr>
<td width="33%">More info</td>
<td>Even more</td>
</tr>

</table>
<br/>
<table style="border-collapse: collapse; font-family:Verdana; font-size:10pt; color:#111111" align="center" width="360" bgcolor="#FFFFFF" bordercolor="#000000" border="1" cellspacing="0" cellpadding="1">

<tr>
<td colspan="2" align="center">Memory</td>
</tr>
<tr>
<td width="33%">More info</td>
<td>Even more</td>
</tr>

</table>
<br/>
<table style="border-collapse: collapse; font-family:Verdana; font-size:10pt; color:#111111" align="center" width="360" bgcolor="#FFFFFF" bordercolor="#000000" border="1" cellspacing="0" cellpadding="1">

<tr>
<td colspan="2" align="center">Graphics Card</td>
</tr>
<tr>
<td width="33%">More info</td>
<td>Even more</td>
</tr>

</table>
<br/>
<table style="border-collapse: collapse; font-family:Verdana; font-size:10pt; color:#111111" align="center" width="360" bgcolor="#FFFFFF" bordercolor="#000000" border="1" cellspacing="0" cellpadding="1">

<tr>
<td colspan="2" align="center">Optical Drive</td>
</tr>
<tr>
<td width="33%">More info</td>
<td>Even more</td>
</tr>

</table>
<br/>
<table style="border-collapse: collapse; font-family:Verdana; font-size:10pt; color:#111111" align="center" width="360" bgcolor="#FFFFFF" bordercolor="#000000" border="1" cellspacing="0" cellpadding="1">

<tr>
<td colspan="2" align="center">Hard Drive</td>
</tr>
<tr>
<td width="33%">More info</td>
<td>Even more</td>
</tr>

</table>
<br/>
<table style="border-collapse: collapse; font-family:Verdana; font-size:10pt; color:#111111" align="center" width="360" bgcolor="#FFFFFF" bordercolor="#000000" border="1" cellspacing="0" cellpadding="1">

<tr>
<td colspan="2" align="center">What You Will Receive</td>
</tr>
<tr>
<td>Even more</td>
</tr>

</table>
<br/>
<table style="border-collapse: collapse; font-family:Verdana; font-size:10pt; color:#111111" align="center" width="360" bgcolor="#FFFFFF" bordercolor="#000000" border="1" cellspacing="0" cellpadding="1">

<tr>
<td colspan="2" align="center">Payment</td>
</tr>
<tr>
<td>Even more</td>
</tr>

</table>
<br/>
<table style="border-collapse: collapse; font-family:Verdana; font-size:10pt; color:#111111" align="center" width="360" bgcolor="#FFFFFF" bordercolor="#000000" border="1" cellspacing="0" cellpadding="1">

<tr>
<td colspan="2" align="center">Delivery and Insurance</td>
</tr>
<tr>
<td>Even more</td>
</tr>

</table>
<br/>
<table style="border-collapse: collapse; font-family:Verdana; font-size:10pt; color:#111111" align="center" width="360" bgcolor="#FFFFFF" bordercolor="#000000" border="1" cellspacing="0" cellpadding="1">

<tr>
<td colspan="2" align="center">Warranty Terms and Conditions</td>
</tr>
<tr>
<td>Even more</td>
</tr>

</table>
<br/>
<table style="border-collapse: collapse; font-family:Verdana; font-size:10pt; color:#111111" align="center" width="360" bgcolor="#FFFFFF" bordercolor="#000000" border="1" cellspacing="0" cellpadding="1">

<tr>
<td colspan="2" align="center">Money Back Guarantee</td>
</tr>
<tr>
<td>Even more</td>
</tr>

</table>
<br/>
<table style="border-collapse: collapse; font-family:Verdana; font-size:10pt; color:#111111" align="center" width="360" bgcolor="#FFFFFF" bordercolor="#000000" border="1" cellspacing="0" cellpadding="1">

<tr>
<td colspan="2" align="center">Contact Us</td>
</tr>
<tr>
<td>Even more</td>
</tr>

</table>
<br/>
</td>
</tr>
</table>
</body>
</html>
 
Anyone any ideas? I've contacted ebay about the problem, but I don't expect a reply from them anytime soon :(
 
Just figured out how to get around it, but I still don't understand what is causing it.

SCENARIO 1 (WORKS):
Open the working html template in firefox. Copy the source from firefox and paste it into the ebay ad.

SCENARIO 2 (DOESN'T WORK):
Open working html template in dreamweaver/SciTE. Copy the source from either of those two programs and paste into the ebay ad.

The only difference I can think of is the source code through firefox is read only, but you can edit the source in dreamweaver/SciTE. So what is happening to the source code when I try to copy/paste it from DW/SciTE?
 
Haha confused me too, all I did was remove all coding and formatting then make a table with one cell. Inside that cell I did all the formatting of colours, alignments, etc.

Pasted that code into ebay and worked on both browsers, no point complaining and trying to sort it by ebay etc. They've changed something though.

Quick, easy fix anyway!
 
Back
Top Bottom