HTML Email Newsletter - spacing in outlook 2007/2010

Question

I'm coding a HTML email newsletter and I'm getting very weird spacing issues for my tables in Outlook 2007 and 2010

My code which works fine in all other clients is here:

   <table width="575" align="center" border="0" cellspacing="0" cellpadding="0">
 <tr>
<td bgcolor="#0054a4" style="padding-left:20px; padding-right:20px; padding-top:20px; padding-bottom:20px; margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px"><a href="http://www.lgfhfghfhfhfghf" target="_blank" style="font-family:Myriad Pro, Verdana, Georgia; font-size:30px; line-height: 34px; font-style:normal; color:#ffffff; text-decoration:none;"><center>
      <span style="font-weight:bold;">register</span> for <span style="font-style:lighter;color:#fce000;">mkk</span><span style="color:#fce000; font-weight:bold;"> 56565464646 </span><span style="font-weight:normal; text-decoration:underline;">click here</span></strong>
</center></a></td></tr>



   <tr>
   <td bgcolor="#fce000" style="padding-left:20px; padding-right:20px; padding-top:10px; padding-bottom:15px; margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px"><a href="http://www.fgdfgdg"" target="_blank" style="font-family:Myriad Pro, Verdana, Georgia; font-size:30px; line-height: 30px; font-style:normal; color:#ffffff; text-decoration:none;"><center>
      <span style="font-style:lighter;color:#0054a4;">lll</span><span style="color:#0054a4; font-weight:bold;"> ffgfgf </span><span style="font-weight:normal; color:#000000; text-decoration:none;">is proudly sponsored by</span></strong>
     </center></a></td>
    </tr>
   <tr>
      <td bgcolor="#0054a4" style="padding-left:0px; padding-right:0px; padding-top:0px; padding-bottom:0px; margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px"><a href="http://www.gdfgdfgdf" target="_blank"><img name="fgdgfg" src="http://fgfdgdgdg" width="575" height="76" style="font-size:20px; color:#fce000;" alt="fgfdgdfgdfg" border="0"/></a></td>
   </tr>
      </table>

  <table bgcolor="#0055a5" align="center" width="575" border="0" cellspacing="0" cellpadding="10">
                      <tr>
                        <td align="left" bgcolor="#0055a5" valign="top"><img src="http://www.fdgfdgdfgdfgdf.png" height="50" width="50" alt="gggggg" align="top" border="no" style="margin-top:0px;margin-bottom:0px;margin-right:0px;margin-left:0px;padding-top:0px;padding-bottom:0px;padding-right:0px;padding-left:0px;" /></td>



                        <td align="right" bgcolor="#0055a5" valign="top" style="margin-top:0px;margin-bottom:0px;margin-right:0px;margin-left:0px;padding-top:10px;padding-bottom:10px;padding-right:10px;padding-left:30px;font-family:Arial,Helvetica,sans-serif;font-size:12px;line-height:20px;color:#fce000;" ><span style="font-weight:bold;color:##fce000;" >gfrtryrtytryrtyrty</span><br />
                          rtrtrtrtertretertetertertertertertertertetert <font style="text-decoration:none;">tertetertetetet</font>
                          <a href=mailto:fgdfgdfgdgdfgfdstyle="color:#fce000; text-decoration:none;" >rtdfgdfgdfgdfg</a> / <a href="http://www.fgdfgdfgdgdgdf" target="_blank" style="color:#fce000;text-decoration:none;">www.fgfgdfgfgd/expo</a><br />

                         <strong> To unsubscribe from this newsletter </strong><a href="http://$UNSUB$" style="color:#fce000; font-weight: bold; text-decoration: underline" >click here</a>

                          </td>
                        </tr>
                      </table>

screen shot of weird outlook spacing here

screenshot of working email

if anyone can help please do as its driving me mad!

Answer 1

Don't wrap the <center> tag inside an <a> tag... Outlook uses MS Word to render HTML (god knows why) and so it has a LOT of restrictions on how you can structure your markup. Just move the link inside the <center> tag an it should work fine (I tested this):

<table width="575" align="center" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td bgcolor="#0054a4" style="padding-left:20px; padding-right:20px; padding-top:20px; padding-bottom:20px; margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px"><center>
        <a href="http://www.lgfhfghfhfhfghf" target="_blank" style="font-family:Myriad Pro, Verdana, Georgia; font-size:30px; line-height: 34px; font-style:normal; color:#ffffff; text-decoration:none;"> <span style="font-weight:bold;">register</span> for <span style="font-style:lighter;color:#fce000;">mkk</span><span style="color:#fce000; font-weight:bold;"> 56565464646 </span><span style="font-weight:normal; text-decoration:underline;">click here</span></strong></a>
      </center></td>
  </tr>
  <tr>
    <td bgcolor="#fce000" style="padding-left:20px; padding-right:20px; padding-top:10px; padding-bottom:15px; margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px"><a href="http://www.fgdfgdg"" target="_blank" style="font-family:Myriad Pro, Verdana, Georgia; font-size:30px; line-height: 30px; font-style:normal; color:#ffffff; text-decoration:none;">
      <center>
        <span style="font-style:lighter;color:#0054a4;">lll</span><span style="color:#0054a4; font-weight:bold;"> ffgfgf </span><span style="font-weight:normal; color:#000000; text-decoration:none;">is proudly sponsored by</span></strong>
      </center>
      </a></td>
  </tr>
  <tr>
    <td bgcolor="#0054a4" style="padding-left:0px; padding-right:0px; padding-top:0px; padding-bottom:0px; margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px"><a href="http://www.gdfgdfgdf" target="_blank"><img name="fgdgfg" src="http://fgfdgdgdg" width="575" height="76" style="font-size:20px; color:#fce000;" alt="fgfdgdfgdfg" border="0"/></a></td>
  </tr>
</table>
<table bgcolor="#0055a5" align="center" width="575" border="0" cellspacing="0" cellpadding="10">
  <tr>
    <td align="left" bgcolor="#0055a5" valign="top"><img src="http://www.fdgfdgdfgdfgdf.png" height="50" width="50" alt="gggggg" align="top" border="no" style="margin-top:0px;margin-bottom:0px;margin-right:0px;margin-left:0px;padding-top:0px;padding-bottom:0px;padding-right:0px;padding-left:0px;" /></td>
    <td align="right" bgcolor="#0055a5" valign="top" style="margin-top:0px;margin-bottom:0px;margin-right:0px;margin-left:0px;padding-top:10px;padding-bottom:10px;padding-right:10px;padding-left:30px;font-family:Arial,Helvetica,sans-serif;font-size:12px;line-height:20px;color:#fce000;" ><span style="font-weight:bold;color:##fce000;" >gfrtryrtytryrtyrty</span><br />
      rtrtrtrtertretertetertertertertertertertetert <font style="text-decoration:none;">tertetertetetet</font> <a href=mailto:fgdfgdfgdgdfgfdstyle="color:#fce000; text-decoration:none;" >rtdfgdfgdfgdfg</a> / <a href="http://www.fgdfgdfgdgdgdf" target="_blank" style="color:#fce000;text-decoration:none;">www.fgfgdfgfgd/expo</a><br />
      <strong> To unsubscribe from this newsletter </strong><a href="http://$UNSUB$" style="color:#fce000; font-weight: bold; text-decoration: underline" >click here</a></td>
  </tr>
</table>

Answer 2

Here's a helpful list of quirks in Outlook 2007, 2010 and 2013 in how it displays HTML emails: http://www.emailonacid.com/blog/details/C13/tips_and_tricks_outlook_07-13#outlook07-13_tip16

The page includes this tip, which fits with the way you've coded the table:

Avoid using “margin” or “padding” CSS properties in your TABLE tag. Cellpadding and Cellspacing attributes are generally safe but margin or padding will often be added to every TD within the table.

Hope that helps get to the bottom of it.