Email Cross browser and cross client bugs - email

Question

I'm creating an email template for a client. There are so many small bugs.
I can't get the side images to line up without having space between them and the tables width won't match up.
Check out the cross client previews here:
[removed]
and here is my code:
<table width="600" bgcolor="000000" style="padding-left: 14xpx;">
<tr>
<td align="left" cellspacing="0" cellpadding="0" style="padding: 5px 0 0 0;margin-bottom: 0;">
<ul style="padding:0;">
<li style="list-style: none;">
<span><img src="http://www.kieshajewel.com/sirio/left-img-01.jpg" alt=" Join Executive Chef Massimo Bebber" style="margin-bottom: -4px !important;"/></span></li>
<li style="list-style: none;"><span><img src="http://www.kieshajewel.com/sirio/left-img-02.jpg" alt=" Join Executive Chef Massimo Bebber" style="margin-bottom: -4px !important;"/></span><singleline /></li>
<li style="list-style: none;"><span><img src="http://www.kieshajewel.com/sirio/left-img-03.jpg" alt=" Join Executive Chef Massimo Bebber" style="margin-bottom: -4px !important;"/></span></li>
</ul>
</td>
<td align="left" cellspacing="0" cellpadding="0" style="padding: 10px 0 0 0; position: relative; left: -5px;">
<span>
<a href="http://siriony.com/sample-page/chef-massimo-bebber/" style="border: none !imporant;">
<img src="http://www.kieshajewel.com/sirio/chef-massimo-bebber.jpg" alt-"Sirio Chef" /></a>
</span>
</td>
<td align="left">
<img src="http://www.kieshajewel.com/sirio/sirio-thumbnails.png" alt="Sirio Ristorante" />
</td>
</tr>
</table>
<table width="605" bgcolor="000000" style="margin-top: -20px;">
<tr>
<td align="left"><img src="http://www.kieshajewel.com/sirio/lines.gif" /></td>
</tr>
</table>
<table width="606" bgcolor="000000" style="">
<tr>
<td align="left"> <img src="http://www.kieshajewel.com/sirio/footer-01.gif" alt="Reserve Now" />
<img src="http://www.kieshajewel.com/sirio/footer-02.gif" alt="Reserve Now" />
<img src="http://www.kieshajewel.com/sirio/footer-03.gif" alt="Reserve Now" />
<img src="http://www.kieshajewel.com/sirio/footer-04.gif" alt="Reserve Now" />
<img src="http://www.kieshajewel.com/sirio/footer-05.gif" alt="Reserve Now" />
<img src="http://www.kieshajewel.com/sirio/footer-06.gif" alt="Reserve Now" />
</td>
</tr>
</table>

Answer 1

There are so many problems in what you posted it's hard to tell exactly what it is you were trying to do.
The following is meant to be harsh:
First off, get everything laid out in the right spot before you start randomly adding negative positioning styles; there was no reason for that. Second, you might want to pick up a book on html and css before you take on another client. You have quite a bit to learn. Pay attention to text layout, image alignment and cell positioning.
The following gets rid of most of the garbage.
<table width="600" bgcolor="000000" style="padding-left: 14px;">
<tr>
<td align="left" valign="top" cellspacing="0" cellpadding="0" style="padding:0px;margin:0px;">
<img src="http://www.kieshajewel.com/sirio/left-img-01.jpg" alt=" Join Executive Chef Massimo Bebber" style="border:0px;margin:0px;" /><br />
<img src="http://www.kieshajewel.com/sirio/left-img-02.jpg" alt=" Join Executive Chef Massimo Bebber" style="border:0px;margin:0px;"/><br />
<img src="http://www.kieshajewel.com/sirio/left-img-03.jpg" alt=" Join Executive Chef Massimo Bebber" style="border:0px;margin:0px;"/>
</td>
<td align="left" valign="top" cellspacing="0" cellpadding="0" style="padding:0px;margin:0px;">
<span>
<img src="http://www.kieshajewel.com/sirio/chef-massimo-bebber.jpg" alt-"Sirio Chef" style="border:0px;" />
</span>
</td>
<td align="left" valign="top">
<img src="http://www.kieshajewel.com/sirio/sirio-thumbnails.png" alt="Sirio Ristorante" />
</td>
</tr>
<tr>
<td align="left" valign="top" colspan="3"><img src="http://www.kieshajewel.com/sirio/lines.gif" /></td>
</tr>
<tr>
<td align="left" valign="top" colspan="3"> <img src="http://www.kieshajewel.com/sirio/footer-01.gif" alt="Reserve Now" />
<img src="http://www.kieshajewel.com/sirio/footer-02.gif" alt="Reserve Now" />
<img src="http://www.kieshajewel.com/sirio/footer-03.gif" alt="Reserve Now" />
<img src="http://www.kieshajewel.com/sirio/footer-04.gif" alt="Reserve Now" />
<img src="http://www.kieshajewel.com/sirio/footer-05.gif" alt="Reserve Now" />
<img src="http://www.kieshajewel.com/sirio/footer-06.gif" alt="Reserve Now" />
</td>
</tr>
</table>

Answer 2

99% of the time there are spaces between images, it is because people forget display:block; on the image tags. In this case though, you are floating your images, which is the rare case where display block is not needed. I wouldn't recommend this technique in html email however, unless there is a lot of spare room, as different clients have slightly different spacing between images.
Put each of your images in their own table cell, and it should fix the problems:
<td width="">
<img alt="" src="" width="" height="" style="margin: 0; border: 0; padding: 0; display: block;">
</td>
If you still have issues, repost your code and I'll take another look at that point.