Geek Answers Handbook

Rendering issue in Outlook 2013: nested table trims adjacent text

When developing html email newsletters, I often use a structure similar to the following:

<table width="244" border="0" cellpadding="0" cellspacing="0" bgcolor="#ffffcc"> <tr> <td> <table border="0" align="left"> <tbody> <tr> <td bgcolor="#FFCCCC">text in the table cell.<br>and another line of text.<br>and a third line.</td> </tr> </tbody> </table> Hello. This is sample text. This is another sentence. Hello. This is sample text. This is another sentence. Hello. This is sample text. This is another sentence.</td> </tr>

When viewed in a browser, the result is as follows:

viewed in a browser

but when rendering Outlook 2013, the leftmost text in the main (yellow) table is disabled:

rendered by Outlook 2013

Is there an explanation or workaround for this?

(usually I would place the image instead of text in the inner (pink) table. This allows you to create a design in which the main (yellow) text seems to flow around the image. Whether the image or text is the result The text in the main (yellow) table is truncated, as shown here.)

+4
source share
3 answers

Try setting left alignment in the header table, in my code this will work on all clients. Tested in litmus for all customers:

 <table cellspacing="0" cellpadding="0" width="560" align="left" border="0"> <tbody> <tr> <td align="left"> <table cellspacing="0" cellpadding="0" align="left"> <tbody> <tr> <!-- spacer for the top of the image --> <td align="left" colspan="2"> <img src="spacer.gif" height="5" alt="spacer" style="display:block; margin:0px; border:0px;" align="left" /> </td> </tr> <tr> <!-- the image or text --> <td align="left"> <img src="imagesrc" alt="imagealt" style="display:block; margin:0px; border:0px;" /> </td> <!-- spacer for the right of the image --> <td align="left"> <img src="spacer.gif" width="11" alt="spacer" style="display:block; margin:0px; border:0px;" /> </td> </tr> <tr> <!-- spacer for the bottom of the image --> <td colspan="2" align="left"> <img src="spacer.gif" height="11" alt="spacer" style="display:block; margin:0px; border:0px;" /> </td> </tr> </tbody> </table> <!-- here your tekst --> <div style="margin:0px; padding:0px; mso-line-height-rule: exactly; color:#000000; font-family:Verdana, Arial; font-size:12px; line-height:20px; display:block;">Hello. This is sample text. This is another sentence. Hello. This is sample text.</div> </td> </tr> </tbody> </table>
+4
source

Sometimes the decision made (adding align= "left" in the header / parent tables) does not work (with several nested tables in my case):

left aligned table without correction

Adding mso-table-rspace to the left-aligned table did work:

corrected left alignment table

<table border="0" cellpadding="0" cellspacing="0" align="left" style=mso-table-lspace:0pt; mso-table-rspace:7pt;">

+1
source

I'm not sure what the problem is with Outlook 2013, but you can try to achieve the same layout with div structure

HTML:

 <div class="outer"> <div class="first">text in the table cell.<br>and another line of text.<br>and a third line.</div> <div class="second">Hello. This is sample text. This is another sentence. Hello. This is sample text. This is another sentence. Hello. This is sample text. This is another sentence.</div> </div>

CSS

 .outer { width : 50%; height : 50%; background-color: green; } .first { background-color: red; float : left; } .second { background-color: yellow; }

Demo link

-3
source

More articles:


All Articles