Gap appearing at base of header in Outlook.com

I keep getting a gap at the bottom of my header in Outlook.com that I can't seem to get rid of. It disappeared when I deleted all the content out of the holding table but I can't figure out a way of nesting them so this doesn't happen. All of the nested tables are aligned left as I am building this template for a responsive platform.

A screengrab example can be found here:
http://www.mharrisondesign.co.uk/tests/outlook.com/Outlook.com.png

The code is as follows:

<!-- Header starts -->

        <tr bgcolor="#e8e8e8" height="58">
            <td height="58">
                <table width="660" border="0" cellspacing="0" cellpadding="0" height="58" align="center" bgcolor="#9b0100">
                      <tr height="58">
                        <td width="10" height="58" valign="top" background="http://ww1.thebookpeople.co.uk/tbpemail/images/NewEmailTemplate/NEW_2013/EmailHeaderBckgnd.jpg"><p style="mso-table-lspace:0;mso-table-rspace:0;"></p></td>
                        <td height="58" valign="top" background="http://ww1.thebookpeople.co.uk/tbpemail/images/NewEmailTemplate/NEW_2013/EmailHeaderBckgnd.jpg"><!--<table width="12" border="0" cellspacing="0" cellpadding="0" align="left" height="58" style="border: 1px #9b0100 solid;">
                          <tr>
                            <td width="12" height="58"><p style="mso-table-lspace:0;mso-table-rspace:0;"></p></td>
                          </tr>
                        </table>-->                      
                        
                        <table width="175" height="58" border="0" cellspacing="0" cellpadding="0" align="left" style="border: 1px #9b0100 solid;">
                          <tr height="58">
                            <td height="58"><p style="mso-table-lspace:0;mso-table-rspace:0; margin:0;"><img src="http://ww1.thebookpeople.co.uk/tbpemail/images/NewEmailTemplate/NEW_2013/TBPLogo.jpg" alt="The Book People" width="173" height="58" border="0" style="display:block; color:#fff;"/></p></td>
                          </tr>
                        </table>
                        
                        <table width="320" height="58" border="0" cellspacing="0" cellpadding="0" align="left" style="border: 1px #9b0100 solid;">
  <tr height="58">
    <td width="10" height="58" valign="middle"><p style="mso-table-lspace:0;mso-table-rspace:0;"></p></td>
    <td width="1" height="58" valign="middle" bgcolor="#000000"></td>
    <td height="58" align="center" valign="middle" style="font-family:Arial, Helvetica, sans-serif; color:#ffffff; font-size:16px; text-decoration:none; text-align:center; font-weight:bold;"><a style="color:#ffffff; text-decoration:none;" href="#">Books</a></td>
    <td width="1" height="58" valign="middle" bgcolor="#000000"></td>
    <td height="58" align="center" valign="middle" style="font-family:Arial, Helvetica, sans-serif; color:#ffffff; font-size:16px; text-decoration:none; text-align:center; font-weight:bold;"><a style="color:#ffffff; text-decoration:none;" href="#">eBooks</a></td>
    <td width="1" height="58" valign="middle" bgcolor="#000000"></td>
    <td height="58" align="center" valign="middle" style="font-family:Arial, Helvetica, sans-serif; color:#ffffff; font-size:16px; text-decoration:none; text-align:center; font-weight:bold;"><a style="color:#ffffff; text-decoration:none;" href="#">Offers</a></td>
    <td width="1" height="58" valign="middle" bgcolor="#000000"></td>
  </tr>
</table>
                        
                       <table width="142" border="0" cellspacing="0" cellpadding="0" align="left" height="58" style="border: 1px #9b0100 solid;">
  <tr height="58">
    <td height="58" style="font-family:Arial, Helvetica, sans-serif; color:#ffffff; font-size:14px; text-decoration:underline; text-align:right;"><p style="mso-table-lspace:0;mso-table-rspace:0; margin:0;"><a href="$prefilledform(PreferenceForm)$" style="color: #ffffff;">Email Preferences</a></p></td>
  </tr>
</table> 
                        
                      </td>
                         <td width="10" height="58" valign="top" background="http://ww1.thebookpeople.co.uk/tbpemail/images/NewEmailTemplate/NEW_2013/EmailHeaderBckgnd.jpg"></td>
                      </tr>
                </table>
            </td>
            
        
        </tr>

<!-- Header ends -->

Thanks,
Mark

roshodgekiss roshodgekiss, 4 years ago

Hi there Mark, the issue here is that Outlook.com adds its own margin value to <p> tags. If you replace your <p> tags with <span> instead, then the gaps disappear.

I did so while testing, so here's the updated code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
</head>
<body>
<!-- Header starts -->
<tr bgcolor="#e8e8e8" height="58">
  <td height="58"><table width="660" border="0" cellspacing="0" cellpadding="0" height="58" align="center" bgcolor="#9b0100">
      <tr height="58">
        <td width="10" height="58" valign="top" background="http://ww1.thebookpeople.co.uk/tbpemail/images/NewEmailTemplate/NEW_2013/EmailHeaderBckgnd.jpg"><p style="mso-table-lspace:0;mso-table-rspace:0;"></p></td>
        <td height="58" valign="top" background="http://ww1.thebookpeople.co.uk/tbpemail/images/NewEmailTemplate/NEW_2013/EmailHeaderBckgnd.jpg"><!--<table width="12" border="0" cellspacing="0" cellpadding="0" align="left" height="58" style="border: 1px #9b0100 solid;">
                          <tr>
                            <td width="12" height="58"><p style="mso-table-lspace:0;mso-table-rspace:0;"></p></td>
                          </tr>
                        </table>-->
          <table width="175" height="58" border="0" cellspacing="0" cellpadding="0" align="left" style="border: 1px #9b0100 solid;">
            <tr height="58">
              <td height="58"><span style="mso-table-lspace:0;mso-table-rspace:0; margin:0;"><img src="http://ww1.thebookpeople.co.uk/tbpemail/images/NewEmailTemplate/NEW_2013/TBPLogo.jpg" alt="The Book People" width="173" height="58" border="0" style="display:block; color:#ffffff;"/></span></td>
            </tr>
          </table>
          <table width="320" height="58" border="0" cellspacing="0" cellpadding="0" align="left" style="border: 1px #9b0100 solid;">
            <tr height="58">
              <td width="10" height="58" valign="middle"><p style="mso-table-lspace:0;mso-table-rspace:0;"></p></td>
              <td width="1" height="58" valign="middle" bgcolor="#000000"></td>
              <td height="58" align="center" valign="middle" style="font-family:Arial, Helvetica, sans-serif; color:#ffffff; font-size:16px; text-decoration:none; text-align:center; font-weight:bold;"><a style="color:#ffffff; text-decoration:none;" href="#">Books</a></td>
              <td width="1" height="58" valign="middle" bgcolor="#000000"></td>
              <td height="58" align="center" valign="middle" style="font-family:Arial, Helvetica, sans-serif; color:#ffffff; font-size:16px; text-decoration:none; text-align:center; font-weight:bold;"><a style="color:#ffffff; text-decoration:none;" href="#">eBooks</a></td>
              <td width="1" height="58" valign="middle" bgcolor="#000000"></td>
              <td height="58" align="center" valign="middle" style="font-family:Arial, Helvetica, sans-serif; color:#ffffff; font-size:16px; text-decoration:none; text-align:center; font-weight:bold;"><a style="color:#ffffff; text-decoration:none;" href="#">Offers</a></td>
              <td width="1" height="58" valign="middle" bgcolor="#000000"></td>
            </tr>
          </table>
          <table width="142" border="0" cellspacing="0" cellpadding="0" align="left" height="58" style="border: 1px #9b0100 solid;">
            <tr height="58">
              <td height="58" style="font-family:Arial, Helvetica, sans-serif; color:#ffffff; font-size:14px; text-decoration:underline; text-align:right;"><span style="mso-table-lspace:0;mso-table-rspace:0; margin:0;"><a href="$prefilledform(PreferenceForm)$" style="color: #ffffff;">Email Preferences</a></span></td>
            </tr>
          </table></td>
        <td width="10" height="58" valign="top" background="http://ww1.thebookpeople.co.uk/tbpemail/images/NewEmailTemplate/NEW_2013/EmailHeaderBckgnd.jpg"></td>
      </tr>
    </table></td>
</tr>
<!-- Header ends -->
<unsubscribe>unsub</unsubscribe>
</body>
</html>

Thanks, Mark - I hope your campaigns are hassle free from here!


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor
thebookpeople, 4 years ago

That has worked a charm. Thanks very much Ros! You've saved me from a massive headache!

roshodgekiss roshodgekiss, 4 years ago

You're very welcome - glad we could help :)


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor

See why 200,000 companies worldwide love Campaign Monitor.

From Australia to Zimbabwe, and everywhere in between, companies count on Campaign Monitor for email campaigns that boost the bottom line.

Get started for free