0

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!

Jan Tichava
  • 41
  • 5
  • I suggest you remove all styling on the element, it should not be necessary to duplicate it since they already are on the . What happens if you remove `mso-line-height-rule: exactly;`? – madr Jun 03 '19 at 12:31
  • I tried everything, that's why I have it on the element (and also mso-line-height-rule on the style, etc.). Nothing, it's just the same. But the strange thing is that if I select some message content, line jumps to desired height. – Jan Tichava Jun 03 '19 at 13:05
  • Have you tried adding `zoom: 1` or `position: relative` to table, tr and td? – madr Jun 03 '19 at 13:56
  • I just tried it, still the same. I went through some LinkedIn e-mail and they use some hidden
    directly after the (inside). Then it looks almost good, just my line (cell) has 2px instead of 1px. And it has still the same behavior, disappears when I select/click on something. The
    is defined as: `
    Some text
    `
     – Jan Tichava Jun 04 '19 at 11:29

1 Answers1

0

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!

Jan Tichava
  • 41
  • 5