In relation to electronic mail improvement there may be one certainty that each one electronic mail builders are accustomed to; Outlook will trigger you complications.
On this case we’re trying particularly at some of the notorious bugs with Outlook; the seemingly random white traces that may get added to your electronic mail. The reason for many a headache and annoyed Google seek for electronic mail builders and entrepreneurs alike.
The inconvenient reality is that there’s no magic wand to wave and make these traces disappear, however there are steps we are able to take to reduce the impression of this bug in your meticulously crafted emails.
Right here we’ll take a dive into what causes them to seem and the way we are able to quash these pesky traces.
Within the Trenches: A Dev’s Battle with the 1px Line Bug
I first encountered the road bug while engaged on an E-mail on Acid E-newsletter. Design was accepted, the code was completed and we had been working last QA checks. After testing on my dwell gadgets and the E-mail on Acid testing platform, each take a look at seemed good to me and I handed it off for the ultimate set of assessments. That’s after I obtained the Slack ping:
“Hey Alex, what are these traces in Outlook?”
I used to be perplexed, checked my assessments and every part seemed a-okay. It was solely after re-testing the identical code thrice that I may replicate the difficulty. That’s the place the complications started. “Needs to be a easy repair,” was my first thought. I shuffled just a few background colours and figured that’d be the tip of it. My new assessments seemed good however after just a few re-tests the difficulty endured.
And it’s been a persistent rendering points for electronic mail builders all over the place.
So, why do white traces seem in Outlook?
Regardless of Microsoft being absolutely conscious of this head scratching bug no official phrase has come within the years it’s been plaguing the e-mail improvement group. It tends to creep up on Home windows desktop variations of Outlook, however the white traces will also be an issue for Outlook 365.
Though we are able to’t make certain, the main idea is that it comes from the pixel to level conversion that Outlook does, when a line-height, top or font-size is transformed from px to pt and finally ends up as a decimal, the leftover decimal level is added as an unpleasant white line.
6 strategies for fixing white traces in Outlook emails
The pliability to create emails in a various number of buildings and codecs is a boon for builders, granting us the freedom to code in accordance with our preferences.
Nonetheless, this versatility comes with the inherent problem of navigating by trial and error in relation to resolving bugs just like the one at hand.
When you’re experiencing these dreaded white traces, you could have to attempt just a few of the fixes beneath to eliminate them in your emails.
1. Adjusting Heights, Line-heights and Font Sizes
That is the primary repair that anybody combating these traces needs to be adjusting your heights, line-heights and font-sizes.
Due to the aforementioned conversion and decimal drawback, you’ll need to set all of those to even numbers. Even higher if they’re divisible by 4. So utilizing font-sizes of 16 or 20 will usually be safer than 18, for instance.
Just be sure you’re altering these all over the place, not simply the issue part, you don’t need to repair the traces in a single space of your electronic mail simply to have them crop up once more later.
2. Including Outlook-specific Ghost Breaks
If altering your heights and font sizes doesn’t do the trick, you may attempt including Outlook-specific ghost breaks into the issue sections to easy out the heights.
Very similar to ghost tables, the ghost break is a method to power a line break that’s just for the issue shoppers.
<!--[if gte mso 12]><br /> <![endif]-->3. Utilizing Microsoft-Particular Code within the Head
Though Microsoft-specific code (MSO) can get fairly difficult, this snippet of code is pretty straight ahead.
<!--[if (gte mso 9)|(IE)]>
<fashion sort="textual content/css">
desk {
border-collapse: collapse;
border-spacing: 0; }
</fashion>
<![endif]-->
We’re telling the consumer, on this case Outlook, that we need to collapse all of the borders within the electronic mail to zero. You’ll need to add this to your Head part. Though the default border worth is already 0, this may nonetheless generally remedy the difficulty – weird!
It’s value noting that you must make sure you take a look at after making an attempt this code, relying on how your electronic mail is structured it will probably have an opposed impact in your electronic mail rendering in Outlook.
That being stated, I’ve used this just a few occasions when the opposite fixes haven’t alleviated my white line complications.
4. Utilizing Non-Breaking Areas
Some electronic mail builders have reported that the difficulty is right down to Outlook changing white house, fairly than uneven heights.
The recommended 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>This can, after all, add some additional white house beneath your copy, so when making an attempt this repair ensure you’re conscious of the way it’ll impression your designs.
5. Masking up with Background Colours
The white traces that Outlook provides inherit the colour from the <physique> tag. So, by setting the background coloration of the <physique> to the identical coloration as our drawback 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 shoppers.
There’s no want to vary the background coloration of shoppers that render the e-mail accurately.
Merely add this code to the <head> of your electronic mail with the background coloration modified to match the issue part.
<!--[if (gte mso 9)|(IE)]>
<fashion sort="textual content/css">
physique { background-color:#123456 !necessary;}
</fashion>6. Nest the issue space
If all else fails, add tables. Though that is stated half in jest it will probably assist to repair the difficulty. The white traces can generally stem from desk construction ending up with uneven scaling behind the scenes.
Merely, wrap the offending space with a brand new desk and see in case your line drawback disappears.
Troubleshooting Outlook emails
Hopefully one (or a mix of some) of the fixes above have helped you defeat the random white traces from Outlook. Though this could be a irritating bug to wrangle, we’re hoping that the new model of Outlook that’s scheduled for 2026 will put an finish to those rage-inducing Outlook bugs sooner or later.
Within the meantime, in the event you want extra assist with Outlook we’ve obtained you lined with our Outlook coding information and our Outlook useful resource hub. If you wish to take a deeper dive into the technical features of what causes the white-line bug, you may take a look at this improbable thread.
In fact, in the event you’re not previewing your electronic mail campaigns earlier than you launch, you could be unaware of any issues in any respect. That’s the place Sinch E-mail on Acid is available in. Our pre-send testing platform is designed to simplify the complexities of electronic mail and assist groups conduct high quality assurance (QA).
From annoying white traces in Outlook to previewing darkish mode for Gmail to enhancing electronic mail accessibility on your subscribers – with limitless testing you might be assured you’re delivering your greatest.
Writer: Alex Ilhan
Alex Ilhan is a contract electronic mail specialist and electronic mail developer primarily based in the UK with expertise working for each manufacturers and companies. He is additionally spoken on a wide range of subjects at electronic mail trade conferences. Discover Alex on LinkedIn to attach.
Writer: Alex Ilhan
Alex Ilhan is a contract electronic mail specialist and electronic mail developer primarily based in the UK with expertise working for each manufacturers and companies. He is additionally spoken on a wide range of subjects at electronic mail trade conferences. Discover Alex on LinkedIn to attach.
