Search code examples
cssoutlookgmailhtml-email

Alignment issue with HTML email in Outlook

I'm having trouble rendering my HTML email correctly in Outlook. The top picture is how it is supposed to look like in Gmail. The second picture is being rendered incorrectly by Outlook 2016. I've been stuck on this issue for the past 2 days. Any helps is greatly appreciate it.

This is the code that is being rendered in HTML:

        <!-- COLUMN TITLE -->
    <!--[if mso | IE]></td></tr></table><table align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:740px;" width="740" bgcolor="#ffffff" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
    <div style="background:#ffffff;background-color:#ffffff;margin:0px auto;max-width:740px;">
        <table class="event-history-outlook" align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#ffffff;background-color:#ffffff;width:100%;">
            <tbody>
                <tr>
                    <td style="direction:ltr;font-size:0px;padding:0px 0;padding-bottom:7px;text-align:center;">
                        <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:740px;" ><![endif]-->
                        <div class="column-per-33-333333333333336 outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
                            <table class="event-history-outlook" border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
                                <tbody>
                                    <tr>
                                        <td align="left" style="font-size:0px;padding:10px 25px;padding-right:25px;padding-bottom:0px;padding-left:20px;word-break:break-word;">
                                            <div style="font-family:Arial, Helvetica Neue, Helvetica, sans-serif;font-size:12px;line-height:1;text-align:left;color:#9c9c9c;">DATE AND TIME</div>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <!--[if mso | IE]></td><td class="" style="vertical-align:top;width:740px;" ><![endif]-->
                        <div class="column-per-50 outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
                            <table class="event-history-outlook" border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
                                <tbody>
                                    <tr>
                                        <td align="left" style="font-size:0px;padding:10px 0 10px 0;padding-bottom:0px;word-break:break-word;">
                                            <div style="font-family:Arial, Helvetica Neue, Helvetica, sans-serif;font-size:12px;line-height:1;text-align:left;color:#9c9c9c;">TITLE</div>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <!--[if mso | IE]></td><td class="" style="vertical-align:top;width:740px;" ><![endif]-->
                        <div class="column-per-16-66666666666666 outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
                            <table class="event-history-outlook" border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
                                <tbody>
                                    <tr>
                                        <td align="left" style="font-size:0px;padding:10px 0 10px 0;padding-bottom:0px;padding-left:10px;word-break:break-word;">
                                            <div style="font-family:Arial, Helvetica Neue, Helvetica, sans-serif;font-size:12px;line-height:1;text-align:left;color:#9c9c9c;">CODE</div>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <!--[if mso | IE]></td></tr></table><![endif]-->
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    <!-- END COLUMN TITLE -->

    <!-- HORIZONTAL LINE -->
    <div style="background:#ffffff;background-color:#ffffff;margin:0px auto;max-width:740px;">
        <table class="event-history-outlook" align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#ffffff;background-color:#ffffff;width:100%;">
            <tbody>
                <tr>
                    <td style="direction:ltr;font-size:0px;padding:0px 0;padding-bottom:8px;text-align:center;">
                        <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:740px;" ><![endif]-->
                        <div class="column-per-100 outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
                            <table class="event-history-outlook" border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
                                <tbody>
                                    <tr>
                                        <td align="center" style="font-size:0px;padding:10px 25px;padding-top:0;padding-right:20px;padding-bottom:0px;padding-left:20px;word-break:break-word;">
                                            <p style="border-top:solid 1px #BBBBBB;font-size:1px;margin:0px auto;width:100%;">
                                            </p>
                                            <!--[if mso | IE]><table class="event-history-outlook" align="center" border="0" cellpadding="0" cellspacing="0" style="border-top:solid 1px #BBBBBB;font-size:1px;margin:0px auto;width:700px;" role="presentation" width="700px" ><tr><td style="height:0;line-height:0;"> &nbsp;
                                            </td></tr></table><![endif]-->
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    <!-- END HORIZONTAL LINE -->

    <!-- FAULT ROW -->
    <!--[if mso | IE]></td></tr></table><table align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:740px;" width="740" bgcolor="#ffffff" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
    <div style="background:#ffffff;background-color:#ffffff;margin:0px auto;max-width:740px;">
        <table class="event-history-outlook" align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#ffffff;background-color:#ffffff;width:100%;">
            <tbody>
                <tr>
                    <td style="direction:ltr;font-size:0px;padding:0px 0;padding-bottom:8px;text-align:center;">
                        <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:740px;" ><![endif]-->
                        <div class="column-per-33-333333333333336 outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
                            <table class="event-history-outlook" border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
                                <tbody>
                                    <tr>
                                        <td align="left" style="font-size:0px;padding:10px 25px;padding-right:25px;padding-bottom:0px;padding-left:20px;word-break:break-word;">
                                            <div style="text-decoration:none;font-family:Helvetica;font-size:12px;line-height:1;text-align:left;color:#528ecb;">[DATE_TIME]</div>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <!--[if mso | IE]></td><td class="" style="vertical-align:top;width:740px;" ><![endif]-->
                        <div class="column-per-50 outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
                            <table class="event-history-outlook" border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
                                <tbody>
                                    <tr>
                                        <td align="left" style="font-size:0px;padding:10px 0 10px 0;padding-bottom:0px;word-break:break-word;">
                                            <div style="font-family:Helvetica;font-size:12px;line-height:1;text-align:left;color:#4a4a4a;">[TITLE]</div>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <!--[if mso | IE]></td><td class="" style="vertical-align:top;width:740px;" ><![endif]-->
                        <div class="column-per-16-66666666666666 outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
                            <table class="event-history-outlook" border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
                                <tbody>
                                    <tr>
                                        <td align="left" style="font-size:0px;padding:10px 0 10px 0;padding-bottom:0px;padding-left:10px;word-break:break-word;">
                                            <div style="font-family:Helvetica;font-size:12px;line-height:1;text-align:left;color:#4a4a4a;">[CODE]</div>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <!--[if mso | IE]></td></tr></table><![endif]-->
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    <!--END FAULT ROW -->

Table Render Correctly in Gmail

Table Render Incorrectly in Outlook

Solution

  • You've got "740px" for each of the Outlook-specific (if mso) table columns. You would need to make them 33%, 50% and 16% -- but as pixels -- for Outlook to work.

    Incidentally, you should also inline the widths for other email environments that don't support <style> blocks. For example, Gmail IMAP doesn't support this. So just put the width:33% inline instead of as a class.

    Here's the new code:

        <!-- COLUMN TITLE -->
<!--[if mso | IE]></td></tr></table><table align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:740px;" width="740" bgcolor="#ffffff" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
<div style="background:#ffffff;background-color:#ffffff;margin:0px auto;max-width:740px;">
    <table class="event-history-outlook" align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#ffffff;background-color:#ffffff;width:100%;">
        <tbody>
            <tr>
                <td style="direction:ltr;font-size:0px;padding:0px 0;padding-bottom:7px;text-align:center;">
                    <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:244px;" ><![endif]-->
                    <div class="column-per-33-333333333333336 outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:33%;">
                        <table class="event-history-outlook" border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
                            <tbody>
                                <tr>
                                    <td align="left" style="font-size:0px;padding:10px 25px;padding-right:25px;padding-bottom:0px;padding-left:20px;word-break:break-word;">
                                        <div style="font-family:Arial, Helvetica Neue, Helvetica, sans-serif;font-size:12px;line-height:1;text-align:left;color:#9c9c9c;">DATE AND TIME</div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <!--[if mso | IE]></td><td class="" style="vertical-align:top;width:370px;" ><![endif]-->
                    <div class="column-per-50 outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:50%;">
                        <table class="event-history-outlook" border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
                            <tbody>
                                <tr>
                                    <td align="left" style="font-size:0px;padding:10px 0 10px 0;padding-bottom:0px;word-break:break-word;">
                                        <div style="font-family:Arial, Helvetica Neue, Helvetica, sans-serif;font-size:12px;line-height:1;text-align:left;color:#9c9c9c;">TITLE</div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <!--[if mso | IE]></td><td class="" style="vertical-align:top;width:118px;" ><![endif]-->
                    <div class="column-per-16-66666666666666 outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:16%;">
                        <table class="event-history-outlook" border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
                            <tbody>
                                <tr>
                                    <td align="left" style="font-size:0px;padding:10px 0 10px 0;padding-bottom:0px;padding-left:10px;word-break:break-word;">
                                        <div style="font-family:Arial, Helvetica Neue, Helvetica, sans-serif;font-size:12px;line-height:1;text-align:left;color:#9c9c9c;">CODE</div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <!--[if mso | IE]></td></tr></table><![endif]-->
                </td>
            </tr>
        </tbody>
    </table>
</div>
<!-- END COLUMN TITLE -->

<!-- HORIZONTAL LINE -->
<div style="background:#ffffff;background-color:#ffffff;margin:0px auto;max-width:740px;">
    <table class="event-history-outlook" align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#ffffff;background-color:#ffffff;width:100%;">
        <tbody>
            <tr>
                <td style="direction:ltr;font-size:0px;padding:0px 0;padding-bottom:8px;text-align:center;">
                    <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:740px;" ><![endif]-->
                    <div class="column-per-100 outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
                        <table class="event-history-outlook" border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
                            <tbody>
                                <tr>
                                    <td align="center" style="font-size:0px;padding:10px 25px;padding-top:0;padding-right:20px;padding-bottom:0px;padding-left:20px;word-break:break-word;">
                                        <p style="border-top:solid 1px #BBBBBB;font-size:1px;margin:0px auto;width:100%;">
                                        </p>
                                        <!--[if mso | IE]><table class="event-history-outlook" align="center" border="0" cellpadding="0" cellspacing="0" style="border-top:solid 1px #BBBBBB;font-size:1px;margin:0px auto;width:700px;" role="presentation" width="700px" ><tr><td style="height:0;line-height:0;"> &nbsp;
                                        </td></tr></table><![endif]-->
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </td>
            </tr>
        </tbody>
    </table>
</div>
<!-- END HORIZONTAL LINE -->

<!-- FAULT ROW -->
<!--[if mso | IE]></td></tr></table><table align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:740px;" width="740" bgcolor="#ffffff" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
<div style="background:#ffffff;background-color:#ffffff;margin:0px auto;max-width:740px;">
    <table class="event-history-outlook" align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#ffffff;background-color:#ffffff;width:100%;">
        <tbody>
            <tr>
                <td style="direction:ltr;font-size:0px;padding:0px 0;padding-bottom:8px;text-align:center;">
                    <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:244px;" ><![endif]-->
                    <div class="column-per-33-333333333333336 outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:33%;">
                        <table class="event-history-outlook" border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
                            <tbody>
                                <tr>
                                    <td align="left" style="font-size:0px;padding:10px 25px;padding-right:25px;padding-bottom:0px;padding-left:20px;word-break:break-word;">
                                        <div style="text-decoration:none;font-family:Helvetica;font-size:12px;line-height:1;text-align:left;color:#528ecb;">[DATE_TIME]</div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <!--[if mso | IE]></td><td class="" style="vertical-align:top;width:370px;" ><![endif]-->
                    <div class="column-per-50 outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:50%;">
                        <table class="event-history-outlook" border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
                            <tbody>
                                <tr>
                                    <td align="left" style="font-size:0px;padding:10px 0 10px 0;padding-bottom:0px;word-break:break-word;">
                                        <div style="font-family:Helvetica;font-size:12px;line-height:1;text-align:left;color:#4a4a4a;">[TITLE]</div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <!--[if mso | IE]></td><td class="" style="vertical-align:top;width:118px;" ><![endif]-->
                    <div class="column-per-16-66666666666666 outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:16%;">
                        <table class="event-history-outlook" border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
                            <tbody>
                                <tr>
                                    <td align="left" style="font-size:0px;padding:10px 0 10px 0;padding-bottom:0px;padding-left:10px;word-break:break-word;">
                                        <div style="font-family:Helvetica;font-size:12px;line-height:1;text-align:left;color:#4a4a4a;">[CODE]</div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <!--[if mso | IE]></td></tr></table><![endif]-->
                </td>
            </tr>
        </tbody>
    </table>
</div>
<!--END FAULT ROW -->