CODEWITHSUNDEEP
htmlcssemailoutlookvertical-alignment
David Healey
David Healey

Reputation: 566

HTML email misalignment in Outlook 2013?

I have a very simple HTML email template - just used for testing - and it has 5 columns with one word in, the problem is in Outlook 2013 the first column is always mis-aligned vertically. Here is the HTML.

  <!DOCTYPE html>
<html><body>    
    <table width="95%" cellpadding="0" cellspacing="0" border="0" id="wrapper_table" style="border-collapse: collapse; border-spacing: 0; vertical-align: top; height: 100%; width: 100%;"><tbody><tr><td style="font-weight: normal; text-align: left; vertical-align: top;">
                <table width="600" cellpadding="0" cellspacing="0" border="0" id="content_1" style="border-collapse: collapse; border-spacing: 0; vertical-align: top;"><tr><td style="font-weight: normal; text-align: left; vertical-align: top;">
                            <table width="100%" cellpadding="0" cellspacing="0" border="0" id="test" style="border-collapse: collapse; border-spacing: 0; vertical-align: top;"><tr><td style="font-weight: normal; text-align: left; vertical-align: top; border: 1px solid black;">
                                        Row
                                    </td>
                                    <td style="font-weight: normal; text-align: left; vertical-align: top; border: 1px solid black;">
                                        Row
                                    </td>
                                    <td style="font-weight: normal; text-align: left; vertical-align: top; border: 1px solid black;">
                                        Row
                                    </td>
                                    <td style="font-weight: normal; text-align: left; vertical-align: top; border: 1px solid black;">
                                        Row
                                    </td>
                                    <td style="font-weight: normal; text-align: left; vertical-align: top; border: 1px solid black;">
                                        Row
                                    </td>
                                </tr></table></td>
                    </tr></table></td>
        </tr></tbody></table></body></html>

The result in Outlook 2013 is:

Outlook 2013

This is the code output from Outlook

<!DOCTYPE html><br />
<html><body>    <br />
    <table width="95%" cellpadding="0" cellspacing="0" border="0" id="wrapper_table" style="border-collapse: collapse; border-spacing: 0; vertical-align: top; height: 100%; width: 100%;"><tbody><tr><td style="font-weight: normal; text-align: left; vertical-align: top;"><br />
                <table width="600" cellpadding="0" cellspacing="0" border="0" id="content_1" style="border-collapse: collapse; border-spacing: 0; vertical-align: top;"><tr><td style="font-weight: normal; text-align: left; vertical-align: top;"><br />
                            <table width="100%" cellpadding="0" cellspacing="0" border="0" id="test" style="border-collapse: collapse; border-spacing: 0; vertical-align: top;"><tr><td style="font-weight: normal; text-align: left; vertical-align: top; border: 1px solid black;"><br />
                                        Row<br />
                                    </td><br />
                                    <td style="font-weight: normal; text-align: left; vertical-align: top; border: 1px solid black;"><br />
                                        Row<br />
                                    </td><br />
                                    <td style="font-weight: normal; text-align: left; vertical-align: top; border: 1px solid black;"><br />
                                        Row<br />
                                    </td><br />
                                    <td style="font-weight: normal; text-align: left; vertical-align: top; border: 1px solid black;"><br />
                                        Row<br />
                                    </td><br />
                                    <td style="font-weight: normal; text-align: left; vertical-align: top; border: 1px solid black;"><br />
                                        Row<br />
                                    </td><br />
                                </tr></table></td><br />
                    </tr></table></td><br />
        </tr></tbody></table></body></html><br />

The problem is related to all the extra BR tags that outlook adds, but what can I do about it?

Thanks!

Upvotes: 0

Views: 1995

Answers (1)

Stuart Kershaw
Stuart Kershaw

Reputation: 17671

As far as I know, external styles are not supported in emails, and styles must be applied inline per tag. Have you tried adding valign="top" on each of the nested tds?

<td valign="top">
    Row
</td>

You might also try closing up any whitespace that's nested within your tags, for example:

<td valign="top">Row</td>

Upvotes: 1

Related Questions