On the subject of electronic mail growth there’s one certainty that each one electronic mail builders are acquainted with; 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 fact is that there’s no magic wand to wave and make these traces disappear, however there are steps we will take to reduce the influence 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 will 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 permitted, the code was completed and we had been operating ultimate QA checks. After testing on my reside units and the E-mail on Acid testing platform, each take a look at appeared good to me and I handed it off for the ultimate set of checks. That’s after I acquired the Slack ping:
“Hey Alex, what are these traces in Outlook?”
I used to be perplexed, checked my checks and the whole lot appeared 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. “Ought to be a easy repair,” was my first thought. I shuffled a couple of background colours and figured that’d be the top of it. My new checks appeared good however after a couple of re-tests the difficulty persevered.
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 totally conscious of this head scratching bug no official phrase has come within the years it’s been plaguing the e-mail growth group. It tends to creep up on Home windows desktop variations of Outlook, however the white traces may also be an issue for Outlook 365.
Though we will’t ensure, the main concept is that it comes from the pixel to level conversion that Outlook does, when a line-height, peak 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 flexibleness to create emails in a various number of constructions and codecs is a boon for builders, granting us the freedom to code in accordance with our preferences.
Nevertheless, this versatility comes with the inherent problem of navigating by way of trial and error relating to resolving bugs just like the one at hand.
In the event you’re experiencing these dreaded white traces, you might have to strive a couple of of the fixes under to do away with them in your emails.
1. Adjusting Heights, Line-heights and Font Sizes
That is the primary repair that anybody fighting these traces must 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 strive including Outlook-specific ghost breaks into the issue sections to clean out the heights.
Very like ghost tables, the ghost break is a option to power a line break that’s just for the issue purchasers.
<!--[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)]>
<model sort="textual content/css">
desk {
border-collapse: collapse;
border-spacing: 0; }
</model>
<![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. Regardless that the default border worth is already 0, this could nonetheless generally resolve the difficulty – weird!
It’s price noting that you need to remember to take a look at after attempting this code, relying on how your electronic mail is structured it could actually have an adversarial impact in your electronic mail rendering in Outlook.
That being stated, I’ve used this a couple of 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 all the way down to Outlook changing white house, relatively than uneven heights.
The urged 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 may, after all, add some further white house under your copy, so when attempting this repair be sure to’re conscious of the way it’ll influence your designs.
5. Protecting up with Background Colours
The white traces that Outlook provides inherit the colour from the <physique> tag. So, by setting the background shade of the <physique> to the identical shade as our drawback part, we basically cowl up the traces. They’re nonetheless there, sure, however your subscribers received’t see them. We additionally need to solely goal the issue purchasers.
There’s no want to alter the background shade of purchasers that render the e-mail accurately.
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)]>
<model sort="textual content/css">
physique { background-color:#123456 !necessary;}
</model>6. Nest the issue space
If all else fails, add tables. Though that is stated half in jest it could actually 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 mixture of some) of the fixes above have helped you defeat the random white traces from Outlook. Though this generally is 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, for those who want extra assist with Outlook we’ve acquired 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 try this incredible thread.
In fact, for those who’re not previewing your electronic mail campaigns earlier than you launch, you might 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 bettering electronic mail accessibility in your subscribers – with limitless testing you could be assured you’re delivering your finest.
Writer: Alex Ilhan
Alex Ilhan is a contract electronic mail specialist and electronic mail developer based mostly in the UK with expertise working for each manufacturers and companies. He is additionally spoken on a wide range of matters 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 based mostly in the UK with expertise working for each manufacturers and companies. He is additionally spoken on a wide range of matters at electronic mail trade conferences. Discover Alex on LinkedIn to attach.
