How Do I Get Rid of the Lines in Outlook Emails?
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.
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 behavior, 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 ( ) before you close your table cell (<td>).
<table border="0" cellspacing="0" cellpadding="0"> <tr> <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> </td> </tr> </table>
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; }
</style>
<![endif]-->
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;}
</style>
<![endif]-->
Tell Us About Your Experience with the Outlook 2016 Line Bug
We’re hoping Microsoft will address this bug in the future but, in the meantime, we’ll need to use a workaround. What have your experiences been? Do these solutions fix your issues? Have you developed another solution? Let us know on Twitter or Facebook, or in the comments below.
Testing Your Fix
The most important part of fixing any email bug is testing your solution and verifying that you’ve resolved the issue. Try Email on Acid free for seven days and get instant access to email testing in more than 70 email clients. Be confident before you hit “send.”
Author: Kyle Lapaglia
Author: Kyle Lapaglia
2 thoughts on “How Do I Get Rid of the Lines in Outlook Emails?”
Comments are closed.
We have found that a double
or
for spacing can cause issues esp at the end of a body copy – if these are removed & a table row inserted with a fixed height works, removing the issues. We have applied this to a few of our emails & it seems to work.
Thanks for the tip, Elaine!