Creating emails may be powerful, we all know that. We additionally know that Outlook 2016 is among the worst culprits for making it harder. One of the infamous e-mail bugs is the 1px line bug; it’s a scourge of many good e-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 try to reduce its impact in your e-mail.
What Is the Outlook Line Bug?
Outlook 2016 will add further strains to our emails. These strains will inherit the background set in your <physique> tag, usually inflicting the problems illustrated above. To make issues worse, this bug appears to occur at random, though it does seem extra frequently on Home windows 10 machines, in comparison with Home windows 7.
Why Do the Traces Seem?
The bug has precipitated so many complications that it led to a TechNet submit 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 typical rendering engine (Microsoft Phrase).
Though we don’t know the precise cause for this odd conduct, the main concept is that it has to do with heights which might be odd numbers. If we uncover any new info, we’ll remember to replace this submit.
How Do I Repair the Traces?
You’ll be able to develop emails in many alternative buildings and codecs. Whereas that is nice for us builders (it offers us the liberty to code nonetheless 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 of us, the repair is so simple as altering font sizes from odd numbers to even numbers. For instance, if in case you have a font dimension of 13px or 15px, strive changing it to 14px.
You may also strive 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 approach to pressure 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 house. The instructed repair for that is to incorporate a non-breaking house ( ) 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 concentrating on Outlook and collapsing the borders. Simply add this code to your head:
<!--[if (gte mso 9)|(IE)]>
<model kind="textual content/css">
desk {
border-collapse: collapse;
border-spacing: 0; }
</model>
<![endif]-->
It’s price noting that relying on the way you structured your e-mail this is probably not the appropriate repair for you. Once we examined this resolution 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 resolution is what we utilized in our March e-newsletter.
We mentioned earlier that the strains inherit the colour from the <physique> tag. So, by setting the background colour of the <physique> to the identical colour as our downside part, we primarily cowl up the strains. They’re nonetheless there, sure, however your subscribers received’t see them. We additionally wish to solely goal the issue purchasers. There’s no want to alter the background colour of purchasers that render the e-mail appropriately.
Merely add this code to the <head> of your e-mail with the background colour modified to match the issue part.
<!--[if (gte mso 9)|(IE)]>
<model kind="textual content/css">
physique { background-color:#123456 !necessary;}
</model>
<![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 resolution? Tell us on Twitter or Fb, or within the feedback beneath.
Testing Your Repair
A very powerful a part of fixing any e-mail bug is testing your resolution and verifying that you just’ve resolved the problem. Attempt E mail on Acid free for seven days and get on the spot entry to e-mail testing in additional than 70 e-mail purchasers. Be assured earlier than you hit “ship.”
