Here’s a scenario that happens a lot in email marketing: the email design looks incredible; it’s tested across multiple inboxes with confidence. Each test checks out, but then Microsoft Outlook introduces an unwelcome guest—the dreaded thin white line clearly visible in the colour sections of your emailer. ☹️
Why does this happen?
This has been a known bug in Microsoft Outlook for many years with Microsoft seemingly reluctant to look into and fix.
Numerous articles have been written about it and to date there is no definitive answer to why this happens.
There are many theories and solutions which you can read more about in this marvelous post by Jay Oram from Actionrocket which also includes a video so you can watch it instead of reading through all of it!
The one theory that stands out to me and makes the most sense is using numbers dividable by 4.
Since 2007, Outlook has used Microsoft Word as its rendering engine and Microsoft Word uses points (pt) instead of pixels (px) for sizes. While your email is coded to use pixels, Outlook converts them to points. At 96DPI (dots per inch) 1px is equivalent to 0.75pts. This means that any pixel size divided by 4 will end up as an even number and any sizes not dividable by 4 will end up as an uneven number containing decimals.
For example, 20px converts to 15pt. 18px converts to 13.5pt. The theory is this remaining 0.5pt is the culprit that causes the additional spacing / padding / margin that results in the thin line.
The simple answer
The simple answer seems to be to make sure your text size and line heights are dividable by 4 meaning using a font size of 16px with a line height of 24px as an example. Sometimes a brands will have strict guidelines with set font sizes and line heights so it isn’t always as easy to just change it.
Here are some alternative solutions:
In the event that you can’t change the sizes to be dividable by 4 (which sometimes doesn’t work anyway…) the following solutions I’ve found work best when I run into these Outlook lines.
1. Try and keep copy in one “container” where possible
Instead of using spacing rows to create a space between paragraphs. I’ve noticed these lines usually creep in when there are unnecessary rows.
Rather remove the row and use HTML breaks to create the spacing.
2. Use padding to create the spacing
Instead of using spacing rows to create a space add some padding to the top or bottom.
3. Nest the offending area
If the white line appears in a certain section of your email e.g. in the left column of a two-column layout, then nest that section in an additional table. It seems to be counterproductive as additional tables could compound the problem, but I’ve found that nesting the problem area means it then ‘lives’ inside its own container and if anything surrounding that section caused the problem, then it won’t affect it anymore.
Original section:
Nested section:
In conclusion
What makes this thin line difficult to fix is that it is inconsistent. I might see the line but in the tests I send to my colleagues at Cantaloupe they won’t see the line and vice versa. Sometimes when you fix the line in one place it pops up in another place… It has happened where I see a line in an email and when I start scrolling it disappears 🤯
In the end you have to make a call and decide if an erratic thin line in your email is going to spoil your day and delay your message or is your message more important to get out than to worry about some people potentially seeing a thin line in their email. I’ve seen it many times in emails I receive from other brands, and it doesn’t make me want to unsubscribe from their newsletter because I’m interested in what they have to share with me.
Some good news with regards to Outlook is that it finally will move to using another rendering engine in the not too distant future and they plan to stop support around October 2026 for the last Outlook version that uses Microsoft Word.
In the meantime, we have to play the cards we are dealt and as always when creating any email the final step is to do thorough testing before pressing that send button!
See also HTML for Outlook and How to get rid of those pesky purple and blue links in email.
0 Comments