HTML5 mailing doesn't show good in outlook 2007/2010/2013

Question

On the left and right side I have some spacing. In al the mail clients it shows that spacing, except in Outlook 2007/2010/2013.

Image 1

This is what I want. On the left side I have some text and on the right side I have an image. The red lines are showing the spacing between the text/image and the dashed border.

enter image description here

Image 2

In outlook 2007/2010/2013 it doesn't give me spacing on the left and right of the dashed border. Between the text and image I use "outlookseparator". When I don't use "outlookseparator" it gives me the spacing at the left side (spacing before the text), but it displays the image under the text.

enter image description here

How can I have the result of image 1 in outlook 2007/2010/2013?

score 0 · Answer 1 · answered Dec 30 '14 at 17:39

Outlook can't read HTML5 elements. Without any code to see, I assume you're using divs and outlookseparator is a class.

This may come as a bit of a shock (it's a lot of text) but this is what you'll have to do to get what you want in outlook. You can modify it, but make sure everything (widths) adds up.

<table border="0" cellpadding="0" cellspacing="0" width="640" style="border-collapse:collapse; padding:0; margin:0px;">
    <tr valign="top">
        <td align="left" valign="top" style="border:1px dashed #e6e6e6">
            <table border="0" cellpadding="0" cellspacing="0" width="640" style="border-collapse:collapse; padding:0; margin:0px;">
                <tr valign="top">
                    <td width="10">

                    </td>
                    <td align="left" valign="top">
                        <table border="0" cellpadding="0" cellspacing="0" width="300" style="border-collapse:collapse; padding:0; margin:0px;">
                            <tr valign="top">
                                <td align="left" valign="top" style="font-size:14px; line-height:16px;padding-top:10px;padding-bottom:10px;">
                                    <font face="Arial,'Helvetica Neue',Helvetica,sans-serif" color="#444444" size="2" style="color:#444444; font-family:Arial,'Helvetica Neue',Helvetica,sans-serif; font-size:14px; line-height:16px; -webkit-text-size-adjust:none; font-weight:normal">
                                        TEXT!
                                    </font>
                                </td>
                            </tr>
                        </table>
                    </td>
                    <td align="right" valign="top">
                        <table border="0" cellpadding="0" cellspacing="0" width="300" style="border-collapse:collapse; padding:0; margin:0px;">
                            <tr valign="top">
                                <td align="left" valign="top" style="padding-top:10px;padding-bottom:10px;">
                                    <img src="http://somewhere.com/images/something.png" width="300" height="100" alt="" style="display:block;" border="0" />
                                </td>
                            </tr>
                        </table>
                    </td>
                    <td width="10">

                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>

By the way, using classes in an email is bad practice. It will look terrible in GMail, as GMail doesn't read style tags or external CSS.

score -1 · Answer 2 · answered Jan 01 '15 at 14:04

-1

Outlook uses Word as an email editor. You can read more about that in the following articles in MSDN:

answered Jan 01 '15 at 14:04

Eugene Astafiev

47,483
3
24
45

1

This doesn't answer his question. Although great info and great for a comment, it is not an answer. Please add relevance to why this means he cannot do what he wants, or give an alternate means for him to solve the issue. – Gortonington Jan 15 '15 at 17:39

HTML5 mailing doesn't show good in outlook 2007/2010/2013

2 Answers2