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, 3 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, 3 years ago

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

roshodgekiss roshodgekiss, 3 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

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