Uh oh! This fix has unexplainably stopped working. We recommend Email on Acid’s fix instead.

Finally getting atop an annoying email rendering bug gives geeks like us near-endless, t-shirt removing satisfaction. Especially when it’s plaguing our newsletters. In this instance, our adversary was 3px spacing to the left and right of tables with align="" applied to them. The stage was Outlook 2007 and 2010. While this has been a long-running issue, things really came to a head when I was coding our latest email newsletter, only to find that two text boxes nested in a table would not sit alongside each other, thanks to said gaps:

Spacing around table in Outlook 2007

Using align="" to float tables alongside each other is starting to be used as an easy way to convert a regular 2 column email design to a ‘wrapped’ 1 column on mobile devices. We’ll cover how to do this in the blog shortly.

Anyway, after an agonizing hour or so of trying to close the gaps with padding and margin, I scheduled the campaign and walked away in defeat, knowing all too well that our Outlook-using subscribers would see the awkward gaps. Yes, I’d coaxed the boxes to sit beside each other, but it just wasn’t perfect. And anyone who knows how I code email designs knows that not perfect is simply not good enough.

Time passed and things settled down. That’s until a customer contacted us on the forums about the same issue.

Going gap-free

Instantly, my primordial feelings, my white-knuckled combat response returned. “There’s no workaround for this.” I typed. It felt like one of those scenes where the righteous cop hands over his badge and gun, locked in an expression of both impotence and rage.

There was no workaround, until another customer chimed in.

Known only as dedra and slinging a line of Microsoft Office proprietary CSS, he had a near-solution – that is, using mso properties to control spacing between elements. The brain juices started flowing. I started googling around and found the answer tucked away on Emailology, a genuine Aladdin’s cave of email design treasure.
To remove the spacing, simply add the following to your CSS styles…

table { border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; }

… or inline it like so…

...

… and the gaps will be no more. The end result is a great-looking email newsletter:

No gaps in Outlook 2007

Many thanks to Emailology, the mysterious dedra and all our customers on the forums for this fix. We’re now free to create responsive email designs with floating tables, that look just as lovely in Outlook 2007 and 2010, as in any other email client.

Send better email campaigns Subscribe to our email course to learn how to create and send high-performing email campaigns that drive results for your business. GET THE FREE EMAIL COURSE
  • http://www.campaignmonitor.com/our-story/meet-the-team/#rosh Ros Hodgekiss

    HI Paul, what you may be describing is this Outlook 2007 / 2010 space issue. The skinny is that when tables have rowspans exceeding 23.7in in height, gaps start to appear.

    Email on Acid above have a couple of suggestions, that may be of use. Let us know how you go :)

  • Paul

    I get strange vertical gaps in Outlook 2007 (and only this program) in the actual COPY of my newsletter, and it drives me nuts… happens often when I try to right or left align an image in a newsletter article. Have never figured out a workaround. E.g., might have look something like this (supposed to be ONE paragraph):

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam massa neque, ornare vitae imperdiet id, aliquet id ligula.

    [large gap appears here]

    Sed rutrum nunc ut quam tincidunt ac volutpat ligula aliquet. Aenean elementum tortor vitae nibh porta aliquet. Aliquam erat volutpat. Pellentesque egestas placerat elit, at blandit enim rutrum non.

    If anyone has a hack for this one, I would be MUCH appreciative. THANK YOU.

  • Justin Amphlett

    I’ve found wrapping tables in conditional code aimed at just Outlook provides a pretty bulletproof method. Although your version uses much less code.x0ax0aSo two tables floating next to each other, with an extra table containing them:x0ax0a<!–[if gte mso 9]>

    < ![endif]-->x0aTABLE 1 HEREx0a<!--[if gte mso 9]> < ![endif]-->x0aTABLE 2 HEREx0a<!--[if gte mso 9]>

  • Step

    Thank you for this tip, this is really helpful! x0ax0a<3 Campaign Monitor

  • CMaddict

    Can’t wait for the blog post about “”convert a regular 2 column email design to a ‘wrapped’ 1 column on mobile devices”” …have a campaign in the hopper that just needs this solution so it can go out…

  • CMaddict

    Hey Ros, x0ax0aWorked a treat.. Thanks!

  • Konrad

    There is mistake in the text:

    Outlook 2007 and 2007

    not perfect is simply not good enough! 😉

  • http://www.campaignmonitor.com/our-story/meet-the-team/#rosh Ros Hodgekiss

    Haha, you got me, Konrad! Just fixed that up, thanks for spotting the typo 😀

  • http://matrix.co.uk/ Mark

    Couldn’t get Email on Acid’s new fix to work.
    But more through luck than judgement, I got my aligned left tables to play nicely on Outlook 2007/10 by adding style=”mso-table-lspace:0;mso-table-rspace:0;” to the first in the tables.

  • http://matrix.co.uk/ Mark

    Oops, that should read by: adding style=”mso-table-lspace:0;mso-table-rspace:0;” to the first td in the tables.

    Apologies.

  • http://www.juliagosling.co.uk Julia

    thankyou thankyou thankyou! Solved my table padding issues which were threatening to drive me crazy. 😉

Want to improve your email marketing? Subscribe to get tips on improving your email marketing delivered to your inbox.
X

Join 120,000 companies around the world that use Campaign Monitor to run email marketing campaigns that deliver results for their business.

Get started for free