White horizontal lines randomly appearing in Outlook

Ankario 16 Reputation points
2022-11-03T11:38:56.977+00:00

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.

Office Development
Office Development
Office: A suite of Microsoft productivity software that supports common business tasks, including word processing, email, presentations, and data management and analysis.Development: The process of researching, productizing, and refining new or existing technologies.
3,529 questions
Office Mac
Office Mac
Office: A suite of Microsoft productivity software that supports common business tasks, including word processing, email, presentations, and data management and analysis.Mac: A family of Apple personal computers that run the macOS operating system.
462 questions
Outlook Management
Outlook Management
Outlook: A family of Microsoft email and calendar products.Management: The act or process of organizing, handling, directing or controlling something.
4,909 questions

4 answers

Sort by: Most helpful
Most helpful Newest Oldest
  1. Jacob Balazer 10 Reputation points
    2023-03-28T23:17:22.7+00:00

    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.

    2 people found this answer helpful.
  2. Oskar Shon 866 Reputation points MVP
    2022-11-09T21:32:24.907+00:00

    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.

    1 person found this answer helpful.
    0 comments
  3. David Smythe 1 Reputation point
    2022-12-07T14:15:40.35+00:00

    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.

    0 comments
  4. Adriana Carolina 0 Reputation points
    2023-02-17T15:08:19.7233333+00:00

    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!

    User's image

    outlook for windows
    User's image

    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%.

    0 comments