PDA

View Full Version : Tiny html coding issue!


Streaky dwarf
07-29-2011, 05:04 PM
Hey again guys,

I posted this a while back, thought I had solved it, but I haven't. Can someone look at the coding below and possibly work out what I'm doing wrong?

In a nutshell the middle section under "Other things we like" and "Payment stuff" is slightly out of line by a couple of pixels and I can't work out why. I've tried changing the sizes and all sorts, looking for buffers but I'm not sure what's causing it. All the pictures are of the right size and stuff. IF anyone could have a look and help I would really appreciate it.

Thanks again and coding is below;

body {
background-color: #B4489D;
.Terms { font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-style: normal;
}
</style>
</head>
<body>
<table width="720" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td colspan="3"><img src="http://www.zoltarstoysandcollectibles.info/Images/other-items.jpg" width="355" height="46" alt="other things" /></td>
<td width="10">&nbsp;</td>
<td colspan="3"><img src="http://www.zoltarstoysandcollectibles.info/Images/Payment.jpg" width="355" height="46" alt="payment" /></td>
</tr>
<tr>
<td width="16" bgcolor="#FFFFFF" class="Terms">&nbsp;</td>
<td width="323" valign="top" bgcolor="#FFFFFF" class="Terms"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center"><img src="http://www.zoltarstoysandcollectibles.info/Images/Heman.jpg" width="100" height="141" alt="he man" /></td>
<td align="center"><img src="http://www.zoltarstoysandcollectibles.info/Images/heroclix.jpg" width="100" height="141" alt="hero" /></td>
<td align="center"><img src="http://www.zoltarstoysandcollectibles.info/Images/cobra.jpg" width="100" height="141" alt="cobra" /></td>
</tr>
<tr>
<td align="center"><img src="http://www.zoltarstoysandcollectibles.info/Images/lego.jpg" width="100" height="141" alt="lego" /></td>
<td align="center"><img src="http://www.zoltarstoysandcollectibles.info/Images/thundercats.jpg" width="100" height="141" alt="tunder" /></td>
<td align="center"><img src="http://www.zoltarstoysandcollectibles.info/Images/transformers.jpg" width="100" height="141" alt="trans" /></td>
</tr>
<tr>
<td align="center"><img src="http://www.zoltarstoysandcollectibles.info/Images/Comics.jpg" width="100" height="141" alt="comics" /></td>
<td align="center"><img src="http://www.zoltarstoysandcollectibles.info/Images/Star-wars.jpg" width="100" height="141" alt="Star Wars" /></td>
<td align="center"><img src="http://www.zoltarstoysandcollectibles.info/Images/retro-games.jpg" width="100" height="141" alt="retro" /></td>
</tr>
</table></td>
<td width="16" valign="top" bgcolor="#FFFFFF" class="Terms">&nbsp;</td>
<td valign="top" class="Terms">&nbsp;</td>
<td width="16" valign="top" bgcolor="#FFFFFF" class="Terms">&nbsp;</td>
<td width="323" align="center" valign="top" bgcolor="#FFFFFF" class="Terms"><h1><strong>Payment through Paypal</strong></h1>
<p><img src="http://www.zoltarstoysandcollectibles.info/Images/paypal_verified.jpg" width="150" height="160" alt="paypal" /></p>
<p>After you have won an auction or used the BUY NOW option, an instruction email will be sent to your eBay registered email address. After &quot;Checkout Complete&quot;, you'll be redirected to Paypal to pay the bill. This way, the order can be automatically downloaded after payment clear.</p></td>
<td width="16" bgcolor="#FFFFFF">&nbsp;</td>
</tr>
<tr class="Terms">
<td colspan="3"><img src="http://www.zoltarstoysandcollectibles.info/Images/smallbottom-bannerbanner_355x46.jpg" width="355" height="46" alt="small bottom" /></td>
<td>&nbsp;</td>
<td colspan="3"><img src="http://www.zoltarstoysandcollectibles.info/Images/smallbottom-bannerbanner_355x46.jpg" width="355" height="46" alt="small bottom" /></td>
</tr>
</table>
</body>
</html>

Corrosive
07-29-2011, 05:14 PM
I posted this a while back, thought I had solved it, but I haven't. Can someone look at the coding below and possibly work out what I'm doing wrong?



One word... 'Tables'. Notorious for doing this, hard to work with, not the right tools for the job and so on...

Streaky dwarf
07-29-2011, 05:41 PM
Oh, really?

Uh oh, I've used them everywhere!

gentleone
07-29-2011, 06:24 PM
Oh, really?

Uh oh, I've used them everywhere!

You use a HTML tag (table) to lay out your pages where it's not intended for. They do the job, but until a certain level and they are inconsistent cause they're simply not made for it. The table tag is invented to display tabular data. What you did now is building your pages like you've used excel for it. That sounds weird, huh?

Streaky dwarf
07-29-2011, 11:38 PM
Not that strange, just trying to get my head around it all! Thanks for responding though. Is there an easy way around the issue, considering my relative inexperience? Or would it be best to start again? Problem is the tutorials I've been using are all table based, think I went to re wrong tutorials!

Corrosive
07-30-2011, 07:27 AM
Try; http://htmldog.com/ and the beginner HTML and CSS tutorials. Don't worry, I also started with tables and then the guys on here made me 'see the light'.