Problem with horizontal gaps in html email

I have been working on an html email for a few days trying to fix some thin horizontal gaps that appear between images in the left and right borders of the email.

I have tried style="display:block" and border collapse and margin. The layout involves several nested tables.

I would appreciate any advice you have to offer.

I am including the code for the full email below.

Thanks,

analyticsPierce

<custom name="opencounter" type="tracking">
<html>
<head  style="display: block;">
<title>Welcome to LikeMe.net</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body  bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"  style="display: block;">
  <!-- main table structure -->
<table width="852" height="1049" border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse;margin: 0 auto;">
       <tr style="vertical-align:top">
    <!-- left hand background -->
        <td background="http://image.exct.net/lib/fec515737c63017c/m/1/left_background.jpg" width="107" height="1049" alt="" border="0"></td>
        <td align="top" height="1049" width="630">
            <!-- middle column - email content table -->
            <table border="0" cellpadding="0" cellspacing="0" width="630" height="1049" style="border-collapse:collapse;margin: 0 auto;">
                   <tr height="25"><!-- email headers -->
                       <td style="text-align:center;vertical-align:top;" background="http://image.exct.net/lib/fec515737c63017c/m/1/background.gif" height="25" width="630">
            <span style="font-size:10px;color:#a5a5a5;font-family:Helvetica, Arial, sans-serif;"><img src="http://image.exct.net/lib/fec515737c63017c/m/1/spacer.gif" height="3" width="1" border="0" /><br>
            If you no longer wish to receive emails from LikeMe, please <a href="http://www.likeme.net/users/%%UniqueName%%/profile/subscription_center/edit?utm_source=WelcomeEmail&utm_medium=Email&utm_content=top_unsubscribe_link&utm_campaign=WelcomeEmail" style="color:#669933;text-decoration:none" target="_blank">unsubscribe</a><br>
            To ensure proper delivery of this email add <a href="mailto:info@likeme.net" style="color:#669933;text-decoration:none">info@likeme.net</a> to your address book</span>
            <!-- <br>
            Having trouble viewing this email? <a href="http://www.likeme.net?utm_source=WelcomeEmail&utm_medium=Email&utm_content=trouble_viewing_top&utm_campaign=WelcomeEmail" style="color:#669933;text-decoration:none">Click here</a>  -->
            </td></tr>
                   <tr width="630" height="92"><!-- LikeMe logo -->
                        <td width="630" height="92"><img src="http://image.exct.net/lib/fec515737c63017c/m/1/likeme_logo.jpg" width="630" height="92" alt="" border="0" /><br></td></tr>
                   <tr width="630" height="167"><!-- Intro copy -->
                        <td height="167" width="630">
                            <table border="0"  cellpadding="0" cellspacing="0" width="630" height="167"style="border-collapse:collapse;margin: 0 auto;">
                                   <tr height="167" width="26">    <!-- left border for intro copy -->
                                        <td height="167" width="26"><img src="http://image.exct.net/lib/fec515737c63017c/m/1/welcome_border_left.jpg" width="26" height="167" alt="" border="0" style="display:block" /></td>    <!-- main intro copy block -->
                                        <td height="167" width="579">
                                            <table border="0"  cellpadding="0" cellspacing="0" width="579" height="167"style="border-collapse:collapse;margin: 0 auto;">
                                   <tr style="vertical-align:top" width="579" height="23"><!-- Hey DisplayName -->
                                       <td width="579" hieght="23">
                                           <img src="http://image.exct.net/lib/fec515737c63017c/m/1/spacer.gif" height="1" width="17" border="0" /><span style="vertical-align:top;font-size:16px;color:#009ad7;font-weight:bold;font-family:Helvetica, Arial, sans-serif;">Hey %%FirstName%%,</span></td></tr>                <!-- horizontal rule -->
                                          <tr width="579" height="8">
                                       <td width="579" height="8"><img src="http://image.exct.net/lib/fec515737c63017c/m/1/horizontal_rule_long.jpg" width="579" height="8" alt="" border="0" /></td></tr><!-- Welcome to LikeMe -->
                                       <tr style="vertical-align:top" width="579" height="136">
                                           <td style="vertical-align:top" width="579" height="136">
                                           <img src="http://image.exct.net/lib/fec515737c63017c/m/1/spacer.gif" height="1" width="11" border="0" />
                                                           <span style="vertical-align:top;font-size:30px;font-weight:bold;color:#009ad7;font-family:Helvetica, Arial, sans-serif;line-height:120%;">Welcome to LikeMe</span><br>
                                                           <span style="font-family:Helvetica, Arial, sans-serif;font-size:14px;color:#7a7a7a">
                                                           <img src="http://image.exct.net/lib/fec515737c63017c/m/1/spacer.gif" height="1" width="15" border="0" />Here is your account information...</span><br>
                                                           <img src="http://image.exct.net/lib/fec515737c63017c/m/1/horizontal_rule_short.jpg" width="579" height="8" alt="" border="0" /><br>
                                                           <span style="font-family:Helvetica, Arial, sans-serif;font-size:12px;color:#7a7a7a">
                                                           <img src="http://image.exct.net/lib/fec515737c63017c/m/1/spacer.gif" height="5" width="18" border="0" />Your Display Name ::</span>
                                                           <span style="font-family:Helvetica, Arial, sans-serif;font-size:12px;color:#009ad7">%%DisplayName%%</span><br>
                                                           <span style="font-family:Helvetica, Arial, sans-serif;font-size:12px;color:#7a7a7a">
                                                           <img src="http://image.exct.net/lib/fec515737c63017c/m/1/spacer.gif" height="1" width="18" border="0" />Your Recommendation Profile :: </span>
                                                           <span style="font-family:Helvetica, Arial, sans-serif;font-size:12px;color:#009ad7;text-decoration:none"><a href="http://www.likeme.net/users/%%UniqueName%%/recommendations?utm_source=WelcomeEmail&utm_medium=Email&utm_content=recommendation_profile_link&utm_campaign=WelcomeEmail" style="text-decoration:none;font-size:12px;color:#669933" target="_blank">http://www.likeme.net/users/%%UniqueName%%/recommendations</a></span>
                                                           <img src="http://image.exct.net/lib/fec515737c63017c/m/1/spacer.gif" height="3" width="1" border="0" />
                                                           <img src="http://image.exct.net/lib/fec515737c63017c/m/1/horizontal_rule_short.jpg" width="579" height="8" alt="" border="0" /><br>
                                   <img src="http://image.exct.net/lib/fec515737c63017c/m/1/spacer.gif" height="3" width="1" border="0" /><br>
                                   <span style="font-family:Helvetica, Arial, sans-serif;font-size:14px;color:#7a7a7a">
                                                           <img src="http://image.exct.net/lib/fec515737c63017c/m/1/spacer.gif" height="15" width="18" border="0" />Follow these easy steps to get great recommendations.</span></td></tr>
                                            </table></td>
    <!-- right border for intro copy -->
                                     <td height="167" width="25"><img src="http://image.exct.net/lib/fec515737c63017c/m/1/welcome_border_right.jpg" width="25" height="167" alt="" border="0" style="display:block" /></td></tr>
                            </table></td></tr>
                   <tr height="394" width="630"><!-- pictures and numbered copy list -->
                            <td height="393" width="630">
                            <table border="0"  cellpadding="0" cellspacing="0" height="394" width="630" style="border-collapse:collapse;margin: 0 auto;">
                               <tr width="630" height="394"><!-- left border -->
                                    <td width="26" height="394">
                                                    <img src="http://image.exct.net/lib/fec515737c63017c/m/1/steps_border_left.jpg" width="26" height="394" alt="" border="0" /></td>
                                                <!-- main image -->
                                    <td style="vertical-align:top" width="255" height="394">
                                                    <img src="http://image.exct.net/lib/fec515737c63017c/m/1/steps_people_image.jpg" width="255" height="393" alt="" border="0" /></td>
                                        <!-- copy for numbered steps -->
                                    <td style="vertical-align:top" width="324" height="394">
                                        <span style="font-family:Helvetica, Arial, sans-serif;font-size:16px;font-weight:bold;color:#009ad7">1. Upload a profile picture</span><br>
                                        <span style="font-family:Helvetica, Arial, sans-serif;font-size:12px;color:#7a7a7a">Everyone likes to see who they are getting recommendations from.</span><br>
                                        <img src="http://image.exct.net/lib/fec515737c63017c/m/1/arrow.jpg" border="0" /><span style="font-family:Helvetica, Arial, sans-serif;font-size:12px;color:#669933">
                                        <a href="http://www.likeme.net/users/%%UniqueName%%/profile/photos?utm_source=WelcomeEmail&utm_medium=Email&utm_content=step1_photos_link&utm_campaign=WelcomeEmail" style="color:#669933;text-decoration:none" target="_blank">Upload that photo</a></span><br><br>
                                        <span style="font-family:Helvetica, Arial, sans-serif;font-size:16px;font-weight:bold;color:#009ad7">2. Tell us your favorites</span><br>
                                        <span style="font-family:Helvetica, Arial, sans-serif;font-size:12px;color:#7a7a7a">The more recommendations you add, the better the suggestions like me will send you.</span><br>
                                        <img src="http://image.exct.net/lib/fec515737c63017c/m/1/arrow.jpg" border="0" /><span style="font-family:Helvetica, Arial, sans-serif;font-size:12px;color:#669933">
                                        <a href="http://www.likeme.net/users/%%UniqueName%%/recommendations?utm_source=WelcomeEmail&utm_medium=Email&utm_content=step3_add_recommendations_link&utm_campaign=WelcomeEmail" style="color:#669933;text-decoration:none" target="_blank">Share your recommendations</a></span><br><br>
                                        <span style="font-family:Helvetica, Arial, sans-serif;font-size:16px;font-weight:bold;color:#009ad7">3. Add Inside Words</span><br>
                                        <span style="font-family:Helvetica, Arial, sans-serif;font-size:12px;color:#7a7a7a">Share the low down on all of your favorites.</span><br>
                                        <img src="http://image.exct.net/lib/fec515737c63017c/m/1/arrow.jpg" border="0" /><span style="font-family:Helvetica, Arial, sans-serif;font-size:12px;color:#669933">
                                        <a href="http://www.likeme.net/users/%%UniqueName%%/recommendations?utm_source=WelcomeEmail&utm_medium=Email&utm_content=step3_add_inside_word_link&utm_campaign=WelcomeEmail" style="color:#669933;text-decoration:none" target="_blank">Add some Inside Words</a></span><br><br>
                                        <span style="font-family:Helvetica, Arial, sans-serif;font-size:16px;font-weight:bold;color:#009ad7">4. Tell us about yourself</span><br>
                                        <span style="font-family:Helvetica, Arial, sans-serif;font-size:12px;color:#7a7a7a">You can keep that info private, but it will helpcustomize results.</span><br>
                                        <img src="http://image.exct.net/lib/fec515737c63017c/m/1/arrow.jpg" border="0" /><span style="font-family:Helvetica, Arial, sans-serif;font-size:12px;color:#669933">
                                        <a href="http://www.likeme.net/users/%%UniqueName%%/profile/about_me/edit?utm_source=WelcomeEmail&utm_medium=Email&utm_content=step4_tell_us_link&utm_campaign=WelcomeEmail" style="color:#669933;text-decoration:none" target="_blank">Go to your account settings</a></span><br><br>
                                        <span style="font-family:Helvetica, Arial, sans-serif;font-size:16px;font-weight:bold;color:#009ad7">5. Invite your friends</span><br>
                                        <span style="font-family:Helvetica, Arial, sans-serif;font-size:12px;color:#7a7a7a">You can do so using your email address book or<br>Facebook Connect.</span><br>
                                        <img src="http://image.exct.net/lib/fec515737c63017c/m/1/arrow.jpg" border="0" /><span style="font-family:Helvetica, Arial, sans-serif;font-size:12px;color:#669933">
                                        <a href="http://www.likeme.net/users/%%UniqueName%%/friends?utm_source=WelcomeEmail&utm_medium=Email&utm_content=step5_invite_friends_link&utm_campaign=WelcomeEmail" style="color:#669933;text-decoration:none" target="_blank">Invite your friends</a></span></td>
                                                  <!-- right border -->
                                             <td width="25" height="394"><img src="http://image.exct.net/lib/fec515737c63017c/m/1/steps_border_right.jpg" width="25" height="394" alt="" border="0" /></td></tr>
                                </table></td></tr>
                   <tr width="630" height="29"><!-- horizontal bar -->
                            <td height="29" width="630">
                                <img src="http://image.exct.net/lib/fec515737c63017c/m/1/steps_bottom_horizontal_rule.jpg" width="630" height="29" alt="" border="0" /></td></tr>
                   <tr width="26" height="79"><!-- FAQ and help -->
                            <td height="79" width="26">
                                <table border="0"  cellpadding="0" cellspacing="0" width="630" height="79" style="border-collapse:collapse;margin: 0 auto;">
                                   <tr width="630" height="79"><!-- left border -->
                                        <td width="26" height="79">
                                                    <img src="http://image.exct.net/lib/fec515737c63017c/m/1/faq_border_left.jpg" width="26" height="79" alt="" border="0" /></td>
                                                <!-- FAQ and help copy -->
                                        <td style="text-align:center;vertical-align:top" width="579" height="79">
                                                    <span style="font-family:Helvetica, Arial, sans-serif;font-size:11px;color:#7a7a7a">If you have any questions about using LikeMe, check out our FAQs or feel free to email us at <a href="mailto:help@likeme.net" style="text-decoration:none;color:#669933">help@likeme.net.</a></span><br><br>
                                        <span style="font-family:Helvetica, Arial, sans-serif;font-weight:bold;font-size:26px;color:#7a7a7a">The </span>
                                                    <span style="font-family:Helvetica, Arial, sans-serif;font-weight:bold;font-size:26px;color:#009ad7">Like</span>
                                                    <span style="font-family:Helvetica, Arial, sans-serif;font-weight:bold;font-size:26px;color:#f04e24">Me </span>
                                                    <span style="font-family:Helvetica, Arial, sans-serif;font-weight:bold;font-size:26px;color:#7a7a7a">Network</span><br>
                                        <span style="font-family:Helvetica, Arial, sans-serif;font-size:14px;color:#7a7a7a">People Helping People Get The Most Out Of Life.</span></td>
                                           <!-- right border -->
                                    <td width="25" height="79">
                                                    <img src="http://image.exct.net/lib/fec515737c63017c/m/1/faq_border_right.jpg" width="25" height="79" alt="" border="0" /></td></tr>
                         </table></td></tr>
                   <tr width="630" height="33"><!-- bottom border -->
                            <td height="33" width="630">
                                <img src="http://image.exct.net/lib/fec515737c63017c/m/1/faq_border_bottom.jpg" width="630" height="33" alt="" border="0" /></td></tr>
                   <tr width="630" height="218"><!-- footer copy -->
                        <td style="vertical-align:top" width="630" height="218">
                            <table border="0" cellpadding="0" cellspacing="0" width="630" height="218" background="http://image.exct.net/lib/fec515737c63017c/m/1/background.gif" style="vertical-align:top;border-collapse:collapse;margin: 0 auto;">
                                       <tbody><!-- <tr>
                                            <td><img src="http://image.exct.net/lib/fec515737c63017c/m/1/spacer.gif" alt="" height="15" width="1"></td>
                                            <td><img src="http://image.exct.net/lib/fec515737c63017c/m/1/spacer.gif" alt="" height="15" width="1"></td></tr> -->
                                       <tr background="http://image.exct.net/lib/fec515737c63017c/m/1/background.gif">
                                           <td background="http://image.exct.net/lib/fec515737c63017c/m/1/background.gif">
                                               <img src="http://image.exct.net/lib/fec515737c63017c/m/1/spacer.gif" alt="" height="1" width="20" border="0" /></td>
                                           <td style="vertical-align:top">
                                               <table  border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse;">
                                                       <tr>
                                                           <td>
                                                               <span style="font-family:Helvetica, Arial, sans-serif;font-size: 9px; color:#a5a5a5;">You're receiving this email because you're registered at %%Member_Busname%%. If you're receiving this email by mistake, please <a href="http://www.likeme.net/users/%%UniqueName%%/profile/subscription_center/edit?utm_source=WelcomeEmail&utm_medium=Email&utm_content=top_unsubscribe_link&utm_campaign=WelcomeEmail" alias="Manage Subscriptions" style="text-decoration: none; color: #669933;" target="_blank">unsubscribe</a>.<br><br></span></td></tr>
                                                       <tr>
                                                           <td>
                                                               <span style="font-family:Helvetica, Arial, sans-serif;font-size: 9px; color: #a5a5a5;">This email was sent to: <a href="%%Email Address%%" alias="%%Email Address%%" style="text-decoration: none; color:#669933;">%%Email Address%%</a>. <br>This email was sent by: %%Member_Busname%%, %%Member_Addr%% %%Member_City%%, %%Member_State%% %%Member_PostalCode%%<br><br></span></td></tr>
                                                       <tr>
                                                           <td>
                                                               <span style="font-family:Helvetica, Arial, sans-serif;font-size: 9px; color: #a5a5a5;">We respect your privacy - <a href="http://www.likeme.net/privacy" alt="View Privacy Policy" alias="View Privacy Policy" style="text-decoration: none; color: #669933;" target="_blank">view our policy</a> |
                                                               <a href="http://www.likeme.net/users/%%UniqueName%%/profile/subscription_center/edit" alias="Manage Subscriptions" style="text-decoration: none; color: #669933;" target="_blank">manage subscriptions</a> |
                                                               <a href="http://www.likeme.net/users/%%UniqueName%%/profile/subscription_center/edit" alias="Update Profile" style="text-decoration: none; color: #669933;" target="_blank">update profile</a> | ©2008-2009 LikeMe.net.</span></td></tr>
                                               </table></td></tr></tbody>
                                </table></td></tr>
            </table></td>
    <!-- right hand background -->
        <td background="http://image.exct.net/lib/fec515737c63017c/m/1/right_background.jpg" width="115" height="1049" alt=""></td></tr>
</table>
</body>
</html>

BThies BThies, 7 years ago

Too many issues to list or try and figure out.

Try this recoded version instead:   http://proofs.thiespublishing.com/likeme/LikeMe2.html

and the code used:

<custom name="opencounter" type="tracking">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Welcome to LikeMe.net</title>
</head>

<body style="margin:0px;">
<table width="630" align="center" cellpadding="0" cellspacing="0" border="0">
    <tr><!-- email headers -->
          <td colspan="3" align="center" valign="middle" background="http://image.exct.net/lib/fec515737c63017c/m/1/background.gif" height="31" width="630" style="font-size:10px; color:#a5a5a5; font-family:Helvetica, Arial, sans-serif;">
          <div align="center">If you no longer wish to receive emails from LikeMe, please <a href="http://www.likeme.net/users/%%UniqueName%%/profile/subscription_center/edit?utm_source=WelcomeEmail&utm_medium=Email&utm_content=top_unsubscribe_link&utm_campaign=WelcomeEmail" style="color:#669933; text-decoration:none" target="_blank">unsubscribe</a></div>
           <div align="center">To ensure proper delivery of this email add <a href="mailto:info@likeme.net" style="color:#669933;text-decoration:none">info@likeme.net</a> to your address book</div>
          </td>
    </tr>
    <tr>
        <td colspan="3"><img src="http://image.exct.net/lib/fec515737c63017c/m/1/likeme_logo.jpg" width="630" height="92" alt="" border="0" /></td>
    </tr>
    <tr>
        <td width="26" valign="top"><img src="http://image.exct.net/lib/fec515737c63017c/m/1/welcome_border_left.jpg" width="26" height="167" alt="" border="0" style="display:block" /></td>
        <td width="579" valign="top">
            <table width="579" cellpadding="0" cellspacing="0" border="0">
                <tr>
                    <td width="15">&nbsp;</td>
                    <td width="564" height="23" valign="top">
                        <div align="left" style="font-size:16px; color:#009ad7; font-family:Helvetica, Arial, sans-serif;"><b>Hey %%FirstName%%,</b></div>
                    </td>
                </tr>
                <tr>
                    <td colspan="2"><img src="http://image.exct.net/lib/fec515737c63017c/m/1/horizontal_rule_long.jpg" width="579" height="8" alt="" border="0" /></td>
                </tr>
                <tr>
                    <td>&nbsp;</td>
                    <td><div align="left" style="font-size:30px; color:#009ad7;font-family:Helvetica, Arial, sans-serif; line-height:40px;"><b>Welcome to LikeMe</b></div>
                        <div align="left" style="font-family:Helvetica, Arial, sans-serif; font-size:14px; color:#7a7a7a">Here is your account information...</div></td> 
                </tr>
                <tr>
                    <td colspan="2"><img src="http://image.exct.net/lib/fec515737c63017c/m/1/horizontal_rule_short.jpg" width="579" height="8" alt="" border="0" /></td>
                </tr>
                <tr>
                    <td>&nbsp;</td>
                    <td style="font-family:Helvetica, Arial, sans-serif; font-size:12px; color:#7a7a7a;">
                        <div align="left" style="line-height:20px;">Your Display Name :: <span style="color:#009ad7">%%DisplayName%%</span></div>
                        <div align="left" style="line-height:20px;">Your Recommendation Profile :: <span style="color:#669933;"><a href="http://www.likeme.net/users/%%UniqueName%%/recommendations?utm_source=WelcomeEmail&utm_medium=Email&utm_content=recommendation_profile_link&utm_campaign=WelcomeEmail" style="text-decoration:none; color:#669933" target="_blank">http://www.likeme.net/users/%%UniqueName%%/recommendations</a></span></div>
                    </td>
                 </tr>
                 <tr>
                    <td colspan="2"><img src="http://image.exct.net/lib/fec515737c63017c/m/1/horizontal_rule_short.jpg" width="579" height="8" alt="" border="0" /></td>
                </tr>  
                <tr>
                    <td>&nbsp;</td>
                    <td><div align="left" style="font-family:Helvetica, Arial, sans-serif; font-size:14px; color:#7a7a7a">Follow these easy steps to get great recommendations.</div></td>
                </tr>     
             </table>
        </td>
        <td width="25"><img src="http://image.exct.net/lib/fec515737c63017c/m/1/welcome_border_right.jpg" width="25" height="167" alt="" border="0" style="display:block" /></td>
    </tr>   
    <tr>
        <td><img src="http://image.exct.net/lib/fec515737c63017c/m/1/steps_border_left.jpg" width="26" height="394" alt="" border="0" /></td>
        <td valign="top">
            <table width="579" cellpadding="0" cellspacing="0" border="0">
                <tr>
                    <td width="255" valign="top"><img src="http://image.exct.net/lib/fec515737c63017c/m/1/steps_people_image.jpg" width="255" height="393" alt="" border="0" /></td>
                    <td width="324" valign="top" style="font-family:Helvetica, Arial; sans-serif">
<div align="left" style="font-size:16px; font-weight:bold; color:#009ad7"><b>1. Upload a profile picture</b></div>
<div align="left" style="font-size:12px; color:#7a7a7a">Everyone likes to see who they are getting recommendations from.</div>
<div align="left" style="font-size:12px; color:#669933;"><img src="http://image.exct.net/lib/fec515737c63017c/m/1/arrow.jpg" border="0" /> <a href="http://www.likeme.net/users/%%UniqueName%%/profile/photos?utm_source=WelcomeEmail&utm_medium=Email&utm_content=step1_photos_link&utm_campaign=WelcomeEmail" style="color:#669933; text-decoration:none" target="_blank">Upload that photo</a></div>
<div>&nbsp;</div>
<div align="left" style="font-size:16px; font-weight:bold; color:#009ad7"><b>2. Tell us your favorites</b></div>
<div align="left" style="font-size:12px; color:#7a7a7a">The more recommendations you add, the better the suggestions like me will send you.</div>
<div align="left" style="font-size:12px; color:#669933;"><img src="http://image.exct.net/lib/fec515737c63017c/m/1/arrow.jpg" border="0" /> <a href="http://www.likeme.net/users/%%UniqueName%%/recommendations?utm_source=WelcomeEmail&utm_medium=Email&utm_content=step3_add_recommendations_link&utm_campaign=WelcomeEmail" style="color:#669933;text-decoration:none" target="_blank">Share your recommendations</a></div>
<div>&nbsp;</div>
<div align="left" style="font-size:16px; font-weight:bold; color:#009ad7"><b>3. Add Inside Words</b></div>
<div align="left" style="font-size:12px; color:#7a7a7a">Share the low down on all of your favorites.</div>
<div align="left" style="font-size:12px; color:#669933;"><img src="http://image.exct.net/lib/fec515737c63017c/m/1/arrow.jpg" border="0" /> <a href="http://www.likeme.net/users/%%UniqueName%%/recommendations?utm_source=WelcomeEmail&utm_medium=Email&utm_content=step3_add_inside_word_link&utm_campaign=WelcomeEmail" style="color:#669933;text-decoration:none" target="_blank">Add some Inside Words</a></div>
<div>&nbsp;</div>
<div align="left" style="font-size:16px; font-weight:bold; color:#009ad7"><b>4. Tell us about yourself</b></div>
<div align="left" style="font-size:12px; color:#7a7a7a">You can keep that info private, but it will help customize results.</div>
<div align="left" style="font-size:12px; color:#669933;"><img src="http://image.exct.net/lib/fec515737c63017c/m/1/arrow.jpg" border="0" /> <a href="http://www.likeme.net/users/%%UniqueName%%/profile/about_me/edit?utm_source=WelcomeEmail&utm_medium=Email&utm_content=step4_tell_us_link&utm_campaign=WelcomeEmail" style="color:#669933;text-decoration:none" target="_blank">Go to your account settings</a></div>
<div>&nbsp;</div>
<div align="left" style="font-size:16px; font-weight:bold; color:#009ad7"><b>5. Invite your friends</b></div>
<div align="left" style="font-size:12px; color:#7a7a7a">You can do so using your email address book or</div>
<div align="left" style="font-size:12px; color:#7a7a7a">Facebook Connect.</div>
<div align="left" style="font-size:12px; color:#669933;"><img src="http://image.exct.net/lib/fec515737c63017c/m/1/arrow.jpg" border="0" /> <a href="http://www.likeme.net/users/%%UniqueName%%/friends?utm_source=WelcomeEmail&utm_medium=Email&utm_content=step5_invite_friends_link&utm_campaign=WelcomeEmail" style="color:#669933;text-decoration:none" target="_blank">Invite your friends</a></div>
                    </td>
                </tr>
            </table>
        </td>
        <td><img src="http://image.exct.net/lib/fec515737c63017c/m/1/steps_border_right.jpg" width="25" height="394" alt="" border="0" /></td>
    </tr>   
    <tr>
        <td colspan="3"><img src="http://image.exct.net/lib/fec515737c63017c/m/1/steps_bottom_horizontal_rule.jpg" width="630" height="29" alt="" border="0" /></td>
    </tr>   
    <tr>
        <td><img src="http://image.exct.net/lib/fec515737c63017c/m/1/faq_border_left.jpg" width="26" height="79" alt="" border="0" /></td>
        <td valign="top" align="center" style="font-family:Helvetica, Arial, sans-serif">
            <div align="center" style="font-size:11px; color:#7a7a7a;">If you have any questions about using LikeMe, check out our FAQs or feel free to email us at <span style="color:#669933;"><a href="mailto:help@likeme.net" style="text-decoration:none; color:#669933">help@likeme.net.</a></span><br /><br /></div>
            <div align="center" style="font-size:26px; line-height:30px;"><b><span style="color:#7a7a7a">The</span> <span style="color:#009ad7">Like</span> <span style="color:#f04e24">Me</span> <span style="color:#7a7a7a">Network</span></b></div>
            <div align="center" style="font-size:14px; color:#7a7a7a">People Helping People Get The Most Out Of Life.</div></td>
        <td><img src="http://image.exct.net/lib/fec515737c63017c/m/1/faq_border_right.jpg" width="25" height="79" alt="" border="0" /></td>
    </tr>
    <tr>
        <td colspan="3"><img src="http://image.exct.net/lib/fec515737c63017c/m/1/faq_border_bottom.jpg" width="630" height="33" alt="" border="0" /></td>
    </tr>
    <tr>
        <td valign="top" height="200" colspan="3" background="http://image.exct.net/lib/fec515737c63017c/m/1/background.gif">
            <table width="610" align="right" cellpadding="0" cellspacing="0" border="0">
                <tr>
                    <td style="font-family:Helvetica, Arial, sans-serif;font-size:9px; color:#a5a5a5;">
                        <div align="left">You're receiving this email because you're registered at %%Member_Busname%%. If you're receiving this email by mistake, please <a href="http://www.likeme.net/users/%%UniqueName%%/profile/subscription_center/edit?utm_source=WelcomeEmail&utm_medium=Email&utm_content=top_unsubscribe_link&utm_campaign=WelcomeEmail" alias="Manage Subscriptions" style="text-decoration: none; color: #669933;" target="_blank">unsubscribe</a>.</div>
                        <div>&nbsp;</div>
                        <div align="left">This email was sent to: <a href="%%Email Address%%" alias="%%Email Address%%" style="text-decoration: none; color:#669933;">%%Email Address%%</a>.</div>
                        <div align="left">This email was sent by: %%Member_Busname%%, %%Member_Addr%% %%Member_City%%, %%Member_State%% %%Member_PostalCode%%</div>
                        <div>&nbsp;</div>
                        <div align="left">We respect your privacy - <a href="http://www.likeme.net/privacy" alt="View Privacy Policy" alias="View Privacy Policy" style="text-decoration: none; color: #669933;" target="_blank">view our policy</a> | <a href="http://www.likeme.net/users/%%UniqueName%%/profile/subscription_center/edit" alias="Manage Subscriptions" style="text-decoration: none; color: #669933;" target="_blank">manage subscriptions</a> | <a href="http://www.likeme.net/users/%%UniqueName%%/profile/subscription_center/edit" alias="Update Profile" style="text-decoration: none; color: #669933;" target="_blank">update profile</a> | &Atilde;‚&Acirc;&copy;2008-2009 LikeMe.net.</div>                    
                    </td>
                </tr>
            </table>
        </td>
    </tr>                                      

</table>
</body>
</html>

Brian Thies
Professional Email Developer
Thies Publishing
analyticsPierce, 7 years ago

Thanks for your suggestion. It definitely cleared up the horizontal gaps when testing the email in most browsers. However, when I sent the email to some emails for testing it had large gaps in Hotmail. I simplified my version down to eliminate some of the excess code and resent to Hotmail but the gaps are still there. Not sure what the issue is with Hotmail.

If you anyone has any advice I would appreciate it.

Thanks

BThies BThies, 7 years ago

Not sure what you're seeing - I sent it to my Windows Live Hotmail account, and it displays correctly without any gaps.  I can send you a screenshot (or if you could send a copy from your side to xavier311oh@live.com).


Brian Thies
Professional Email Developer
Thies Publishing
zapatoche, 7 years ago

have you tried to remove white space around table cell containing images:
<tr>
       <td>
              <img>
      </td>
</tr>

to

<tr><td><img></td></tr>

You will find that unwanted gap often appear in gmail and hotmail when you're browsing on internet explorer, unless you collapse white space.

hope it help

analyticsPierce, 7 years ago

Brian, I sent out another test email and copied you. It rendered correctly everywhere except hotmail / live.com in FireFox. It is happening on both PC and MAC platforms. Not sure what else could be causing the gaps to appear.  I can send a screenshot if that would be helpful.

Please let me know if you have any ideas on fixing it.

Thanks

analyticsPierce, 7 years ago

It also does not render in iPhone mail. This time the gaps only appear in the bottom half of the email.

BThies BThies, 7 years ago

Ahh!!  I was viewing it IE8 at the hotmail/live.com screen.

It would probably help if I kept style="display:block" on all of your non-spacer images, and style="display:inline" for your spacer/arrow images.

This should fix it for you:

<custom name="opencounter" type="tracking">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Welcome to LikeMe.net</title>
</head>

<body style="margin:0px;">
<table width="630" align="center" cellpadding="0" cellspacing="0" border="0">
    <tr><!-- email headers -->
          <td colspan="3" align="center" valign="middle" background="http://image.exct.net/lib/fec515737c63017c/m/1/background.gif" height="31" width="630" style="font-size:10px; color:#a5a5a5; font-family:Helvetica, Arial, sans-serif;">
          <div align="center">If you no longer wish to receive emails from LikeMe, please <a href="http://www.likeme.net/users/%%UniqueName%%/profile/subscription_center/edit?utm_source=WelcomeEmail&utm_medium=Email&utm_content=top_unsubscribe_link&utm_campaign=WelcomeEmail" style="color:#669933; text-decoration:none" target="_blank">unsubscribe</a></div>
           <div align="center">To ensure proper delivery of this email add <a href="mailto:info@likeme.net" style="color:#669933;text-decoration:none">info@likeme.net</a> to your address book</div>
          </td>
    </tr>
    <tr><td colspan="3"><img src="http://image.exct.net/lib/fec515737c63017c/m/1/likeme_logo.jpg" width="630" height="92" alt="" border="0"style="display:block" /></td></tr>
    <tr><td width="26" valign="top"><img src="http://image.exct.net/lib/fec515737c63017c/m/1/welcome_border_left.jpg" width="26" height="167" alt="" border="0" style="display:block" /></td><td width="579" valign="top"><table width="579" cellpadding="0" cellspacing="0" border="0"><tr><td width="15">&nbsp;</td><td width="564" height="23" valign="top"><div align="left" style="font-size:16px; color:#009ad7; font-family:Helvetica, Arial, sans-serif;"><b>Hey %%FirstName%%,</b></div>
                    </td>
                </tr>
                <tr>
                    <td colspan="2"><img src="http://image.exct.net/lib/fec515737c63017c/m/1/horizontal_rule_long.jpg" width="579" height="8" alt="" border="0" style="display:block" /></td>
                </tr>
                <tr>
                    <td>&nbsp;</td>
                    <td><div align="left" style="font-size:30px; color:#009ad7;font-family:Helvetica, Arial, sans-serif; line-height:40px;"><b>Welcome to LikeMe</b></div>
                        <div align="left" style="font-family:Helvetica, Arial, sans-serif; font-size:14px; color:#7a7a7a">Here is your account information...</div></td> 
                </tr>
                <tr>
                    <td colspan="2"><img src="http://image.exct.net/lib/fec515737c63017c/m/1/horizontal_rule_short.jpg" width="579" height="8" alt="" border="0" style="display:block" /></td>
                </tr>
                <tr>
                    <td>&nbsp;</td>
                    <td style="font-family:Helvetica, Arial, sans-serif; font-size:12px; color:#7a7a7a;">
                        <div align="left" style="line-height:20px;">Your Display Name :: <span style="color:#009ad7">%%DisplayName%%</span></div>
                        <div align="left" style="line-height:20px;">Your Recommendation Profile :: <span style="color:#669933;"><a href="http://www.likeme.net/users/%%UniqueName%%/recommendations?utm_source=WelcomeEmail&utm_medium=Email&utm_content=recommendation_profile_link&utm_campaign=WelcomeEmail" style="text-decoration:none; color:#669933" target="_blank">http://www.likeme.net/users/%%UniqueName%%/recommendations</a></span></div>
                    </td>
                 </tr><tr><td colspan="2"><img src="http://image.exct.net/lib/fec515737c63017c/m/1/horizontal_rule_short.jpg" width="579" height="8" alt="" border="0" style="display:block" /></td></tr><tr><td>&nbsp;</td><td><div align="left" style="font-family:Helvetica, Arial, sans-serif; font-size:14px; color:#7a7a7a">Follow these easy steps to get great recommendations.</div></td></tr>     
             </table>
        </td>
        <td width="25"><img src="http://image.exct.net/lib/fec515737c63017c/m/1/welcome_border_right.jpg" width="25" height="167" alt="" border="0" style="display:block" /></td>
    </tr>   
    <tr>
        <td valign="top"><img src="http://image.exct.net/lib/fec515737c63017c/m/1/steps_border_left.jpg" width="26" height="394" alt="" border="0" style="display:block" /></td>
<td valign="top">
            <table width="579" cellpadding="0" cellspacing="0" border="0">
                <tr>
                    <td width="255" valign="top"><img src="http://image.exct.net/lib/fec515737c63017c/m/1/steps_people_image.jpg" width="255" height="393" alt="" border="0" style="display:block" /></td>
                    <td width="324" valign="top" style="font-family:Helvetica, Arial; sans-serif">
<div align="left" style="font-size:16px; font-weight:bold; color:#009ad7"><b>1. Upload a profile picture</b></div>
<div align="left" style="font-size:12px; color:#7a7a7a">Everyone likes to see who they are getting recommendations from.</div>
<div align="left" style="font-size:12px; color:#669933;"><img src="http://image.exct.net/lib/fec515737c63017c/m/1/arrow.jpg" border="0"   style="display:inline" /> <a href="http://www.likeme.net/users/%%UniqueName%%/profile/photos?utm_source=WelcomeEmail&utm_medium=Email&utm_content=step1_photos_link&utm_campaign=WelcomeEmail" style="color:#669933; text-decoration:none" target="_blank">Upload that photo</a></div>
<div>&nbsp;</div>
<div align="left" style="font-size:16px; font-weight:bold; color:#009ad7"><b>2. Tell us your favorites</b></div>
<div align="left" style="font-size:12px; color:#7a7a7a">The more recommendations you add, the better the suggestions like me will send you.</div>
<div align="left" style="font-size:12px; color:#669933;"><img src="http://image.exct.net/lib/fec515737c63017c/m/1/arrow.jpg" border="0" style="display:inline" /> <a href="http://www.likeme.net/users/%%UniqueName%%/recommendations?utm_source=WelcomeEmail&utm_medium=Email&utm_content=step3_add_recommendations_link&utm_campaign=WelcomeEmail" style="color:#669933;text-decoration:none" target="_blank">Share your recommendations</a></div>
<div>&nbsp;</div>
<div align="left" style="font-size:16px; font-weight:bold; color:#009ad7"><b>3. Add Inside Words</b></div>
<div align="left" style="font-size:12px; color:#7a7a7a">Share the low down on all of your favorites.</div>
<div align="left" style="font-size:12px; color:#669933;"><img src="http://image.exct.net/lib/fec515737c63017c/m/1/arrow.jpg" border="0"  style="display:inline" /> <a href="http://www.likeme.net/users/%%UniqueName%%/recommendations?utm_source=WelcomeEmail&utm_medium=Email&utm_content=step3_add_inside_word_link&utm_campaign=WelcomeEmail" style="color:#669933;text-decoration:none" target="_blank">Add some Inside Words</a></div>
<div>&nbsp;</div>
<div align="left" style="font-size:16px; font-weight:bold; color:#009ad7"><b>4. Tell us about yourself</b></div>
<div align="left" style="font-size:12px; color:#7a7a7a">You can keep that info private, but it will help customize results.</div>
<div align="left" style="font-size:12px; color:#669933;"><img src="http://image.exct.net/lib/fec515737c63017c/m/1/arrow.jpg" border="0"  style="display:inline" /> <a href="http://www.likeme.net/users/%%UniqueName%%/profile/about_me/edit?utm_source=WelcomeEmail&utm_medium=Email&utm_content=step4_tell_us_link&utm_campaign=WelcomeEmail" style="color:#669933;text-decoration:none" target="_blank">Go to your account settings</a></div>
<div>&nbsp;</div>
<div align="left" style="font-size:16px; font-weight:bold; color:#009ad7"><b>5. Invite your friends</b></div>
<div align="left" style="font-size:12px; color:#7a7a7a">You can do so using your email address book or</div>
<div align="left" style="font-size:12px; color:#7a7a7a">Facebook Connect.</div>
<div align="left" style="font-size:12px; color:#669933;"><img src="http://image.exct.net/lib/fec515737c63017c/m/1/arrow.jpg" border="0"  style="display:inline" /> <a href="http://www.likeme.net/users/%%UniqueName%%/friends?utm_source=WelcomeEmail&utm_medium=Email&utm_content=step5_invite_friends_link&utm_campaign=WelcomeEmail" style="color:#669933;text-decoration:none" target="_blank">Invite your friends</a></div>
                    </td>
                </tr>
            </table>
        </td>
        <td valign="top"><img src="http://image.exct.net/lib/fec515737c63017c/m/1/steps_border_right.jpg" width="25" height="394" alt="" border="0" style="display:block" /></td>
    </tr>   
    <tr>
        <td colspan="3"><img src="http://image.exct.net/lib/fec515737c63017c/m/1/steps_bottom_horizontal_rule.jpg" width="630" height="29" alt="" border="0" style="display:block" /></td>
    </tr>   
    <tr>
        <td><img src="http://image.exct.net/lib/fec515737c63017c/m/1/faq_border_left.jpg" width="26" height="79" alt="" border="0" style="display:block" /></td>
        <td valign="top" align="center" style="font-family:Helvetica, Arial, sans-serif">
            <div align="center" style="font-size:11px; color:#7a7a7a;">If you have any questions about using LikeMe, check out our FAQs or feel free to email us at <span style="color:#669933;"><a href="mailto:help@likeme.net" style="text-decoration:none; color:#669933">help@likeme.net.</a></span><br /><br /></div>
            <div align="center" style="font-size:26px; line-height:30px;"><b><span style="color:#7a7a7a">The</span> <span style="color:#009ad7">Like</span> <span style="color:#f04e24">Me</span> <span style="color:#7a7a7a">Network</span></b></div>
            <div align="center" style="font-size:14px; color:#7a7a7a">People Helping People Get The Most Out Of Life.</div></td>
        <td><img src="http://image.exct.net/lib/fec515737c63017c/m/1/faq_border_right.jpg" width="25" height="79" alt="" border="0" style="display:block" /></td>
    </tr>
    <tr>
        <td colspan="3"><img src="http://image.exct.net/lib/fec515737c63017c/m/1/faq_border_bottom.jpg" width="630" height="33" alt="" border="0" style="display:block" /></td>
    </tr>
    <tr>
        <td valign="top" height="200" colspan="3" background="http://image.exct.net/lib/fec515737c63017c/m/1/background.gif">
            <table width="610" align="right" cellpadding="0" cellspacing="0" border="0">
                <tr>
                    <td style="font-family:Helvetica, Arial, sans-serif;font-size:9px; color:#a5a5a5;">
                        <div align="left">You're receiving this email because you're registered at %%Member_Busname%%. If you're receiving this email by mistake, please <a href="http://www.likeme.net/users/%%UniqueName%%/profile/subscription_center/edit?utm_source=WelcomeEmail&utm_medium=Email&utm_content=top_unsubscribe_link&utm_campaign=WelcomeEmail" alias="Manage Subscriptions" style="text-decoration: none; color: #669933;" target="_blank">unsubscribe</a>.</div>
                        <div>&nbsp;</div>
                        <div align="left">This email was sent to: <a href="%%Email Address%%" alias="%%Email Address%%" style="text-decoration: none; color:#669933;">%%Email Address%%</a>.</div>
                        <div align="left">This email was sent by: %%Member_Busname%%, %%Member_Addr%% %%Member_City%%, %%Member_State%% %%Member_PostalCode%%</div>
                        <div>&nbsp;</div>
                        <div align="left">We respect your privacy - <a href="http://www.likeme.net/privacy" alt="View Privacy Policy" alias="View Privacy Policy" style="text-decoration: none; color: #669933;" target="_blank">view our policy</a> | <a href="http://www.likeme.net/users/%%UniqueName%%/profile/subscription_center/edit" alias="Manage Subscriptions" style="text-decoration: none; color: #669933;" target="_blank">manage subscriptions</a> | <a href="http://www.likeme.net/users/%%UniqueName%%/profile/subscription_center/edit" alias="Update Profile" style="text-decoration: none; color: #669933;" target="_blank">update profile</a> | &Atilde;‚&Acirc;&copy;2008-2009 LikeMe.net.</div>                    
                    </td>
                </tr>
            </table>
        </td>
    </tr>                                      

</table>
</body>
</html>

Brian Thies
Professional Email Developer
Thies Publishing
BThies BThies, 7 years ago

FYI - This is a rendering issue with FireFox & Hotmail that requires the display:block/display:inline styles in order to display correctly.

Firefox simply doesn't play nice with the Live Hotmail screen.


Brian Thies
Professional Email Developer
Thies Publishing
analyticsPierce, 7 years ago

Brian, thanks for all your help. I very much appreciate it. I have added the style="display:block" to all images and it still showed this issue. I'll try adding the display:inline instead and test again. Have you heard of vertical-align:bottom working as a solution also?

BThies BThies, 7 years ago

Did you use display:inline for the arrow images?  Using block on those would push your text below them.


Brian Thies
Professional Email Developer
Thies Publishing
BThies BThies, 7 years ago

Also, are you using the code I provided, or are you modifying your original?


Brian Thies
Professional Email Developer
Thies Publishing
analyticsPierce, 7 years ago

Right now, I am editing mine. We will see how the next test goes though.

Join 200,000 companies around the world that use Campaign Monitor to run email marketing campaigns that deliver results for their business.

Get started for free
1-888-533-8098