Outlook 2016 1px Horizontal Lines Showing Up in the Body

Hi All,

Somehow we managed to get rid of the "1px Horizontal Lines Showing Up in the Email Body".

This is how we managed to solve the issue,

1. We need to make sure the max height of any table in the email not exceeding the max height of approximately 700px. The approximate height is because we don't know the exact height which cause the issue.
2. So, we split the whole templates into small small sections in separate tables.
3. We've added some Outlook 2016 specific styles in the head section of the email which is

     <!--[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]-->

1. The email works fine even without the Outlook specific comment styles.

People who are facing the tiny line issue please use this technique and let us know if this works for you too...

Thank you all.

A quick fix for me was to add an outlook-only <br /> to the affected text areas within a <td>:

    <td width="auto">
    <span style="color:#bbbbbb; text-decoration:none; mso-line-height-rule:exactly; line-height:1.5; font-size:13px; font-family:Arial, sans-serif;">
    Lorem ipsum dolor sit amet ...
    <!--[if gte mso 12]><br />&nbsp;<![endif]-->
    </span>
    </td>

This is possibly an issue with font-sizes.

I jut ran some tests from 11px to 18px and saw the mysterious line on 13px and 17px the rest were fine.

If you want 13px you can maybe do something like font-size:13px;mso-ansi-font-size:14px;

Not much time for testing this at the moment but that might sort it for you.

I haven't been able to test outside of one email, but I finally got rid of a mystery line by applying some mso- specific styles onto the table:

style="border-spacing: 0; mso-line-height-rule: exactly; mso-margin-bottom-alt: 0; mso-margin-top-alt: 0; mso-table-lspace: 0pt; mso-table-rspace: 0pt;"

Probably luck rather than a lasting solution but anyone coming here out of desperation may as well give it a try.

For me, the issue described was caused by whitespace, which was being rendered as underlines in MS Outlook. I swapped all the whitespace for & n b s p ; and managed to get rid of all the lines. Adding a & n b s p ; after a nested table and before the closing parent </td> fixed a line too.

I thought I had this issue under control in my emails until our companys outlook 2016 had been updated to version 1704. With this update came a massive reoccurence of the 1px outlook 2016 problem, not only in my emails but in most of our benchmark mails, too. Seems like litmus hasn't yet adapted v 1704, since my email looks fine there.
None of the solutions given in this thread worked, changing the table height even made it worse. I will keep trying to get around the problem and keep you posted. Has someone else experienced the problem with this version?

Ran into this issue for the first time just now on a template that we have been using for over 2 years. (sigh)

There were five instances of a button link with text and chevron image. However, the issue only presented itself on the last button for some reason.

To resolve the issue we found that it was caused by setting the font-family on the <td>, by moving it into the <span> contained within the <a>, the issue was resolved.

The code before:
<td width="225" align="center" valign="middle" style="color:#000000; font-family:Helvetica, Arial, sans-serif; font-size:11px; line-height:13px; padding-top:17px; padding-bottom:14px;">
<a href="#" target="_blank" style="color:#000000 !important; display:inline-block; text-decoration:none;"><span style="color:#000000"><strong>FIND OUT MORE</strong><img src="images/cta-arrow.gif" width="14" height="11" border="0" alt="" style="margin-bottom:-1px;" /></span></a>
</td>

and after
<td width="225" align="center" valign="middle" style="color:#000000;font-size:11px; line-height:13px; padding-top:17px; padding-bottom:14px;">
<a href="#" target="_blank" style="color:#000000 !important; display:inline-block; text-decoration:none;"><span style="color:#000000;font-family:Helvetica, Arial, sans-serif; "><strong>FIND OUT MORE</strong><img src="images/cta-arrow.gif" width="14" height="11" border="0" alt="" style="margin-bottom:-1px;" /></span></a>
</td>

Hope this is some help to folks out there.

I've seen this issue happen with lots of responsive templates I've worked on recently and haven't had any success in finding a code-based solution. One thing I have noticed, though, is that if I increase of decrease the amount of copy in a table a cell by 1 line - it can make the line appear/disappear. This is just adding to the confusion for me!

This issue is on going and as far as I know Microsoft doesn't even have a fix because it happens very periodically and it may show up on one and not on the other... I hate it because it just appears to be a glitch and everyone freaks out

I haven't seen long horizontal lines, but I did have an issue with vertical lines (also showing up in the colour of the body background) which I was able to solve: https://litmus.com/community/discussions/5286-mysterous-white-line-in-outlook

Not sure what would cause horizontal lines though, interesting article and like everyone else would love to know what the cause/solve is!

I stumbled upon a solution that may help. It worked for me when I added it to every table in the mailer.
Need to set border-collapse and other table settings to remove 1px whitespace around cells:
"border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;"
Source: http://freshinbox.com/resources/css.php#outlook

I know this post is old, but there's a really simple fix. In the past we set a line-height to 0 on <tr>'s for Outlook, however, beginning with Outlook 2016, the minimum line-height became .7pt (.75pt to be exact) which reintroduced the issue.

Here's my fix. Place this in the head of the document:

<!--[if gte mso 9]>
<style>
tr { font-size:1px; line-height:0.7pt; }
</style>
<!--[if gte mso 9]>

And anywhere you encounter a blank <td> with a height that is less than 21px, place an Outlook conditional non-breaking space:

<!--[if (gte mso 9)]> <![endif]-->

If the space is narrow where you have the blank <td>, use a zero-width space instead:

<!--[if (gte mso 9)]>​<![endif]-->

For many emails, I've found just the code in the <head> of the document will resolve a good portion of the problems without having to use the conditional non-breaking space/zero-width space. So just test and add where necessary.

I've coded thousands of emails using this, and have had no issues.

This line has been killing me, although I've managed to get it to stop appearing I'm unable to use the fix with my current design - boooooo! :(

But it seems to be due to what most people have mentioned - the wrapping table being too long.

I'll try and explain this as best as I can, I have a stunted layout design which the content section consists of a wrapping table with 3 columns, the second column is only for spacing and is hidden on mobile.

Inside the left and right THs I have stacked tables one ontop of another;
Table 1 - Top image - full width
Table 2 - Price + bottom part of image
Table 3 - Spacer
Table 4 - CTA

Now this section is repeated twice on the left and 3 times on the right - all the code is copy and pasted and then image links are changed so there's no amendments to the formatting. The bottom section of both the left and right hand side have a line between the main part and bottom part of the image, only in Windows 10 mail.

I tried all the fixes on this page down to "Hazel Browns" suggestion but with no avail.

Kathiravan's suggestion wouldn't let me keep my stunted design so I didn't try it until last.... but what'd ya know?! As soon as I I took the bottom right hand column section and pasted it below the stacking wrapping table, it displays perfectly! Whilst the broken sections above it remained broken.

So it looks like wrapping table heights have a max height before things start to get messy, I assume it's something to do with the page breaks in the word processor but who knows.

Also, has anyone seen this joke of a reply and response from microsoft? Totally ditched us.... and we're apparently helping to make it better?
If you have an account any upvotes would help bring it back to their attention :)

https://social.technet.microsoft.com/Forums/office/en-US/1f4f1e03-8ad5-4079-bc18-8fcaaa7b785d/outlook-2016-renders-horizontal-lines-seemingly-randomly-in-html-emails?forum=Office2016ITPro

And ty Rody for posting this link!
And ty Kathiravan for posting your fix!

Interesting article Stefano - thanks for sharing.
I'd also be interested to know what the fix is.

If anyone is still having this, I searched far and wide but this finally worked for me https://code.support/code/html/fix-horizontal-line-in-emails-for-outlook-2016/

@ all had the same issue with that =/ so I got rid of height at all :D

Personaly I take down the padding top and bottom on all my <td> (before text elements) elements & <Table>. Further more mso-line-height-rule:exactly; does the trick =) If it not works put a <span> arount the text or use <font> with inline style like above.

Preview Code

<tr>
    <td>
        <table style="border-spacing:0;border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;margin:0;" width="100%">
                <tbody>
                    <tr>
                        <td style="padding: 0 5px 24px 5px;mso-line-height-rule:exactly;line-height:36px;font-size:33px;">
                            <span style="font-size:33px;mso-line-height-rule:exactly;line-height:36px;font-weight:100;font-family:'Century',sans-serif;">
                                HEADLINE NEW IN!
                            </span>
                        </td>
                    </tr>
                </tbody>
        </table>
    </td>
</tr>

The issue could be coused by the Font allthou we say Px the software uses Pt =/ its vissible if you overlap the screenshots from owa and outlook in PS. That way I could get rid off those unwanted gabs always and faster =)

Got the same problem (in a CTA button).

When I click on the line it disappears though. And the content shifts up.

Does this also happen in your e-mails? It could take a few tries, since the click needs to be on a certain spot.

I also found a post on Technet:
https://social.technet.microsoft.com/Forums/office/en-US/1f4f1e03-8ad5-4079-bc18-8fcaaa7b785d/outlook-2016-renders-horizontal-lines-seemingly-randomly-in-html-emails?forum=Office2016ITPro

If you scroll to the bottom a TechNet Community Support employee says this is a known bug and they are currently investigating. But he could of course just be saying this.

I only just encountered this issue for the first time but I was seeing it only on my spacer tables. They're built like:

<table width="100%">
       <tr>
             <td height="5" style="font-size: 0; line-height: 0;">
                    &nbsp;
             </td>
      </tr>
</table>

Changing that font-size and line-height to 1px each seems to have done the trick for me.

This issue looks to me like it's caused by a table height that Outlook 2016 doesn't like (though not necessarily one that is too high, or higher than a particular threshold) because it appears on small tables too. I tried adjusting the height of the table contents by 1 pixel, and it seems to have removed the border wherever I've tried it. Example: I reduced text line heights in tables where it was appearing, or adjusted the top/bottom padding by 1 pixel, and the border disappeared. This may well be fluke, but please test and let me know if this works for anyone else?

I would get an error like this when the container table is long. Outlook tables have a max height, i think it's 1300px or something. If i get the line in the email i would break the tables up into 2

I think i have worked out the main cause of this, its due to the DPI settings of the comuter. If you change the Zoom on the computer it makes the lines appear or disapear.

I ahve tried all the methods listed below and none seem to work.

Any other ideas of how to fix this?

I ran in the same issue this week. After scanning the inputs on this page and some tests, i can give the following input: in my case it is depending on the content (the height of the table). First i removed the line-height on the inline styles and it fixed it in some places (table heights changed by removing the line-height). If a line still appeared, i added more text above and then it dissapeared (again table heights changed). The last thing i tested was changing the background-color to the same color as the background of the content. Then no lines where visible.

When I removed my font styling from the <td> the horizontal line disappeared.

After some investigation I fixed the issue by changing my line-height. It was originally 15px so changed to 1 (no px). Also 14.9px worked too. interestingly any larger px value retained the horizontal glitch.

I'm struggling with the same mysterious lines - very interested in a possible fix!

Easy Workaround: NO empty tabledatas .... insert in empty tds <div style="font-size:1px;line-height:1px;mso-line-height-rule:exactly;"> </div>

2 years to late :-)

For me, avoiding padding worked. Put padding and margin all 0px and use td width and height wherever you need padding. This worked for me. I have also noticed sometimes if the td is aligned middle by default with some spaces on top and bottom, it will cause white lines to appear. I used vertical-align:top and put some spaces using td height there. It seems to be a ridiculous fix though.

I actually wasn't able to fix this issue permanently, but, it seems like it's somehow a calculation issue from Outlook 2016 itself. By simply adding 1px to the <td> that containing the weird line, can fix it. I tried in two of my campaigns, and it works. But I know that's not an ultimate fix. But maybe someone can figure out something more useful.

When I had an issue like this I found that the line matched a bgcolor attribute or background-color style in a top level table, td or body tag. Vary those colours for a test, and then check the colour of the line in photoshop.

Yes, I am having this same issue. In a stack of identical tables, in a nested cell, I am getting a random 1px white btm border on 1 or 2 random tables. If I rearrange the table running order, the border will move and isn't specific to a particular table. Completely perplexing. This issue is showing in Outlook 2019, but in no other version of Outlook.

I was having the same issue too, only in Outlook 2016, so thought I'd share my problem and solution in case it helps anybody else.

In our email boilerplate we narrowed it down to removing all font styles from any <td> elements, such as font-weight, font-size etc, and instead applying those styles directly to typography elements and <spans>.

We only had those styles down as a fallback, so removing it fortunately didn't impact the email design. This solution works for us with tables of any height (tested on over 700px height).

Feel free to check it out and use our boilerplate at Cogentro.com.

I have spent quite a bit of time the last two days dealing with this issue. Finally, I found out that it has to do with the ratio of the email content width and the with of the display. I reduced the size of my email from 660px to 600px and the white line disappeared.

So its 2018 and this problem still persists.... So much for Litmus and Microsoft teaming up to make email better. Can't even fix a 1px line that has been problemsome for years.

We have been going crazy with this and having a hard time getting any info, looking forward to feedback on this also

Add the css property "display:block" inside the <img />

e.g <img src="1.png" alt="banner" style="display:block">

My issue was unit-less values for line-height!

Actually i found that this bug is related to the height of the table. If you get the line, try changing the height of your <td> by adding/removing padding or adding/removing some <br> tags. Moral of the story, Outlook is dumb, like all Microsoft products.

I am having kind of similar issue but its not showing up in litmus and appears in email client outlook 2016.

Screen Shot: https://emarketing-au.s3-ap-southeast-2.amazonaws.com/58255/dA7yjR6VtufWemN8lC6rTJg__VG0tpUsGGIkQiEdx8U/2232792.png

is anyone aware of this kind out issue

There is a new post about this today over at Apsis: http://www.apsis.com/blog/ask-email-designer-fixing-lines-outlook-2016

I haven't had time to try it yet, but it might help!

I've been able to solve this by adding style="border-collapse: collapse;" to the tables surrounding the line. Give it a try.

I updated Outlook to the latest version - Build 1705 8201.2102 - and the lines went away. Using Windows 10.

A fix I found was to add a background colour using outlook conditional comments. So if you're main background colour (strips on the lhs/rhs of your main centered column) is grey, then:

   <!--[if mso]>
    <style type=”text/css”>



    .body,body {
      background: #dddddd !important;
    }
    </style>
    <![endif]-->

This removed all noticeable 1px lines for me instantly. I tried adjusting line-heights/font-sizes/padding as per other recommendations, but this is the only method that has worked for me.

Ok, so I have run into the horizontal line issue for the first time today in a Litmus preview for Outlook 2016... not sure why only now as I haven't with this specific email template before. Fun stuff as always. ;)

As Nicole mentioned, this article has a potential solve (http://www.apsis.com/blog/ask-email-designer-fixing-lines-outlook-2016) and notes it has to do with the background colour set on the <body>. However this particular email I'm working with has different background colours for various sections of the email, so changing the body background colour won't be a solve for me. :/

I've seen this happen when applying padding to an element (td in my case) that has direction: rtl/ltr set on it either in CSS or as an attribute. Not sure if that's what is happening here or not. Moving the padding to another element nested inside usually fixed the issue.

I have this issue with one of my email designs and it is showing up on:

• Outlook 2013
• Outlook 2016
• Outlook 2011 (OSX) - see note [1]
• Outlook 2010 see note [2]
• Outlook 2007

Notes:

[1] For Outlook 2011 OSX the location is border top not bottom and is light-gray not background color. Also rare in appearance.
[2] For Outlook 2010 sometimes I get both a border bottom and border top, the top light gray and the bottom the color of my email background.

The lines appear to be more frequently showing, at bottom of row spans, especially where columns are empty (gutters). Uncollapsing these rows doesn't fix the issue either (in case you are thinking I should try this).

I have tried border:none; and border:1px solid transparent; also the usual background-color changes as many suggested and I can't get traction.

My design has alternating color blocks so a one color fix for background won't work.

The only solution that has improved the appearance is to mask (paint over the lines) by applying a border bottom inside the empty rows with a color that matches the background table color.

Such a time waster this bug.