Litmus shows email is ok but it's not when proofed???

Hi.

I've got an email that Litmus says is working fine but when we proof it from our email marketing suite (Responsys), it shows up as breaking in our inboxes. This break is only in the footer and is a Sign In link that drops down on to the next line. Handily, this only happens in Outlook 2007, 2010 and 2013, the nightmare triple of Word rendered email clients from the wonderful Microsoft.
I just wonder why Litmus says it is fine but when proofed it is not??? I have used all the tricks of making emails work in these clients by using the inline span style mso-table-lspace:0, borders and border collapse CSS in the head and the only way I could find to prevent it from dropping on to the next line was to drastically reduce the table width but then I had a massive indent on every other email client.

Problem area is below:

<!-- Recovery Module Menu -->
    
    
    <tr height="35" bgcolor="#e8e8e8">
    <td height="35"><table width="660" height="35" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#c50000" style="">
      <tr>
        <td width="10" valign="top"></td>
        <td height="35" valign="top"><table width="55" height="35" border="0" cellspacing="0" cellpadding="0" align="left" style="border: 1px #c50000 solid;">
            <tr>
              <td align="center" height="35" valign="middle" style="font-family:Arial, Helvetica, sans-serif; color:#ffffff; font-size:14px; text-decoration:none; text-align:center; font-weight:bold;"><span style="mso-table-lspace:0;mso-table-rspace:0; margin:0;"><a style="color:#ffffff; text-decoration:none;" href="http://www.thebookpeople.co.uk/webapp/wcs/stores/servlet/qs_home_tbp?storeId=10001&amp;catalogId=10051&amp;langId=100&amp;cm_mmc=Email-_-TBP%20275-_-Debut%20Fiction-_-Books%20Footer&amp;istCompanyId=9E28718B-80EC-4C70-9F52-4431EC3FF1DE&amp;istItemId=ilmaaxaw">Books</a></span></td>
            </tr>
          </table>
            <table width="1" height="35" border="0" cellspacing="0" cellpadding="0" align="left" bgcolor="#000000">
              <tr>
                <td bgcolor="#9e0000" width="1" height="35"><span style="mso-table-lspace:0;mso-table-rspace:0; margin:0;"></span></td>
              </tr>
            </table>
          <table width="72" height="35" border="0" cellspacing="0" cellpadding="0" align="left" style="border: 1px #c50000 solid;">
              <tr>
                <td align="center" height="35" valign="middle" style="font-family:Arial, Helvetica, sans-serif; color:#ffffff; font-size:14px; text-decoration:none; text-align:center; font-weight:bold;"><span style="mso-table-lspace:0;mso-table-rspace:0; margin:0;"><a style="color:#ffffff; text-decoration:none;" href="http://www.thebookpeople.co.uk/webapp/wcs/stores/servlet/CategoryDisplay?storeId=10001&amp;categoryId=111215&amp;langId=100&amp;storeId=10001&amp;catalogId=10051&amp;langId=100&amp;cm_mmc=Email-_-TBP%20275-_-Debut%20Fiction-_-eBooks%20Footer&amp;istCompanyId=9E28718B-80EC-4C70-9F52-4431EC3FF1DE&amp;istItemId=ilmaaxaw">eBooks</a></span></td>
              </tr>
            </table>
          <table width="1" height="35" border="0" cellspacing="0" cellpadding="0" align="left" bgcolor="#9e0000">
              <tr>
                <td bgcolor="#9e0000" width="1" height="35"><span style="mso-table-lspace:0;mso-table-rspace:0; margin:0;"></span></td>
              </tr>
            </table>
          <table width="80" height="35" border="0" cellspacing="0" cellpadding="0" align="left" style="border: 1px #c50000 solid;">
              <tr>
                <td align="center" height="35" valign="middle" style="font-family:Arial, Helvetica, sans-serif; color:#ffffff; font-size:14px; text-decoration:none; text-align:center; font-weight:bold;"><span style="mso-table-lspace:0;mso-table-rspace:0; margin:0;"><a style="color:#ffffff; text-decoration:none;" href="http://www.thebookpeople.co.uk/webapp/wcs/stores/servlet/CategoryDisplay?storeId=10001&amp;categoryId=85207&amp;langId=100&amp;storeId=10001&amp;catalogId=10051&amp;langId=100&amp;cm_mmc=Email-_-TBP%20275-_-Debut%20Fiction-_-Childrens%20Footer&amp;istCompanyId=9E28718B-80EC-4C70-9F52-4431EC3FF1DE&amp;istItemId=ilmaaxaw">Children's</a></span></td>
              </tr>
            </table>
          <table width="1" height="35" border="0" cellspacing="0" cellpadding="0" align="left" bgcolor="#9e0000">
              <tr>
                <td bgcolor="#9e0000" width="1" height="35"><span style="mso-table-lspace:0;mso-table-rspace:0; margin:0;"></span></td>
              </tr>
            </table>
          <table width="72" height="35" border="0" cellspacing="0" cellpadding="0" align="left" style="border: 1px #c50000 solid;">
              <tr>
                <td align="center" height="35" valign="middle" style="font-family:Arial, Helvetica, sans-serif; color:#ffffff; font-size:14px; text-decoration:none; text-align:center; font-weight:bold;"><span style="mso-table-lspace:0;mso-table-rspace:0; margin:0;"><a style="color:#ffffff; text-decoration:none;" href="http://www.thebookpeople.co.uk/webapp/wcs/stores/servlet/qs_specialOffers_tbp?storeId=10001&amp;langId=100&amp;catalogId=10051&amp;cm_mmc=Email-_-TBP%20275-_-Debut%20Fiction-_-Sign%20In%20Footer&amp;istCompanyId=9E28718B-80EC-4C70-9F52-4431EC3FF1DE&amp;istItemId=ilmaaxaw">Offers</a></span></td>
              </tr>
            </table>
          <table width="186" height="35" border="0" align="left" cellpadding="0" cellspacing="0" style="border: 1px #c50000 solid;">
              <tr>
                <td width="184" height="35"><span style="mso-table-lspace:0;mso-table-rspace:0; margin:0;"></span></td>
              </tr>
            </table>
          <table width="20" height="35" border="0" cellspacing="0" cellpadding="0" align="left" style="border: 1px #c50000 solid;">
              <tr>
                <td width="20" height="35" valign="top"><span style="mso-table-lspace:0;mso-table-rspace:0; margin:0;"><a href="https://www.thebookpeople.co.uk/webapp/wcs/stores/servlet/account_register?productId=&amp;storeId=10001&amp;langId=100&amp;catalogId=10051&amp;krypto=1LTisP7s9G3DyBMZhH9gc8KhDkCNVykYQnFoEAuGMX6G0Eht3z%2FpMJfgtfNyHMeputlIVYXsTsQ%3D&amp;ddkey=http:account_register&amp;cm_mmc=Email-_-TBP%20275-_-Debut%20Fiction-_-Sign%20In%20Footer&amp;istCompanyId=9E28718B-80EC-4C70-9F52-4431EC3FF1DE&amp;istItemId=ilmaaxaw"><img src="http://ww1.thebookpeople.co.uk/tbpemail/images/NewEmailTemplate/NEW_2013/iconRegister.jpg" width="20" height="35" border="0" style="display:block;" /></a></span></td>
              </tr>
            </table>
          <table width="59" height="35" border="0" cellspacing="0" cellpadding="0" align="left" style="border: 1px #c50000 solid;">
              <tr>
                <td height="35" width="59" style="font-family:Arial, Helvetica, sans-serif; color:#ffffff; font-size:13px; text-decoration:none; text-align:center; font-weight:bold;"><span style="mso-table-lspace:0;mso-table-rspace:0; margin:0;"><a style="color:#ffffff; text-decoration:none;" href="https://www.thebookpeople.co.uk/webapp/wcs/stores/servlet/account_register?productId=&amp;storeId=10001&amp;langId=100&amp;catalogId=10051&amp;krypto=1LTisP7s9G3DyBMZhH9gc8KhDkCNVykYQnFoEAuGMX6G0Eht3z%2FpMJfgtfNyHMeputlIVYXsTsQ%3D&amp;ddkey=http:account_register&amp;cm_mmc=Email-_-TBP%20275-_-Debut%20Fiction-_-Sign%20In%20Footer&amp;istCompanyId=9E28718B-80EC-4C70-9F52-4431EC3FF1DE&amp;istItemId=ilmaaxaw">Register</a></span></td>
              </tr>
            </table>
          <table width="20" height="35" border="0" cellspacing="0" cellpadding="0" align="left" style="border: 1px #c50000 solid;">
              <tr>
                <td width="20" height="35" valign="top"><span style="mso-table-lspace:0;mso-table-rspace:0; margin:0;"><a href="https://www.thebookpeople.co.uk/webapp/wcs/stores/servlet/LogonForm?storeId=10001&amp;langId=100&amp;catalogId=10051&amp;krypto=e2abbIGnJHv3T%2F0NzOU32NbLj59MArqVHJiPnuVOD7RKDS%2BuM4k8Jn5rAUYh0HblRKxtu5gr4b%2BR%0AepdaAEdpAwq5JOMQHSwxFN52B%2F%2B3Ne8fxWiAhzgjafia7tt2HD5d&amp;ddkey=https:account_summary&amp;cm_mmc=Email-_-TBP%20275-_-Debut%20Fiction-_-Childrens%20Books%20Footer&amp;istCompanyId=9E28718B-80EC-4C70-9F52-4431EC3FF1DE&amp;istItemId=ilmaaxaw"><img src="http://ww1.thebookpeople.co.uk/tbpemail/images/NewEmailTemplate/NEW_2013/iconSignIn.jpg" width="20" height="35" border="0" style="display:block;" /></a></span></td>
              </tr>
            </table>
          <table width="56" height="35" border="0" cellspacing="0" cellpadding="0" align="left" style="border: 1px #c50000 solid;">
              <tr>
                <td width="56" height="35" valign="middle" style="font-family:Arial, Helvetica, sans-serif; color:#ffffff; font-size:13px; text-decoration:none; text-align:center; font-weight:bold;"><span style="mso-table-lspace:0;mso-table-rspace:0; margin:0;"><a style="color:#ffffff; text-decoration:none;" href="https://www.thebookpeople.co.uk/webapp/wcs/stores/servlet/LogonForm?storeId=10001&amp;langId=100&amp;catalogId=10051&amp;krypto=e2abbIGnJHv3T%2F0NzOU32NbLj59MArqVHJiPnuVOD7RKDS%2BuM4k8Jn5rAUYh0HblRKxtu5gr4b%2BR%0AepdaAEdpAwq5JOMQHSwxFN52B%2F%2B3Ne8fxWiAhzgjafia7tt2HD5d&amp;ddkey=https:account_summary&amp;cm_mmc=Email-_-TBP%20275-_-Debut%20Fiction-_-Childrens%20Books%20Footer&amp;istCompanyId=9E28718B-80EC-4C70-9F52-4431EC3FF1DE&amp;istItemId=ilmaaxaw">Sign In</a></span></td>
              </tr>
          </table></td>
        <td width="10" valign="top"></td>
      </tr>
    </table></td>
</tr>
     <!-- Recovery Module Menu ends -->

Many thanks,

Mark

Redferret, 3 years ago

Theres no need for elaborate hacks here, the problem is just that your widths don't add up correctly.

Your 660px table is divided into cells of 10, 640 and 10, within the 640px table the contents are ( brackets are tables with a 1px border ):

[55] + 1 + [72] + 1 + [80] + 1 + [72] + [186] + [20] + [59] + [20] + [56]

including the borders that's 641px wide, so the last table drops.


Gmail app apologist
thebookpeople, 3 years ago

Hi Redferret. Thanks for this. You are indeed right and on this occasion it seems I could not add up! However, I had already reduced the width of the middle table on a previous test (currently 186px) to 164px which solved the problem but it meant that I had a massive indent on the right so the menu didn't right align with the rest of the email content. It's just Outlook 07, 10 and 13 and their incredibly frustrating Word rendering engine that is the problem. All other email clients are fine.

Redferret, 3 years ago

It's more that Outlook 07+ requires you to be more rigorous with your code, where some clients will infer widths and collapse borders, outlook has quite a strict take on the HTML box model.

I've amended your code, removing borders, replacing the 1px tables and ensuring that the widths are set explicitly on the tds and tables. let me know how you get on.

<tr>
    <td>
        <table width="660" height="35" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#c50000" style="">
        <tr>
            <td width="10" valign="top">
            </td>
            <td width="640" height="35" valign="top">
                <table width="55" height="35" border="0" cellspacing="0" cellpadding="0" align="left" style="border-right:1px solid #9e0000;">
                <tr>
                    <td align="center" height="35" width="55" valign="middle" style="font-family:Arial, Helvetica, sans-serif; color:#ffffff; font-size:14px; text-decoration:none; text-align:center; font-weight:bold;">
                        <a style="color:#ffffff; text-decoration:none;" href="http://www.thebookpeople.co.uk/webapp/wcs/stores/servlet/qs_home_tbp?storeId=10001&amp;catalogId=10051&amp;langId=100&amp;cm_mmc=Email-_-TBP%20275-_-Debut%20Fiction-_-Books%20Footer&amp;istCompanyId=9E28718B-80EC-4C70-9F52-4431EC3FF1DE&amp;istItemId=ilmaaxaw">Books</a>
                    </td>
                </tr>
                </table>
                <table width="72" height="35" border="0" cellspacing="0" cellpadding="0" align="left" style="border-right:1px solid #9e0000">
                <tr>
                    <td align="center" height="35" width="72" valign="middle" style="font-family:Arial, Helvetica, sans-serif; color:#ffffff; font-size:14px; text-decoration:none; text-align:center; font-weight:bold;">
                        <a style="color:#ffffff; text-decoration:none;" href="http://www.thebookpeople.co.uk/webapp/wcs/stores/servlet/CategoryDisplay?storeId=10001&amp;categoryId=111215&amp;langId=100&amp;storeId=10001&amp;catalogId=10051&amp;langId=100&amp;cm_mmc=Email-_-TBP%20275-_-Debut%20Fiction-_-eBooks%20Footer&amp;istCompanyId=9E28718B-80EC-4C70-9F52-4431EC3FF1DE&amp;istItemId=ilmaaxaw">eBooks</a>
                    </td>
                </tr>
                </table>
            
                <table width="80" height="35" border="0" cellspacing="0" cellpadding="0" align="left" style="border-right:1px solid #9e0000">
                <tr>
                    <td align="center" height="35" width="80" valign="middle" style="font-family:Arial, Helvetica, sans-serif; color:#ffffff; font-size:14px; text-decoration:none; text-align:center; font-weight:bold;">
                        <a style="color:#ffffff; text-decoration:none;" href="http://www.thebookpeople.co.uk/webapp/wcs/stores/servlet/CategoryDisplay?storeId=10001&amp;categoryId=85207&amp;langId=100&amp;storeId=10001&amp;catalogId=10051&amp;langId=100&amp;cm_mmc=Email-_-TBP%20275-_-Debut%20Fiction-_-Childrens%20Footer&amp;istCompanyId=9E28718B-80EC-4C70-9F52-4431EC3FF1DE&amp;istItemId=ilmaaxaw">Children's</a>
                    </td>
                </tr>
                </table>
                <table width="72" height="35" border="0" cellspacing="0" cellpadding="0" align="left" >
                <tr>
                    <td align="center" height="35" width="72" valign="middle" style="font-family:Arial, Helvetica, sans-serif; color:#ffffff; font-size:14px; text-decoration:none; text-align:center; font-weight:bold;">
                    <a style="color:#ffffff; text-decoration:none;" href="http://www.thebookpeople.co.uk/webapp/wcs/stores/servlet/qs_specialOffers_tbp?storeId=10001&amp;langId=100&amp;catalogId=10051&amp;cm_mmc=Email-_-TBP%20275-_-Debut%20Fiction-_-Sign%20In%20Footer&amp;istCompanyId=9E28718B-80EC-4C70-9F52-4431EC3FF1DE&amp;istItemId=ilmaaxaw">Offers</a>
                    </td>
                </tr>
                </table>
                <table width="203" height="35" border="0" align="left" cellpadding="0" cellspacing="0">
                <tr>
                    <td width="203" height="35">
                        
                    </td>
                </tr>
                </table>
                <table width="20" height="35" border="0" cellspacing="0" cellpadding="0" align="left">
                <tr>
                    <td width="20" height="35" valign="top">
                        <a href="https://www.thebookpeople.co.uk/webapp/wcs/stores/servlet/account_register?productId=&amp;storeId=10001&amp;langId=100&amp;catalogId=10051&amp;krypto=1LTisP7s9G3DyBMZhH9gc8KhDkCNVykYQnFoEAuGMX6G0Eht3z%2FpMJfgtfNyHMeputlIVYXsTsQ%3D&amp;ddkey=http:account_register&amp;cm_mmc=Email-_-TBP%20275-_-Debut%20Fiction-_-Sign%20In%20Footer&amp;istCompanyId=9E28718B-80EC-4C70-9F52-4431EC3FF1DE&amp;istItemId=ilmaaxaw"><img src="http://ww1.thebookpeople.co.uk/tbpemail/images/NewEmailTemplate/NEW_2013/iconRegister.jpg" width="20" height="35" border="0" style="display:block;" /></a>
                    </td>
                </tr>
                </table>
                <table width="59" height="35" border="0" cellspacing="0" cellpadding="0" align="left">
                <tr>
                    <td height="35" width="59" style="font-family:Arial, Helvetica, sans-serif; color:#ffffff; font-size:13px; text-decoration:none; text-align:center; font-weight:bold;">
                        <a style="color:#ffffff; text-decoration:none;" href="https://www.thebookpeople.co.uk/webapp/wcs/stores/servlet/account_register?productId=&amp;storeId=10001&amp;langId=100&amp;catalogId=10051&amp;krypto=1LTisP7s9G3DyBMZhH9gc8KhDkCNVykYQnFoEAuGMX6G0Eht3z%2FpMJfgtfNyHMeputlIVYXsTsQ%3D&amp;ddkey=http:account_register&amp;cm_mmc=Email-_-TBP%20275-_-Debut%20Fiction-_-Sign%20In%20Footer&amp;istCompanyId=9E28718B-80EC-4C70-9F52-4431EC3FF1DE&amp;istItemId=ilmaaxaw">Register</a>
                    </td>
                </tr>
                </table>
                <table width="20" height="35" border="0" cellspacing="0" cellpadding="0" align="left">
                <tr>
                    <td width="20" height="35" valign="top">
                        <a href="https://www.thebookpeople.co.uk/webapp/wcs/stores/servlet/LogonForm?storeId=10001&amp;langId=100&amp;catalogId=10051&amp;krypto=e2abbIGnJHv3T%2F0NzOU32NbLj59MArqVHJiPnuVOD7RKDS%2BuM4k8Jn5rAUYh0HblRKxtu5gr4b%2BR%0AepdaAEdpAwq5JOMQHSwxFN52B%2F%2B3Ne8fxWiAhzgjafia7tt2HD5d&amp;ddkey=https:account_summary&amp;cm_mmc=Email-_-TBP%20275-_-Debut%20Fiction-_-Childrens%20Books%20Footer&amp;istCompanyId=9E28718B-80EC-4C70-9F52-4431EC3FF1DE&amp;istItemId=ilmaaxaw"><img src="http://ww1.thebookpeople.co.uk/tbpemail/images/NewEmailTemplate/NEW_2013/iconSignIn.jpg" width="20" height="35" border="0" style="display:block;" /></a>
                    </td>
                </tr>
                </table>
                <table width="56" height="35" border="0" cellspacing="0" cellpadding="0" align="left">
                <tr>
                    <td width="56" height="35" valign="middle" style="font-family:Arial, Helvetica, sans-serif; color:#ffffff; font-size:13px; text-decoration:none; text-align:center; font-weight:bold;">
                        <a style="color:#ffffff; text-decoration:none;" href="https://www.thebookpeople.co.uk/webapp/wcs/stores/servlet/LogonForm?storeId=10001&amp;langId=100&amp;catalogId=10051&amp;krypto=e2abbIGnJHv3T%2F0NzOU32NbLj59MArqVHJiPnuVOD7RKDS%2BuM4k8Jn5rAUYh0HblRKxtu5gr4b%2BR%0AepdaAEdpAwq5JOMQHSwxFN52B%2F%2B3Ne8fxWiAhzgjafia7tt2HD5d&amp;ddkey=https:account_summary&amp;cm_mmc=Email-_-TBP%20275-_-Debut%20Fiction-_-Childrens%20Books%20Footer&amp;istCompanyId=9E28718B-80EC-4C70-9F52-4431EC3FF1DE&amp;istItemId=ilmaaxaw">Sign In</a>
                    </td>
                </tr>
                </table>
            </td>
            <td width="10" valign="top">
            </td>
        </tr>
        </table>
    </td>
</tr>

Gmail app apologist
thebookpeople, 3 years ago

I'm afraid that has made no difference. It's still dropping down. I suspect it may be something within our Responsys marketing suite that I use to send out emails but I'm not sure what. I may have to contact them if I can't figure this out.

JohnP JohnP, 3 years ago

If you look at the output code in Outlook it will reveal what has changed.

Easiest way to do that is to right-click just inside the bottom edge of the email view window (below your html) and select 'view source' Should open in your default text editor and you can compare it from there with your intended code.

Redferret, 3 years ago

Other options > view source is another way to see the code.

You could have a problem with another part of the HTML, for instance, if this section of the code is wrapped in a cell thats not wide enough or if the DOCTYPE of the HTML is non-existent or set to LOOSE which can produce spacing issues in the HTML box model


Gmail app apologist
thebookpeople, 3 years ago

No change in the code I'm afraid. I may have to place it in one table with multiple columns as a short term fix until I can figure out why it's doing this.

Redferret, 3 years ago

Hmm, this has me pretty stumped, it turns out Outlook is putting a space between each table, but i'm sure this method is pretty standard. I'm going to try a few things, my first thought is that it could be related to the height of the cell.


Gmail app apologist
alluremail alluremail, 3 years ago

[Edit: Just noticed your comment about using one table and columns.]

Yes, I would definitely recommend re-coding the footer nav area, minimising the amount of tables used.

I have tested a 1 table version in Litmus and the results appear consistent in Outlook:
Outlook 2007
Outlook 2010
Outlook 2013

I haven't run a test to the inbox yet but please give the below code a try and let me know how it goes.

<!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>
<!--BEGIN ORIGINAL FOOTER-->    

    <p align="center">10 x Tables </p>
    <table width="660" height="35" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#c50000" style="">
        <tr>
            <td width="10" valign="top">
            </td>
            <td width="640" height="35" valign="top">
                <table width="55" height="35" border="0" cellspacing="0" cellpadding="0" align="left" style="border-right:1px solid #9e0000;">
                <tr>
                    <td align="center" height="35" width="55" valign="middle" style="font-family:Arial, Helvetica, sans-serif; color:#ffffff; font-size:14px; text-decoration:none; text-align:center; font-weight:bold;">
                        <a style="color:#ffffff; text-decoration:none;" href="http://www.thebookpeople.co.uk/webapp/wcs/stores/servlet/qs_home_tbp?storeId=10001&amp;catalogId=10051&amp;langId=100&amp;cm_mmc=Email-_-TBP%20275-_-Debut%20Fiction-_-Books%20Footer&amp;istCompanyId=9E28718B-80EC-4C70-9F52-4431EC3FF1DE&amp;istItemId=ilmaaxaw">Books</a>
                    </td>
                </tr>
                </table>
                <table width="72" height="35" border="0" cellspacing="0" cellpadding="0" align="left" style="border-right:1px solid #9e0000">
                <tr>
                    <td align="center" height="35" width="72" valign="middle" style="font-family:Arial, Helvetica, sans-serif; color:#ffffff; font-size:14px; text-decoration:none; text-align:center; font-weight:bold;">
                        <a style="color:#ffffff; text-decoration:none;" href="http://www.thebookpeople.co.uk/webapp/wcs/stores/servlet/CategoryDisplay?storeId=10001&amp;categoryId=111215&amp;langId=100&amp;storeId=10001&amp;catalogId=10051&amp;langId=100&amp;cm_mmc=Email-_-TBP%20275-_-Debut%20Fiction-_-eBooks%20Footer&amp;istCompanyId=9E28718B-80EC-4C70-9F52-4431EC3FF1DE&amp;istItemId=ilmaaxaw">eBooks</a>
                    </td>
                </tr>
                </table>
            
              <table width="80" height="35" border="0" cellspacing="0" cellpadding="0" align="left" style="border-right:1px solid #9e0000">
                <tr>
                    <td align="center" height="35" width="80" valign="middle" style="font-family:Arial, Helvetica, sans-serif; color:#ffffff; font-size:14px; text-decoration:none; text-align:center; font-weight:bold;">
                        <a style="color:#ffffff; text-decoration:none;" href="http://www.thebookpeople.co.uk/webapp/wcs/stores/servlet/CategoryDisplay?storeId=10001&amp;categoryId=85207&amp;langId=100&amp;storeId=10001&amp;catalogId=10051&amp;langId=100&amp;cm_mmc=Email-_-TBP%20275-_-Debut%20Fiction-_-Childrens%20Footer&amp;istCompanyId=9E28718B-80EC-4C70-9F52-4431EC3FF1DE&amp;istItemId=ilmaaxaw">Children's</a>
                    </td>
                </tr>
                </table>
                <table width="72" height="35" border="0" cellspacing="0" cellpadding="0" align="left" >
                <tr>
                    <td align="center" height="35" width="72" valign="middle" style="font-family:Arial, Helvetica, sans-serif; color:#ffffff; font-size:14px; text-decoration:none; text-align:center; font-weight:bold;">
                    <a style="color:#ffffff; text-decoration:none;" href="http://www.thebookpeople.co.uk/webapp/wcs/stores/servlet/qs_specialOffers_tbp?storeId=10001&amp;langId=100&amp;catalogId=10051&amp;cm_mmc=Email-_-TBP%20275-_-Debut%20Fiction-_-Sign%20In%20Footer&amp;istCompanyId=9E28718B-80EC-4C70-9F52-4431EC3FF1DE&amp;istItemId=ilmaaxaw">Offers</a>
                    </td>
                </tr>
                </table>
                <table width="203" height="35" border="0" align="left" cellpadding="0" cellspacing="0">
                <tr>
                    <td width="203" height="35">
                        
                    </td>
                </tr>
                </table>
                <table width="20" height="35" border="0" cellspacing="0" cellpadding="0" align="left">
                <tr>
                    <td width="20" height="35" valign="top">
                        <a href="https://www.thebookpeople.co.uk/webapp/wcs/stores/servlet/account_register?productId=&amp;storeId=10001&amp;langId=100&amp;catalogId=10051&amp;krypto=1LTisP7s9G3DyBMZhH9gc8KhDkCNVykYQnFoEAuGMX6G0Eht3z%2FpMJfgtfNyHMeputlIVYXsTsQ%3D&amp;ddkey=http:account_register&amp;cm_mmc=Email-_-TBP%20275-_-Debut%20Fiction-_-Sign%20In%20Footer&amp;istCompanyId=9E28718B-80EC-4C70-9F52-4431EC3FF1DE&amp;istItemId=ilmaaxaw"><img src="http://ww1.thebookpeople.co.uk/tbpemail/images/NewEmailTemplate/NEW_2013/iconRegister.jpg" width="20" height="35" border="0" style="display:block;" /></a>
                    </td>
                </tr>
                </table>
                <table width="59" height="35" border="0" cellspacing="0" cellpadding="0" align="left">
                <tr>
                    <td height="35" width="59" style="font-family:Arial, Helvetica, sans-serif; color:#ffffff; font-size:13px; text-decoration:none; text-align:center; font-weight:bold;">
                        <a style="color:#ffffff; text-decoration:none;" href="https://www.thebookpeople.co.uk/webapp/wcs/stores/servlet/account_register?productId=&amp;storeId=10001&amp;langId=100&amp;catalogId=10051&amp;krypto=1LTisP7s9G3DyBMZhH9gc8KhDkCNVykYQnFoEAuGMX6G0Eht3z%2FpMJfgtfNyHMeputlIVYXsTsQ%3D&amp;ddkey=http:account_register&amp;cm_mmc=Email-_-TBP%20275-_-Debut%20Fiction-_-Sign%20In%20Footer&amp;istCompanyId=9E28718B-80EC-4C70-9F52-4431EC3FF1DE&amp;istItemId=ilmaaxaw">Register</a>
                    </td>
                </tr>
                </table>
                <table width="20" height="35" border="0" cellspacing="0" cellpadding="0" align="left">
                <tr>
                    <td width="20" height="35" valign="top">
                        <a href="https://www.thebookpeople.co.uk/webapp/wcs/stores/servlet/LogonForm?storeId=10001&amp;langId=100&amp;catalogId=10051&amp;krypto=e2abbIGnJHv3T%2F0NzOU32NbLj59MArqVHJiPnuVOD7RKDS%2BuM4k8Jn5rAUYh0HblRKxtu5gr4b%2BR%0AepdaAEdpAwq5JOMQHSwxFN52B%2F%2B3Ne8fxWiAhzgjafia7tt2HD5d&amp;ddkey=https:account_summary&amp;cm_mmc=Email-_-TBP%20275-_-Debut%20Fiction-_-Childrens%20Books%20Footer&amp;istCompanyId=9E28718B-80EC-4C70-9F52-4431EC3FF1DE&amp;istItemId=ilmaaxaw"><img src="http://ww1.thebookpeople.co.uk/tbpemail/images/NewEmailTemplate/NEW_2013/iconSignIn.jpg" width="20" height="35" border="0" style="display:block;" /></a>
                    </td>
                </tr>
                </table>
                <table width="56" height="35" border="0" cellspacing="0" cellpadding="0" align="left">
                <tr>
                    <td width="56" height="35" valign="middle" style="font-family:Arial, Helvetica, sans-serif; color:#ffffff; font-size:13px; text-decoration:none; text-align:center; font-weight:bold;">
                        <a style="color:#ffffff; text-decoration:none;" href="https://www.thebookpeople.co.uk/webapp/wcs/stores/servlet/LogonForm?storeId=10001&amp;langId=100&amp;catalogId=10051&amp;krypto=e2abbIGnJHv3T%2F0NzOU32NbLj59MArqVHJiPnuVOD7RKDS%2BuM4k8Jn5rAUYh0HblRKxtu5gr4b%2BR%0AepdaAEdpAwq5JOMQHSwxFN52B%2F%2B3Ne8fxWiAhzgjafia7tt2HD5d&amp;ddkey=https:account_summary&amp;cm_mmc=Email-_-TBP%20275-_-Debut%20Fiction-_-Childrens%20Books%20Footer&amp;istCompanyId=9E28718B-80EC-4C70-9F52-4431EC3FF1DE&amp;istItemId=ilmaaxaw">Sign In</a>
                    </td>
                </tr>
                </table>
            </td>
            <td width="10" valign="top">
            </td>
      </tr>
      </table>
<!--END ORIGINAL FOOTER-->    

    <p align="center">1 x Table</p>


<!--BEGIN RECODED FOOTER-->    
    <table width="660" border="0" cellspacing="0" cellpadding="0" align="center">
      <tr>
        <td width="10" height="35" bgcolor="#C50000">&nbsp;</td>
        <td width="55" height="35" align="center" valign="middle" bgcolor="#C50000" style="font-family:Arial, Helvetica, sans-serif; color:#ffffff; font-size:14px; text-decoration:none; text-align:center; font-weight:bold;"><a style="color:#ffffff; text-decoration:none;" href="http://www.thebookpeople.co.uk/webapp/wcs/stores/servlet/qs_home_tbp?storeId=10001&amp;catalogId=10051&amp;langId=100&amp;cm_mmc=Email-_-TBP%20275-_-Debut%20Fiction-_-Books%20Footer&amp;istCompanyId=9E28718B-80EC-4C70-9F52-4431EC3FF1DE&amp;istItemId=ilmaaxaw">Books</a></td>
        <td width="72" height="35" align="center" valign="middle" bgcolor="#C50000" style="font-family:Arial, Helvetica, sans-serif; color:#ffffff; font-size:14px; text-decoration:none; text-align:center; font-weight:bold; border-left:solid; border-width:1px; border-color:#990000;"><a style="color:#ffffff; text-decoration:none;" href="http://www.thebookpeople.co.uk/webapp/wcs/stores/servlet/CategoryDisplay?storeId=10001&amp;categoryId=111215&amp;langId=100&amp;storeId=10001&amp;catalogId=10051&amp;langId=100&amp;cm_mmc=Email-_-TBP%20275-_-Debut%20Fiction-_-eBooks%20Footer&amp;istCompanyId=9E28718B-80EC-4C70-9F52-4431EC3FF1DE&amp;istItemId=ilmaaxaw">eBooks</a></td>
        <td width="80" height="35" align="center" valign="middle" bgcolor="#C50000" style="font-family:Arial, Helvetica, sans-serif; color:#ffffff; font-size:14px; text-decoration:none; text-align:center; font-weight:bold; border-left:solid; border-width:1px; border-color:#990000"><a style="color:#ffffff; text-decoration:none;" href="http://www.thebookpeople.co.uk/webapp/wcs/stores/servlet/CategoryDisplay?storeId=10001&amp;categoryId=85207&amp;langId=100&amp;storeId=10001&amp;catalogId=10051&amp;langId=100&amp;cm_mmc=Email-_-TBP%20275-_-Debut%20Fiction-_-Childrens%20Footer&amp;istCompanyId=9E28718B-80EC-4C70-9F52-4431EC3FF1DE&amp;istItemId=ilmaaxaw">Children's</a></td>
        <td width="72" height="35" align="center" valign="middle" bgcolor="#C50000" style="font-family:Arial, Helvetica, sans-serif; color:#ffffff; font-size:14px; text-decoration:none; text-align:center; font-weight:bold; border-left:solid; border-width:1px; border-color:#990000"><a style="color:#ffffff; text-decoration:none;" href="http://www.thebookpeople.co.uk/webapp/wcs/stores/servlet/qs_specialOffers_tbp?storeId=10001&amp;langId=100&amp;catalogId=10051&amp;cm_mmc=Email-_-TBP%20275-_-Debut%20Fiction-_-Sign%20In%20Footer&amp;istCompanyId=9E28718B-80EC-4C70-9F52-4431EC3FF1DE&amp;istItemId=ilmaaxaw">Offers</a></td>
        <td height="35" bgcolor="#C50000">&nbsp;</td>
        <td height="35" bgcolor="#C50000">&nbsp;</td>
        <td width="20" height="35" valign="top" bgcolor="#C50000"><a href="https://www.thebookpeople.co.uk/webapp/wcs/stores/servlet/account_register?productId=&amp;storeId=10001&amp;langId=100&amp;catalogId=10051&amp;krypto=1LTisP7s9G3DyBMZhH9gc8KhDkCNVykYQnFoEAuGMX6G0Eht3z%2FpMJfgtfNyHMeputlIVYXsTsQ%3D&amp;ddkey=http:account_register&amp;cm_mmc=Email-_-TBP%20275-_-Debut%20Fiction-_-Sign%20In%20Footer&amp;istCompanyId=9E28718B-80EC-4C70-9F52-4431EC3FF1DE&amp;istItemId=ilmaaxaw"><img src="http://ww1.thebookpeople.co.uk/tbpemail/images/NewEmailTemplate/NEW_2013/iconRegister.jpg" alt="" width="20" height="35" border="0" style="display:block;" /></a></td>
        <td width="59" height="35" bgcolor="#C50000" style="font-family:Arial, Helvetica, sans-serif; color:#ffffff; font-size:13px; text-decoration:none; text-align:center; font-weight:bold;"><a style="color:#ffffff; text-decoration:none;" href="https://www.thebookpeople.co.uk/webapp/wcs/stores/servlet/account_register?productId=&amp;storeId=10001&amp;langId=100&amp;catalogId=10051&amp;krypto=1LTisP7s9G3DyBMZhH9gc8KhDkCNVykYQnFoEAuGMX6G0Eht3z%2FpMJfgtfNyHMeputlIVYXsTsQ%3D&amp;ddkey=http:account_register&amp;cm_mmc=Email-_-TBP%20275-_-Debut%20Fiction-_-Sign%20In%20Footer&amp;istCompanyId=9E28718B-80EC-4C70-9F52-4431EC3FF1DE&amp;istItemId=ilmaaxaw">Register</a></td>
        <td width="20" height="35" valign="top" bgcolor="#C50000"><a href="https://www.thebookpeople.co.uk/webapp/wcs/stores/servlet/LogonForm?storeId=10001&amp;langId=100&amp;catalogId=10051&amp;krypto=e2abbIGnJHv3T%2F0NzOU32NbLj59MArqVHJiPnuVOD7RKDS%2BuM4k8Jn5rAUYh0HblRKxtu5gr4b%2BR%0AepdaAEdpAwq5JOMQHSwxFN52B%2F%2B3Ne8fxWiAhzgjafia7tt2HD5d&amp;ddkey=https:account_summary&amp;cm_mmc=Email-_-TBP%20275-_-Debut%20Fiction-_-Childrens%20Books%20Footer&amp;istCompanyId=9E28718B-80EC-4C70-9F52-4431EC3FF1DE&amp;istItemId=ilmaaxaw"><img src="http://ww1.thebookpeople.co.uk/tbpemail/images/NewEmailTemplate/NEW_2013/iconSignIn.jpg" alt="" width="20" height="35" border="0" style="display:block;" /></a></td>
        <td width="56" height="35" valign="middle" bgcolor="#C50000" style="font-family:Arial, Helvetica, sans-serif; color:#ffffff; font-size:13px; text-decoration:none; text-align:center; font-weight:bold;"><a style="color:#ffffff; text-decoration:none;" href="https://www.thebookpeople.co.uk/webapp/wcs/stores/servlet/LogonForm?storeId=10001&amp;langId=100&amp;catalogId=10051&amp;krypto=e2abbIGnJHv3T%2F0NzOU32NbLj59MArqVHJiPnuVOD7RKDS%2BuM4k8Jn5rAUYh0HblRKxtu5gr4b%2BR%0AepdaAEdpAwq5JOMQHSwxFN52B%2F%2B3Ne8fxWiAhzgjafia7tt2HD5d&amp;ddkey=https:account_summary&amp;cm_mmc=Email-_-TBP%20275-_-Debut%20Fiction-_-Childrens%20Books%20Footer&amp;istCompanyId=9E28718B-80EC-4C70-9F52-4431EC3FF1DE&amp;istItemId=ilmaaxaw">Sign In</a></td>
        <td width="10" height="35" bgcolor="#C50000">&nbsp;</td>
      </tr>
    </table>
  <!--END RECODED FOOTER-->    

</body>
</html>
Redferret, 3 years ago

Alluremail's solution should work fine, though i wish I could say I've solved the issue, it's looking like contrary to my previous posts it is indeed a quirk of Outlook, I've been mining the documentation to find some styling that may be accountable for the 1px gaps I'm now seeing between tables but it fear it's more deeply rooted in Outlook's code.

There are solutions out there for this issue but they're all for two column layouts, plus they're all pretty convoluted and in my eyes, not really workable.


Gmail app apologist
thebookpeople, 3 years ago

alluremail, I did try reducing the number of tables before; the register and sign in tables I placed in one and the others in another but I was still having the same issue in that the right most table still dropped down???

For me placing the content in one table with multiple columns is a short term fix as I am building these emails to be responsive and so having a single table of a fixed width with columns won't work for this purpose. This is a weird problem as the header is built using the same method and works fine.

As I said previously I can make it appear on one line but it would mean reducing the width of the separator table between "Offers" and the Register icon by about 35 pixels. This will make it appear correct within Outlook 07, 10 and 13 but in every other email client it appears grossly indented.

thebookpeople, 3 years ago

Ok I think I've managed to sort this. I've reduced the number of tables to 3 so one for the 4 category menus, one for the separator and one for the register and sign in section. I then removed some of the <span style="margin: 0px; mso-table-lspace: 0; mso-table-rspace: 0"></span> so that it is only on the first td tag of each table and it seems to work fine.
Hopefully I will be able to still use this method responsively but thanks to everyone who has given their thoughts on this!

Redferret, 3 years ago

I'm surprised that works, from my research i found that Outlook inserts

<p><o:p></o:p></p>

between each left aligned table cell, resulting in at least a 1px gap between each.

A good way to solve this issue is to use a single table, then in your media query use display:block; to stack them for mobiles.


Gmail app apologist
thebookpeople, 3 years ago

Oh really? I didn't know you could do that for media queries? I thought each table had to be left aligned individually so they drop down depending on the width of the screen?

Redferret, 3 years ago

Yeah, display:block puts a line break before and after the element so each td can sit on it's own line, of course it's not semantically correct but it does work, ju8st make sure you also set the width to 100%.

The solution gets more difficult if you want several columns on mobile though


Gmail app apologist
thebookpeople, 3 years ago

Oh ok. I would typically build for a two-column layout. Does display:block work on all email clients?

thebookpeople, 3 years ago

All email clients responsively that is!

roshodgekiss roshodgekiss, 3 years ago

Hi there thebookpeople, display: block; should work in most responsive and mobile email clients. Let us know how you go :)


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