Left aligned tables have odd space after them in Outlook 2010

Howdy all,

I have a main table that is 600 pixels wide and three tables inside left aligned that are 200 pixels each. I am trying to code this so when viewed on a desktop computer the 3 tables will align beside each other and when on a mobile phone they will wrap underneath each other. I have this working on the mobile phone but for some reason Outlook 2010 adds a weird space after the first table which causes the third table to wrap (see screenshot).

http://www.ivey.uwo.ca/images/space-error.jpg

I found this article that shows how to remove this spacing but it doesn't seem to be working for me. Here is the code for my test page

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="format-detection" content="telephone=no" />
<title>Untitled Document</title>
<style>
    table {border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; margin: 0; padding: 0;}
    table td {border-collapse: collapse; margin: 0; padding: 0;}
    p, html, body {margin: 0; padding: 0;}
</style>
</head>

<body bgcolor="#e4e4e4" topmargin="0" leftmargin="0" marginheight="0" marginwidth="0" style="-webkit-font-smoothing: antialiased;width:100% !important;background:#e4e4e4;-webkit-text-size-adjust:none;">
<table border="0" width="600" cellspacing="0" cellpadding="0" align="left" class="tableshrink" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; padding: 0; margin: 0;">
  <tr>
    <td><table width="200" border="0" align="left" cellpadding="0" cellspacing="0" class="tableshrink" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; padding: 0; margin: 0;">
      <tr>
        <td bgcolor="#00CC99">Content in 1</td>
      </tr>
      <tr>
        <td bgcolor="#00CC99">&nbsp;</td>
      </tr>
      <tr>
        <td bgcolor="#00CC99">&nbsp;</td>
      </tr>
      <tr>
        <td bgcolor="#00CC99">&nbsp;</td>
      </tr>
      <tr>
        <td bgcolor="#00CC99">&nbsp;</td>
      </tr>
    </table>
      <table width="200" border="0" align="left" cellpadding="0" cellspacing="0" class="tableshrink" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; padding: 0; margin: 0;">
      <tr>
        <td bgcolor="#33FFFF">Content in 2</td>
      </tr>
      <tr>
        <td bgcolor="#33FFFF">&nbsp;</td>
      </tr>
      <tr>
        <td bgcolor="#33FFFF">&nbsp;</td>
      </tr>
      <tr>
        <td bgcolor="#33FFFF">&nbsp;</td>
      </tr>
      <tr>
        <td bgcolor="#33FFFF">&nbsp;</td>
      </tr>
    </table>
      <table width="200" border="0" align="left" cellpadding="0" cellspacing="0" class="tableshrink" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; padding: 0; margin: 0;">
        <tr>
          <td bgcolor="#993366">Content in 3</td>
        </tr>
        <tr>
          <td bgcolor="#993366">&nbsp;</td>
        </tr>
        <tr>
          <td bgcolor="#993366">&nbsp;</td>
        </tr>
        <tr>
          <td bgcolor="#993366">&nbsp;</td>
        </tr>
        <tr>
          <td bgcolor="#993366">&nbsp;</td>
        </tr>
    </table></td>
  </tr>
  <tr>
  <td><unsubscribe>Unsubscribe here</unsubscribe></td>
  </tr>
</table>
</body>
</html>

Is there anyone that has had this issue before and found a fix for it? Am I doing something wrong?

Any help would be appreciated!

Thanks!

Chris

roshodgekiss roshodgekiss, 4 years ago

Hey there Chris, I've been tearing my hair out over this, too. It seems like this fix is no longer working for some reason, so I've called in the troops from our original post. Hopefully they'll have a workaround we can try. Sorry about this, I'm just as perplexed as you!


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

I've found a partial solution to the problem.
1. You do not need to align the containing table or the last table in your row to left.
2. style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;" should only be applied to a table that is being aligned left. (Only the green and blue boxes in the above example)
3. margin="0" and padding="0" do not have any effect on the spacing so it can be removed.

The changes above will give you a 1px gap to the right of the green box and to the right of the blue box.

Rheal, 4 years ago

Slightly revised code (still needs some cleanup).

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="format-detection" content="telephone=no" />
<title>Untitled Document</title>
<style>
    table.tableshrink {border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; margin:0; padding:0;}
    table td {border-collapse: collapse; margin: 0; padding: 0;}
    p, html, body {margin: 0; padding: 0;}
</style>
</head>

<body bgcolor="#e4e4e4" topmargin="0" leftmargin="0" marginheight="0" marginwidth="0" style="-webkit-font-smoothing: antialiased;width:100% !important;background:#e4e4e4;-webkit-text-size-adjust:none;">
<table border="0" width="600" cellspacing="0" cellpadding="0">
  <tr>
    <td><table width="199" border="0" align="left" class="tableshrink" border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; margin:0; padding:0;>
      <tr>
        <td bgcolor="#00CC99">Content in 1</td>
      </tr>
      <tr>
        <td bgcolor="#00CC99">&nbsp;</td>
      </tr>
      <tr>
        <td bgcolor="#00CC99">&nbsp;</td>
      </tr>
      <tr>
        <td bgcolor="#00CC99">&nbsp;</td>
      </tr>
      <tr>
        <td bgcolor="#00CC99">&nbsp;</td>
      </tr>
    </table>
      <table width="199" border="0" align="left" class="tableshrink" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; margin:0; padding:0;">
      <tr>
        <td bgcolor="#33FFFF">Content in 2</td>
      </tr>
      <tr>
        <td bgcolor="#33FFFF">&nbsp;</td>
      </tr>
      <tr>
        <td bgcolor="#33FFFF">&nbsp;</td>
      </tr>
      <tr>
        <td bgcolor="#33FFFF">&nbsp;</td>
      </tr>
      <tr>
        <td bgcolor="#33FFFF">&nbsp;</td>
      </tr>
    </table>
      <table width="200" border="0">
        <tr>
          <td bgcolor="#993366">Content in 3</td>
        </tr>
        <tr>
          <td bgcolor="#993366">&nbsp;</td>
        </tr>
        <tr>
          <td bgcolor="#993366">&nbsp;</td>
        </tr>
        <tr>
          <td bgcolor="#993366">&nbsp;</td>
        </tr>
        <tr>
          <td bgcolor="#993366">&nbsp;</td>
        </tr>
    </table></td>
  </tr>
  <tr>
  <td><unsubscribe>Unsubscribe here</unsubscribe></td>
  </tr>
</table>
</body>
</html>
roshodgekiss roshodgekiss, 4 years ago

Nice one, Rheal - that's well, unreal! Def worth a try. The other suggestion I had sent in is from email design superstar Michelle Klann, at Email on Acid. Her suggested approach is:

I was able to get them nice and snug by doing the following:

1.) Add inline border:1px solid #00CC99 to each table floating left (using a custom color)
2.) Decrease the width of the floating table by 2px
3.) Wrap the content in a paragraph tag:
<p style="mso-table-lspace:-2.25pt;mso-table-rspace:-2.25pt; margin:-2px">Content in 1</p>

A couple final notes:

1.) The issue only seems to occur if you are using left/right align in your nested tables
2.) You only need to embed the contents of your first TD in a P tag
3.) As in the sample attached, you can use "table {border-collapse:collapse}" in your embedded styles
4.) If you have different colors in your table cells you might be forced to nest another table

Massively good stuff from Michelle there. I'll be testing in the week ahead, but if you get a chance to try either of these approaches Chris, please 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
Rheal, 4 years ago

After a bit of testing here's what I came up with. Note: In all browsers other than Outlook there will be a 2pixel gap to the right of the last table (red colour added to background to show gaps).

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="format-detection" content="telephone=no" />
<title>Untitled Document</title>
<style>
    p, html, body {margin: 0; padding: 0;}
</style>
</head>

<body bgcolor="#ffffcc" topmargin="0" leftmargin="0" marginheight="0" marginwidth="0" style="-webkit-font-smoothing: antialiased;width:100% !important;background:#ffffcc;-webkit-text-size-adjust:none;">
<table width="600" cellspacing="0" cellpadding="0" border="0" bgcolor="#ff0000">
  <tr>
    <td>
    <table width="199" cellspacing="0" cellpadding="0" border="0" align="left" style="border-collapse:collapse; border-left: 1px solid #00cc99; border-right: 1px solid #00cc99;">
      <tr>
        <td bgcolor="#00CC99">
            <p style="mso-table-lspace:0pt; mso-table-rspace:0pt;">Content in 1</p>
            <p>more text</p>
        </td>
      </tr>
      <tr>
        <td bgcolor="#00CC99">&nbsp;</td>
      </tr>
      <tr>
        <td bgcolor="#00CC99">&nbsp;</td>
      </tr>
      <tr>
        <td bgcolor="#00CC99">&nbsp;</td>
      </tr>
      <tr>
        <td bgcolor="#00CC99">&nbsp;</td>
      </tr>
    </table>
      <table width="199" cellspacing="0" cellpadding="0"  border="0" align="left" style="border-collapse:collapse; border-left: 1px solid #33ffff; border-right: 1px solid #33ffff;">
      <tr>
        <td bgcolor="#33FFFF">
            <p style="mso-table-lspace:0pt; mso-table-rspace:0pt;">Content in 2</p>
            <p>more text</p>
        </td>
      </tr>
      <tr>
        <td bgcolor="#33FFFF">&nbsp;</td>
      </tr>
      <tr>
        <td bgcolor="#33FFFF">&nbsp;</td>
      </tr>
      <tr>
        <td bgcolor="#33FFFF">&nbsp;</td>
      </tr>
      <tr>
        <td bgcolor="#33FFFF">&nbsp;</td>
      </tr>
    </table>
      <table cellspacing="0" cellpadding="0"  width="200" border="0">
        <tr>
          <td bgcolor="#993366">
              <p>Content in 3</p>
              <p>more text</p>
          </td>
        </tr>
        <tr>
          <td bgcolor="#993366">&nbsp;</td>
        </tr>
        <tr>
          <td bgcolor="#993366">&nbsp;</td>
        </tr>
        <tr>
          <td bgcolor="#993366">&nbsp;</td>
        </tr>
        <tr>
          <td bgcolor="#993366">&nbsp;</td>
        </tr>
    </table>
    </td>
  </tr>
  <tr>
  <td><unsubscribe>Unsubscribe here</unsubscribe></td>
  </tr>
</table>
</body>
</html>
roshodgekiss roshodgekiss, 4 years ago

Hey there Rheal, you've got it in one:

http://f.cl.ly/items/3p1q0M14351s3E0l1b42/left-aligned-tables.png

Nice one - a huge thanks to Michelle from Email on Acid for the fix!


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

Hi everyone,

I took all of your tips and added into my email. I threw in some media query CSS and it seems to look great in Outlook and on mobile phones.

Thanks for all the help!

Chris

roshodgekiss roshodgekiss, 4 years ago

Hey Chris, that's fabulous to hear! Thank you so much for the follow up - we're really looking forward to seeing your newsletters in the wild :D


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

Hey Ros,

How would you see our emails? Is there a way to submit them or something? How do you find your emails you highlight in your gallery?

It would be interesting to get some feedback on design and structure etc....

Chris

roshodgekiss roshodgekiss, 4 years ago

Hey Chris, sorry I didn't see this earlier! We usually choose campaigns via our regular review process, however if you have a design you're particularly proud of, you can always get in touch with our team. Have a good one!


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