Growing emails might be robust, we all know that. We additionally know that Outlook 2016 is among the worst culprits for making it harder. One of the infamous electronic mail bugs is the 1px line bug; it’s a scourge of many good electronic mail designs.
Sadly, there isn’t a hard-and-fast rule for fixing this bug. Nevertheless, there are some steps you’ll be able to take to attempt to reduce its impact in your electronic mail.
What Is the Outlook Line Bug?
Outlook 2016 will add further traces to our emails. These traces will inherit the background set in your <physique> tag, typically inflicting the problems illustrated above. To make issues worse, this bug appears to occur at random, though it does seem extra often on Home windows 10 machines, in comparison with Home windows 7.
Why Do the Strains Seem?
The bug has precipitated so many complications that it led to a TechNet put up making an attempt to alert Microsoft’s consideration to it. What makes this bug particularly perplexing is that though it occurs on Outlook 2016, it doesn’t seem on Outlook 2007, 2010 or 2013, all of which share a standard rendering engine (Microsoft Phrase).
Though we don’t know the precise motive for this odd conduct, the main principle is that it has to do with heights which might be odd numbers. If we uncover any new info, we’ll make sure to replace this put up.
How Do I Repair the Strains?
You’ll be able to develop emails in many alternative buildings and codecs. Whereas that is nice for us builders (it provides us the liberty to code nevertheless we like), it does imply that there are some inherent trial and error in fixing bugs like this.
1. Adjusting Heights and Font Sizes
For some people, the repair is so simple as altering font sizes from odd numbers to even numbers. For instance, you probably have a font dimension of 13px or 15px, attempt changing it to 14px.
You may also attempt manually altering heights, font sizes and line-heights to realize the identical final result.
2. Ghost Breaks
One other pretty easy repair is the ghost break. Very like ghost tables, the ghost break is a solution to power a line break that’s just for the issue purchasers.
<!--[if gte mso 12]><br /> <![endif]-->
3. Utilizing Non-Breaking Areas
Different builders have reported that the problem is right down to Outlook 2016 changing white area. The advised repair for that is to incorporate a non-breaking area ( ) earlier than you shut your desk cell (<td>).
<desk 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 advert 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> </desk>
4. Utilizing Microsoft-Particular Code
Microsoft-specific code can get fairly detailed, however this snippet is pretty easy. All we’re doing is focusing on Outlook and collapsing the borders. Simply add this code to your head:
<!--[if (gte mso 9)|(IE)]>
<fashion kind="textual content/css">
desk {
border-collapse: collapse;
border-spacing: 0; }
</fashion>
<![endif]-->
It’s price noting that relying on the way you structured your electronic mail this will not be the fitting repair for you. After we examined this answer it labored on some emails, however on others, it had an hostile impact on the general rendering of the design.
5. Matching the Background
Much less of a repair and extra of a “cover-up,” this answer is what we utilized in our March e-newsletter.
We mentioned earlier that the traces inherit the colour from the <physique> tag. So, by setting the background shade of the <physique> to the identical shade as our downside part, we basically cowl up the traces. They’re nonetheless there, sure, however your subscribers gained’t see them. We additionally need to solely goal the issue purchasers. There’s no want to vary the background shade of purchasers that render the e-mail appropriately.
Merely add this code to the <head> of your electronic mail with the background shade modified to match the issue part.
<!--[if (gte mso 9)|(IE)]>
<fashion kind="textual content/css">
physique { background-color:#123456 !necessary;}
</fashion>
<![endif]-->
Inform Us About Your Expertise with the Outlook 2016 Line Bug
We’re hoping Microsoft will tackle this bug sooner or later however, within the meantime, we’ll want to make use of a workaround. What have your experiences been? Do these options repair your points? Have you ever developed one other answer? Tell us on Twitter or Fb, or within the feedback under.
Testing Your Repair
An important a part of fixing any electronic mail bug is testing your answer and verifying that you simply’ve resolved the problem. Attempt Electronic mail on Acid free for seven days and get instantaneous entry to electronic mail testing in additional than 70 electronic mail purchasers. Be assured earlier than you hit “ship.”
