Published: 10 April, 2021

The Outlook 2016 Line Bug

Developing emails can be tough, we know that. We also know that Outlook 2016 is one of the worst culprits for making it tougher. One of the most notorious email bugs is the 1px line bug; it’s a scourge of many perfect email designs.

Unfortunately, there isn’t a hard-and-fast rule for fixing this bug. However, there are some steps you can take to try and minimize its effect on your email.

Email on Acid Email Footer


What Is the Outlook Line Bug?

Outlook 2016 will add extra lines to our emails. These lines will inherit the background set on your <body> tag, often causing the issues illustrated above. To make matters worse, this bug seems to happen at random, although it does appear more regularly on Windows 10 machines, compared to Windows 7.

Why Do the Lines Appear?

The bug has caused so many headaches that it led to a TechNet post trying to alert Microsoft’s attention to it. What makes this bug especially perplexing is that although it happens on Outlook 2016, it does not appear on Outlook 2007, 2010 or 2013, all of which share a common rendering engine (Microsoft Word).

Although we don’t know the exact reason for this odd behaviour, the leading theory is that it has to do with heights that are odd numbers. If we discover any new information, we’ll be sure to update this post.

How Do I Fix the Lines?

You can develop emails in many different structures and formats. While this is great for us developers (it gives us the freedom to code however we like), it does mean that there are some inherent trial and error in fixing bugs like this.

1. Adjusting Heights and Font Sizes

For some folks, the fix is as simple as changing font sizes from odd numbers to even numbers. For example, if you have a font size of 13px or 15px, try converting it to 14px.

You can also try manually changing heights, font sizes and line-heights to achieve the same outcome.

2. Ghost Breaks

Another fairly simple fix is the ghost break. Much like ghost tables, the ghost break is a way to force a line break that is only for the problem clients.

<!--[if gte mso 12]><br /> <![endif]-->

3. Using Non-Breaking Spaces

Other developers have reported that the issue is down to Outlook 2016 converting white space. The suggested fix for this is to include a non-breaking space (&nbsp;) before you close your table cell (<td>).

<table border="0" cellspacing="0" cellpadding="0">
		<td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
		tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
		quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
		consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
		cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
		proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br>

4. Using Microsoft-Specific Code

Microsoft-specific code can get quite detailed, but this snippet is fairly simple. All we’re doing is targeting Outlook and collapsing the borders. Just add this code to your head:

<!--[if (gte mso 9)|(IE)]>
<style type="text/css">
table {
border-collapse: collapse;
border-spacing: 0; }

It’s worth noting that depending on how you structured your email this may not be the right fix for you. When we tested this solution it worked on some emails, but on others, it had an adverse effect on the overall rendering of the design.

5. Matching the Background

Less of a fix and more of a “cover-up,” this solution is what we used in our March newsletter.

We discussed earlier that the lines inherit the color from the <body> tag. So, by setting the background color of the <body> to the same color as our problem section, we essentially cover up the lines. They’re still there, yes, but your subscribers won’t see them. We also want to only target the problem clients. There’s no need to change the background color of clients that render the email correctly.

Simply add this code to the <head> of your email with the background color changed to match the problem section.

<!--[if (gte mso 9)|(IE)]>
		<style type="text/css">
			body { background-color:#123456 !important;}

Testing Your Fix

The most important part of fixing any email bug is testing your solution and verifying that you’ve resolved the issue.

You can try our email testing suite for free here

Find out how ProFundCom can help you

Sign up for a 3 month trial. We’ll help you get going and answer any questions.

Try now