Outlook 2013 Left Align Table Text Wrap Glitch

The disappointing Outlook 2013 has an all new strange glitch that does not appear in 2010,07,03 or any other client. Tables are cutting off the edge of text when a table is left aligned within text to have the text wrap around it, but only in certain situations...

- Only in Outlook 2013 does this glitch appear.

- Weirdest of all, this glitch only appears if there is a background color (bgcolor or style) applied to any parent or ancestor tables or cells. (which is very likely to be the case most of the time)

- Also strange, it only appears on left aligned tables.

I thought, good God, will I now have to use an image aligned next to my element every time I want padding on a word wrapped element?! (which does work but is a real pain and ridiculous in the year 2013) Also, the ancient hspace works, but as you know it is symmetrical space making the other side not align with the paragraph edge.

Luckily I found a quick non-intrusive fix, just set any parent or ancestor TABLE (not cell) to align left. I would use the outer-most table just to set it and forget it. You can still set that same table's cell align to whatever you want.

Needless to say, I find this a very odd new glitch and am also baffled by why Outlook has not only made no progress in HTML rendering but actually went backwards... sigh. Here's to 5+ more years of coding like it's 1996.

See the examples below.


roshodgekiss roshodgekiss, 3 years ago

Oh goodness DrippingTadpole, thank you so much for sharing this! I can't believe how ridiculous Outlook's quirks are getting here and am so glad you've found a fix. We'll certainly keep this glitch in mind, should it come up for other customers.

Thank you, DrippingTadpole - we really have to keep sharing this stuff!

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

You just saved my bacon, DrippingTadpole.  Thanks for posting!!

BThies BThies, 2 years ago

This doesn't always work, especially with Outlook 2013.  If you're finding that's the case, you can try this in your code:

<!--[if gte mso 15]>
<table align="left" width="250" cellpadding="0" cellspacing="0" border="0" style="mso-table-rspace:5.75pt; margin-right:3.5pt;"><tr><td width="150">
<table align="left" width="250" cellpadding="0" cellspacing="0" border="0">
        <td width="240">
            <img src="http://lorempixel.com/240/240" width="240" border="0" />
            <div style="font-size:8px; line-height:10px;">&nbsp;</div>
        <td width="10" class="hide"></td>
<!--[if gte mso 15]>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas arcu ligula, consequat non risus nec, mollis adipiscing erat. Maecenas commodo, nisl at pretium ultrices, nulla libero pulvinar massa, eu venenatis eros elit eu ante. Mauris erat enim, ornare sit amet lorem sit amet, sodales lobortis diam. Vivamus metus urna, placerat at sagittis et, eleifend a leo. Sed condimentum mollis magna vel sodales. Nunc scelerisque volutpat ornare. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. 

Brian Thies
Professional Email Developer
Thies Publishing

We just had a bit of an extreme version of this.
But we had the image wrapped in a table to allow for a caption underneath (conforming to the width of the image) over a dark grey background.

So text wrapping around an aligned table...

I have just discovered removing the background color off all parent tables (right up to the initial centered table) has fixed the problem, granted our background is white.

No idea what we would do if it was another colour. I guess we'll see when that day arrives ;)

Twitter: https://twitter.com/Nivicious88
Dribbble: https://dribbble.com/Nivicious
Codepen: http://codepen.io/Nivicious/

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