0

Office rendering of HTML is a known headache an I have a problem with Outlook 2016. A small, 1px horizontal line is rendered below my table. Tables are a common practice for formatting due to many Outlook/Office/Word HTML/Richtext/Mixup flaws.

The 1px line is really a small gap or hole in the white background color of the table, showing the background color of the body. I managed to figure this out by changing background color to red instead of grey.

enter image description here

The code can be tested in Notepad++ by selecting Run>Send via Outlook on a computer with Windows and Outlook Client installed...

<!DOCTYPE html>
<html>
   <head>
  <style>
     html,
     body
     {
     font-family: 'sans-serif';
     } 
  </style>
   </head>
   <body style="background-color: red">
  <table style="background-color: white;" >
     <tr>
        <td>
           <table>
              <tr>
                 <td>
                    <a href="" style="font-size: 30px;">Test before</a>
                 </td>
              </tr>
           </table>
           <table>
              <tr>
                 <td>
                    <p>
                       Test 1<br>
                       Test 2<br>
                       Test 3
                    </p>
                 </td>
              </tr>
           </table>
           <br/><br/>
           Test after
        </td>
     </tr>
  </table>
   </body>
</html>

The structure is a scaled down version of an email where the elements are used to present information.

Jesper Wilfing
  • 11,157
  • 5
  • 29
  • 32

2 Answers2

3

(Note! TL;DR; - Best solution in the bottom)

There are couple of different ways of changing the structure to make the gap go away. However this is not an option in my case. The solution that fixed it for me, was to scale down everything to a minimal, step by step according to the above, and finally try to change all values.

The final solution in my case, was to change font size in the table before, to NOT 30px.

<a href="" style="font-size: 29px;">Test before</a>

In my specific encounter with the randomizer-magic of Ms Outlook rendering, this was the key. I am sure the solution may vary for others, but changing a few font-sizes around might be worth a shot.

Since this took me long enough I thought I better post the solution, maybe it can help someone as frustrated as me!

[Edit] Here is another example of this issue - Messing with line-height

enter image description here

<!DOCTYPE html>
<html>
    <head>
        <title>Yea</title>
    </head>     
    <body style="width: 100%; background-color: white;">
        <br/><br/>
        <table cellspacing="0" cellpadding="0" style="background-color: white;width: 100%; line-height: 0;" border="0" border-size="0">
            <tr>
                <td style="height: 114px; font-size: 100px; background-color: #999999"><span>&nbsp;My name is Jasper</span></td>
            </tr>
        </table>
        <br/><br/>
    </body>
</html>

Well, the issue in this case when investigating the code, was the line-height: 0; of the table element. Remove it or set it to 1px to get rid of the element that looks like a white thick line but is actually a glimpse of the background. This is definitely a rendering bug and it at least shows in Outlook 2019 / 2016 (win 10). Reproduceable with Litmus.

[Edit #2 - Add an invisible tag]

By adding the patent pending gap-line eliminator directly before the problem-table-tag I managed to get rid of some lines.

<table class="unwanted-line-eliminator" cellpadding="0" cellspacing="0" style="height:0">
 <tr>
    <td style="font-size: 0px;line-height: 0px;">&nbsp;</td>
 </tr>
</table>

[Edit #3 - Finally - Best solution!]

Since the gaps are a bit random between Outlook versions, appears both horizontally and vertically (according to my last few hours of troubleshooting) and depends on DPI settings amongst other things the absolute best solution seems to be the following...

Add a content encapsulating <table style="background-color: lime"><tr><td>CONTENT</td></tr></table> with the top/front background-color. This will for some reason cover all gaps! Best of luck!

Jesper Wilfing
  • 11,157
  • 5
  • 29
  • 32
0

Another possible solution which helped in my case was to avoid using paragraphs <p> - I've just replaced them with line breaks <br/><br/>.

AntonyX
  • 29
  • 4