Search code examples
cssoffice365heightlineoutlook-2016

Outlook 2016 - first line with default line-height, mso-line-height-rule doesn't work

I am trying to develop an HTML e-mail for Outlook 2016 and I have problem with line-height. There are many threads regarding this problem but nothing helped to me. I have few "lines" (td cells) with 1px in my table displayed w/o problems, the problem is first line of the message.

I tried to add inline style mso-line-height-rule: exactly in combination with line-height: 1px or 0px or 0 or 1. In combination with font-size: 0px or 1px or 0 or 1. Nothing worked. So I placed some another element before the problematic one and the problem just moved to "new" element, disappeared from original one. The version of Outlook 2016 is 1808 (build 10730.20344), I have feeling that before some time it worked normally, without tricks.

<style>
    td {
        padding: 0px;
        margin: 0px;
        border: 0px;
    }

    table {
        border-collapse: collapse; 
        border-spacing: 0px;
        font-family: "Arial", Arial, Helvetica, sans-serif;
        font-size: 14px;
    }

    td#line {
        background-color: #f0f0f0;
    }
</style>

<body style="margin: 0px;">
    <table cellpadding="0" cellspacing="0" style="table-layout:fixed;">
        <tr height="1" style="mso-line-height-rule: exactly; line-height: 1px; font-size: 0px;">
            <td height="1" id="line" colspan="5" style="mso-line-height-rule: exactly; line-height: 1px; font-size: 0px; "></td>
        </tr>
        <tr>
            ...

ExpectedVsActual

Thanks!

Solution

  • Finally I found some workaround solution... below you can find simplyfied example.

    Option 1 (hidden <div> with some text, w/o mso-hide: all style): 

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="cs" xml:lang="cs">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
        <style>
            table {
                border-collapse: collapse; 
                border-spacing: 0px;
            }
        </style>
    </head>
    <body>
        <div style="overflow:hidden; color:transparent; visibility:hidden; width:0; font-size:0; opacity:0; height:0; line-height:0;">Some not visible text</div>
        <table cellpadding="0" cellspacing="0" border="0">
            <tbody>
                <tr height="1">
                    <td colspan="3" style="background-color: red;"></td>
                </tr>
                <tr>
                    <td width="1" style="background-color: blue;"></td>
                    <td width="160" style="background-color: yellow;">Some very nice text!<br />With 2 lines!</td>
                    <td width="1" style="background-color: blue;"></td>
                 </tr>
                 <tr height="1">
                    <td colspan="3" style="background-color: red;"></td>
                 </tr>
            </tbody>
        </table>
    </body>
</html>

    It works relatively good, but if you click somewhere/select something in the message, your first visible item (e.g. <td>) will disappear.

    Option 2 (hidden <div> with some text, w/ mso-hide: all style, conditionally shown additional row with zero height and with transparent backround): 

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="cs" xml:lang="cs">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
        <style>
            table {
                border-collapse: collapse; 
                border-spacing: 0px;
            }
        </style>
    </head>
    <body>
        <div style="overflow:hidden; color:transparent; visibility:hidden; mso-hide:all; width:0; font-size:0; opacity:0; height:0; line-height:0;">Some not visible text</div>
        <table cellpadding="0" cellspacing="0" border="0">
            <tbody>
                <!--[if gte mso 9]>
                <tr height="0">
                    <td colspan="3" style="background-color: transparent;"></td>
                </tr>
                <![endif]-->
                <tr height="1">
                    <td colspan="3" style="background-color: red;"></td>
                </tr>
                <tr>
                    <td width="1" style="background-color: blue;"></td>
                    <td width="160" style="background-color: yellow;">Some very nice text!<br />With 2 lines!</td>
                    <td width="1" style="background-color: blue;"></td>
                 </tr>
                 <tr height="1">
                    <td colspan="3" style="background-color: red;"></td>
                 </tr>
            </tbody>
        </table>
    </body>
</html>

    Then it's relatively unbreakable.

    OriginalVsOptions

    Only bad thing is that Outlook shows warning about possibility of wrong rendering. Most probably caused by <div> tag usage.

    EDIT: warning is caused by height: 0 and width: 0 in <div> style. I think it's possible to remove these properties.

    Enjoy!