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:
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?
 
Back
Top Bottom