Search code examples
htmlcssemailoutlookhtml-email

HTML: Outlook not rendering correctly email

I have an email which is rendering correctly on webapps and browsers, but on outlook client is not rendering correctly, I've tried setting cellspacing, cellpadding, changing the width and can't get it to render correctly on outlook version 2102 (build 13801.21106)

enter image description here enter image description here

Outlook rendering

I've stored the html in this fiddle https://jsfiddle.net/w0x7rpvq/ and search for the comment <!--issuehere-->

On browser looks fine enter image description here

Update 1

imagine not aligning correctly (https://jsfiddle.net/7sn95eLz/)

enter image description here

Solution

  • Your layout is made with a table with three cells per row. The first row contain only one cell, matching the width of the cell with the image (190px). This is why Outlook is displaying your text in such a narrow width. It works in other browsers because you applied a display:block; to the <table> containing the full width text. But Outlook on Windows doesn’t understand that.

    The solution here is to add a colspan="3" to the <td> containing the full width text.

    <!--issuehere-->
<td colspan="3" class="subtitle" valign="top" style="font-family: 'Open Sans', Arial, Helvetica, sans-serif; font-size: 16px; color: #333333; font-weight: normal; padding: 0 0 20px 0; background:red;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>