White horizontal lines randomly appearing in Outlook

Question

This is and old one, but still unsolved and unanswered, bug of Outlook:

https://social.technet.microsoft.com/Forums/ie/en-US/1f4f1e03-8ad5-4079-bc18-8fcaaa7b785d/outlook-2016-renders-horizontal-lines-seemingly-randomly-in-html-emails?forum=Office2016ITPro
https://www.actionrocket.co/email-design-review/white-lines-in-outlook
https://www.emailonacid.com/blog/article/email-development/how-do-i-get-rid-of-the-lines-in-outlook-emails/
https://medium.com/swlh/quick-tips-and-hacks-to-remove-white-lines-in-outlook-emails-4752a012f55a
https://support.remarkety.com/hc/en-us/articles/360030383191-How-do-I-get-rid-of-the-lines-in-Outlook-#3-segmentation-0-3

I have found all these links (and a lot more if you google a bit) related to this bug and tried everything they wrote to solve this issue, and the best results i get is making dissapear one of the white lines to make one or another two appear. And when is tested on different computers when same versions of Outlook in some cases they don't behave the same way, adding lines when others don't.

I know email marketing is an old forgotten subject for you, but a lot of proffesionals where working on this to improve the user experience and trying to make mor interactive and well rendered emails and its really frustrating this situation. I really think is time to upgrade Outlook, not continuing wasting the time of the developers in trying to guess and fix all the problems when some of them we simply can't because is in the root of Outlook.

Sorry for the little rant (and for my english, i'm not native) but i just want to continue giving this issue visibility until we get a fix to this and other issues, like CSS applied to div's don't work, for example.

Best regards.

Answer 1

The white lines are rendering bugs in Outlook. You can't prevent them completely, but I think they can be prevented for the most common display settings. In summary:

1. Set all text line-heights to multiples of 4px, like this:
   <table style="mso-line-height-rule: exactly; line-height: 16px">
2. Set all other widths and heights (padding, borders, etc.) to multiples of 4px.

See my full explanation at https://stackoverflow.com/a/75871675/3553075.

Answer 2

In my experience this comes down to the resolution of images and windows display scaling.

You need to ensure your image resolution will remain a non-decimal at the different scaled resolutions Windows offers; 100%, 125%, 150% and 175%.

For example you have a hero image in your 600px wide email. You double the resolution of the image so it looks crisp on high density monitors, no issue there - Your 1200px scales to;

• 600px at 100%
• 750px at 125%
• 900px at 150%
• 1050px at 175%

Then you consider the height, 500px might seem sensible right? well it's not that simple;

• 250px at 100% - all good
• 312.5px at 125%
• 375 at 150%
• 390.625 at 175%

I am confident you'll be getting these whitelines at 125% and 175% scaled display.

Round off those numbers for all scaled displays and you'll eliminate the most common cause I have of these white lines.

Answer 3

I had a similar problem. I'm not a web browser designer, but sometimes I wonder how it works or how to use this or that in emails.
Outlook uses the old http language with a history and cannot use many internal mechanisms. Then I work on a tool to check what code I have in bin or prepare, it works in Outlook.
You can read there about that: utworz-maila-z-kodu-html
So any time wherever I want to use it on mail I check twice create and sending to my self to be sure how it works.

Regards.

Answer 4

@Ankario try to avoid padding or margin if possible around those sections. Instead you can give height and make that section vertically aligned using valign.

For example, I was having the same issue whenever I download an image.

What I did was I just removed padding from the <td> and gave height instead and to make it vertically center used valign. You can compare the code below.

Old Code:

<td style="background: #4b7b8b; padding: 20px; color: #fff; font-size: 30px; font-weight: 600; text-transform: uppercase;">

Updated Code which solved an issue:

<td valign="middle" height="100" style="background: #4b7b8b; color: #fff; font-size: 30px; font-weight: 600; text-transform: uppercase; vertical-align: middle;">

You can always adjust value for height and valign as per your need.

Note: This issue occurs in old outlook desktop app. For new version of outlook any code will work.

Hope this is useful information. Happy Coding..!

Answer 5

I hate these lines!

This happens with vertical lines too :(
I created HTML for my clients, but the problem with lines appeared only in outlook. Now the desktop version for windows is showing this line, but the program outlook 365 isn't. (But sometimes I must change all my HTML or the way that I sliced an image to hack some stuff to disappear this line).
For Gmail, Yahoo, and other clients the line is not showing. Only in outlook! This is very frustrating!

outlook for windows

GMAIL x outlook 365

All TDs are the exact size of the image. I put a display block and border none in all pictures too, but if I put an image beside another, it renders with a line.

The scale of my Windows resolution is 100%.