Are you experiencing an issue with thin horizontal lines appearing in your emails when sending through Outlook? These lines can be distracting, perceived as unprofessional, and disrupt the reading experience. Here are some troubleshooting steps to help reduce the chance of or fix these lines.
You spend time, love, and energy perfecting your emails. Why does Outlook have to throw this wrench into your plans? These random lines appearing in your emails are a pain for users across legacy/classic versions of Outlook.
We’ll cover some options to get rid of those pesky lines.
Background about the issue
Why do thin lines appear?
This issue has been around for a while, but Microsoft has not officially confirmed why it happens. We know it occurs in Outlook specifically, and it’s not limited to any email-building platform, but what platform is used to view the email?
There are a few theories on why it’s happening, but the most prevalent one seems to be an unaddressed UI bug that results in the HTML not rendering correctly within the email client.
The notorious horizontal line in question:
Outlook as a client, as a root cause
As has been widely reported on various sites, the issue seems to be centered around how older Outlook clients and clients using Outlook's "classic" HTML display engine choose to interpret HTML.
Microsoft customers have noticed that the issue appears to have been fixed, or the chances of it occurring have been drastically reduced in the most recent versions of Outlook.
It has been reported that recipients who have turned on Try the new Outlook in their Outlook client have seen an elimination or reduction of the problem. Please note that this option is only available for specific versions of Outlook, and your internal IT team may control access and availability of the "New Outlook."
It's important to note that this works only if you and the recipient have the New Outlook turned on.
When Are Thin Lines Likely To Show Up?
There are a few scenarios in which the horizontal lines occur repeatedly.
- Different-sized content blocks
Content blocks of varying sizes that don’t line up well may cause horizontal lines to appear.
- Zooming in on Outlook Desktop
These lines are commonly visible when users are zoomed in on the email, as 1px spacing is relative to the device view.
- Stacked image borders
Outlook will sometimes add a border surrounding an image or element if you have several images on top of each other. Ensure borders are set to 0 to avoid this.
- Your image size is uneven
Ensure your image size is divisible by two with no decimals to ensure no stray pixels. For example, opt for an image 200px by 200px rather than 205px by 205px. There are lots of free image editors that can help adjust pixels, such as Microsoft Photo Editor, Apple's Photo Editor on Mac, or the Open Source Gnu Image Manipulation Program
- Your emails are being forwarded
The original email can look fine, but a forward can make the lines appear out of nowhere. This is because forwarded emails are sent outside ContactMonkey (through Outlook), and our system can’t reformat the HTML.
Avoiding lines by email design
Since controlling a recipient's email client can be challenging, customers may still want to design their emails to reduce the chances of an issue. Below are some methods customers can look at to reduce the chances of the lines appearing and offer emails with the highest possible compatibility
Match the background color of the email.
By setting your email's background color to the color of the lines appearing (often white or dark), you can minimize the appearance of the horizontal lines. This applies to your content background color and your table's color.
To change your email background color, follow these steps:
- Sign in to your ContactMonkey dashboard
- Head to Emails
- Create your new email or open up the email you want to edit
- In the menu on the left, select Settings
- Under Background color or Content area background color, enter your desired color hex code or select from the color wheel.
- Customers should look to try and match the background color and content area background color as closely as possible so that the lines will be less likely to appear
Background color: The default background color for the email design. This is the base background color for the email.
Content area background color: The default background color for the content area only. This is the layer "on top" of the background color. Although providing contrast between the content and background color can provide additional design choices, it can also lead to lines appearing and being noticed.
Learn more about editing your email settings in Edit Default Settings Within The Email Builder.
Add An Empty Row
Adding an empty row or increasing padding in the row above by 1px (but an even number) may help balance pixels across the email. To add a row to your email, follow these steps:
- Sign in to your ContactMonkey dashboard
- Head to Emails
- Create your new email or open the email you want to edit
- Click on Rows in the menu on the right
- Drag and drop a new row into your email
- Do not add any content to the row
Keep all sizing numbers "even"
For some customers, the fix is as simple as changing font sizes from odd to even numbers. For example, if you have a font size of 13px or 15px, try converting it to 14px.
Designers should also consider manually adjusting the table heights, padding, borders, font sizes, and line heights, to name a few values that should be adjusted to be "even."
We also recommend ensuring that image pixel sizes are divisible by two with no decimals to ensure no stray pixels. For example, opt for an image 200px by 200px rather than 205px by 205px. Many free image editors can help adjust pixels, such as Microsoft Photo Editor, Apple's Photo Editor on Mac, or the Open Source Gnu Image Manipulation Program.
Break content into smaller content blocks using rows
Breaking down large content blocks into smaller blocks using rows tends to help minimize any horizontal lines.
Send a full test email to a previously affected user
Customers wanting to thoroughly test an email before sending a mass email to many users may wish to identify one affected person and send them an email for test before sending it to the entire organization. They can do so by completing a campaign send for an individual affected user before sending the whole campaign. Although this can add time to a customer's process, it can provide valuable information before sending an email to a broader audience.