Outlook (2013/2016/2019) shows 1px horizontal line at the bottom of cells

[uxgenesis]

Occasionally Outlook 2013, 2016 and 2019 and Windows 10 Mail will show a 1px horizontal line on the bottom of cells, mostly when containing an image, with the border color having body background color.

If the table only contains an image, this can be solved by adding this to the table style attribute: font-size:0;line-height:0

If the table contains other markup, add this to the

section, and be sure to define the font-size and line-height on level: <!--[if gt mso 15]> <style type="text/css" media="all"> /* Outlook 2016 Height Fix */ table, tr, td {border-collapse: collapse;} tr { font-size:0px; line-height:0px; border-collapse: collapse; } </style> <![endif]-->

[JayOram]

I'm not sure this is a 'bug' - more a rendering issue to take into account when building the email. This only occurs as Outlook Windows Desktop uses the 'Word rendering engine' and converts everything to points (pt) from pixels and when the numbers are odd or are rounded up/down, can cause some inconsistencies in the heights and cause 1px lines.

[uxgenesis]

Thanks for your explanation. Isn't this an unintended side effect though with the background color appearing as a line? We have to take many of these irregularities into account when building e-mail templates, I think documenting this will help e-mail developers fix this issue in theirs?

[ttntm]

I've had this happen as a result of multiple <tr> nodes that each had 2 <td> elements inside, one with an <img> and one with just text.

The 1px line would only appear on the second <tr> in Outlook 2019.

No changes to the CSS (global or inline) would get rid of it, the solution was moving each <tr> into its own <table> and stacking those on top of each other.

[JayOram]

We worked on this article with a bunch of possible fixes: https://www.actionrocket.co/email-design-review/white-lines-in-outlook