Text cut off when wrapping around image in nested table - Outlook 2013

This is driving me nuts. Word wrap using nested tables works great everywhere but Outlook 2013. It cuts off the left side of the text. I have searched all over Internet for a fix, found some, but they didn't work (or I'm doing it wrong).

Here's what it looks like in Outlook:
http://www.20ten.com/external/nested.png

Some of my research pointed me in the direction of using mso-table-lspace and rspace but to no avail.

Here is my code:

<table cellpadding="0" cellspacing="0" border="0" width="400">
    <tr>
        <td width="100%" valign="top" bgcolor="#f5f5f5" style="background-color:#f5f5f5; vertical-align:top;">
            <table width="100%" cellpadding="0" cellspacing="0" border="0">
                <tr>
                    <td width="100%" valign="top" style="vertical-align:top;">
                        <table width="100%" cellpadding="0" cellspacing="0" border="0">
                            <tr>
                                <td width="100%" style="color:#000000; font-size: 12px; line-height: 16px; font-family: Arial, Helvetica, sans-serif;">
                                    <table cellspacing=”0″ cellpadding=”0″ border=”0″ align="left" style="border-width:0px; border-collapse:collapse;">
                                        <tr>
                                            <td border="0" style="border-collapse:collapse; border-width:0;">
                                                <table width="100%" cellpadding="0" cellspacing="0" border="0" style="border-collapse:collapse;">
                                                    <tr>
                                                        <td width="200" style="border-collapse:collapse;"><img style="display:block;" src="http://placekitten.com/200/135" width="200"></td>
                                                        <td width="10"></td>
                                                        </tr>
                                                    </tr>
                                                </table>
                                            </td>
                                        </tr>
                                    </table>
                                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>

Any help would be greatly appreciated!

wilbertheinen wilbertheinen, 2 years ago

A solution that works for me is to add an extra table around the content with an align="left"


Create a Clang!
Dr Madvibe Dr Madvibe, 2 years ago

You've got two closing tr's just after the blank cell on the innermost table. That might have something to do with it ... maybe.

roshodgekiss roshodgekiss, 2 years ago

Hi there jeffaronson, wilbertheinen has the solution. This is a very silly Outlook 2013 bug, for which the overall fix is to put the following on the left-aligned table (ie. the one containing the image):

style="mso-table-rspace:5pt;border-collapse:collapse;border:1px solid #ffffff;"

So the entire table tag looks like so:

<table align="left" border="0" cellpadding="0" cellspacing="0" style="mso-table-rspace:5pt;border-collapse:collapse;border:1px solid #ffffff;">

Hopefully this solves your issue, but 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
aleflocco, 1 year ago

Hi all,

sorry if I post on a 1 year old thread, but I'm facing the same issue, and the solution seems to work except for 1 thing...

I set in the <head> css style the reset code:

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

Then in the table tag I try to overwrite it this way:

<TABLE style="mso-table-rspace: 100pt" cellSpacing=0 cellPadding=0 align=left border=0>

It seems that the "general" css declaration in header overwrites the table specific style.
If I delete the mso-table-rspace: 0pt in header, the table looks god...

Any idea why the general overwrites the "local"?

Thanks a lot
Ale

roshodgekiss roshodgekiss, 1 year ago

Hi there Ale, what is likely happening is that your table {} CSS is being inlined on import and therefore, mso-table-rspace:0pt; is being parsed between the two instances. The other factor is style precendence.

In situations like this, I would recommend using classes or ids to apply styles to this specific element. For example:

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

table.outlook { mso-table-rspace: 100pt }

...

<table class="outlook" cellspacing="0" cellpadding="0" border="0">

Does this make sense? 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
aleflocco, 1 year ago

Hi roshodgekiss,

thanks for your fast reply :)

I already tested the class solution, but it doesn't work for me...
And I also checked the imported code: no inline presence of mso-table-rspace:0pt;

The only solution seems the align="left" attribute to the parent table.

It looks really crazy to me...

thanks a lot
Ale

roshodgekiss roshodgekiss, 1 year ago

I'm sorry we couldn't come up with a better solution, but I thank you for taking the time to test this! Best of luck, aleflocco :)


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor
notasausage notasausage, 9 months ago

Though this post is a few years old, I had this issue today and found this through a Google search, so I thought I should share how I fixed it in case someone else stumbles upon this in the future.

I noticed this bug only in Outlook 2013 via a test on Litmus and a coworker's actual email client. No other Outlook version seems to be affected.

I tried the method Ros suggested with mso-table-rspace at several different point sizes but that just didn't work for me. What did work was a solution I found elsewhere using just a table around the image and then using align="left" on both that table and its parent table (setting align on the parent table is the key).

For example, here's some code:

<table cellspacing="0" cellpadding="0" border="0" width="100%" align="left">
    <tr>
        <td>
            <table cellspacing="0" cellpadding="0" border="0" align="left">
                <tr>
                    <td valign="top" style="padding: 0px 10px 10px 0px;">
                        <img src="photo-inset.jpg" width="144" height="" alt="This is a photo" border="0" align="left" />
                    </td>
                </tr>
            </table>
            <p>
                Cras mattis consectetur purus sit amet fermentum. Donec ullamcorper nulla non metus auctor fringilla. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            </p>
        </td>
    </tr>
</table>

Patrick Haney, not a sausage
http://patrickhaney.com
BThies BThies, 7 months ago

Try something like this instead:

<!--[if gte mso 15]>
<table align="left" width="140" cellpadding="0" cellspacing="0" border="0" style="mso-table-rspace:5.75pt; margin-right:3.5pt;"><tr><td width="140">
<![endif]-->
     <table align="left" width="140" cellpadding="0" cellspacing="0" border="0">
            <tr>
                <td width="130"><img src="http://lorempixel.com/300/300" width="130" border="0" /><div style="font-size:8px; line-height:10px; height:10px; overflow:hidden; -webkit-text-size-adjust:none;">&nbsp;</div></td>
                <td width="10"></td>
           </tr>
      </table>
<!--[if gte mso 15]>
</td></tr></table>
<![endif]-->

Brian Thies
Professional Email Developer
Thies Publishing

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