versafix-1: Outlook 2016 Rendering Lines

[halszkaraptor]

I have read the readme several times and believe I am including all the appropriate information. Please let me know if that is not the case, and I will include what is missing. I am viewing the versafix-1 template in Outlook 2016 on Windows 10. When I view the emails with Outlook 2016, I am seeing lines in the shown email. I am using the online Mosaico editor (the demo editor) to send myself a test email. I am also experiencing this issue with the code I have cloned from github and that is why I tried a test email in the online editor. I am not seeing this issue with other clients I have (Outlook 2010, Gmail and Android Email, MailCatcher in my dev environment also does not display them).

I generated the email below by going to the online demo editor, inserting the blocks I have seen the issue with thus far and used the Test button to send myself a test email.

[bago]

Thank you for the report. Unfortunately Outlook 2016 is not between clients I have access to, and Litmus does not include it in their tests. AFAIK it usually provides results similar to Outlook 2007/10/13 but each outlook version has its own glitches.

I will try to get access to an Outlook 2016 in order to do some tests and see if (and how) we can put workarounds for it.

[tayvano]

This result is the top result in google for "outlook 2016 rendering lines", which is how I arrived here.

Firstly, I'm using a different template (Minty from https://litmus.com/blog/go-responsive-with-these-7-free-email-templates-from-stamplia), but encountering the same issue.

This only in Outlook 2016 (PC). All other Outlooks are fine, including Mac 2016.

I got rid of 2 other lines that were occurring by restructuring. Instead of stacks of

<div class="block">
    <table bg gray>
        <tbody>
            <tr><td>.....content and stuff </td></tr>
        </tbody>
    </table>
</div>

I removed the div, table, and tbody so the s are stacked. That created another gray line (color of the bg), which was then removed by nixing the internal white tables, most likely causing problems in other clients without fixing Outlook 2016.

Helpful link

Now I'm back to square 1 - I'm now going to redo my spacers and see if that has any affect. If I solve this annoying issue, I'll let you know.

If ANYONE figures out the root cause of this and a fix in the meantime, I would be extremely thankful if you pinged me.

PS: @bago - EmailOnAcid just added Outlook 2016 -- they have a free 7 day trial. Wish we tested with Litmus now ;)

[bago]

"I removed the div, table, and tbody so the s are stacked".

In our case the div is there to make the layout "hybrid" (so it goes from multicolumn to multiline also on Gmail mobile and other mobile webmails not supporting media queries).

Thank you for the EoA link and the hint about their support for Outlook 2016. I used EoA in past, then moved to Litmus when they introduced the "instant previews" (very time saving). Buying outlook monthly is cheaper than EoA or Litmus and gives me real/live results... so maybe I'll buy outlook (they also have 1 month trial).

[tayvano]

Good luck, mate. I basically ended up deleting stuff until the lines disappeared and then using the existing blocks to rebuild what I deleted. Still no idea why it was happening. Maybe spacers? Maybe some random missing mso-bullshit.

[bago]

Just for reference after I wasted days rewriting the versafix template just to obtain the same issue, I wrote a full blog post with my findings and opened a topic on litmus community:
https://mosaico.io/email-client-tricks/outlook-2016-weird-1px-horizontal-lines/
https://litmus.com/community/code/4990-outlook-2016-weird-1px-horizontal-lines-showing-up-in-the-body

let's see if someone show up with a workaround!

[tayvano]

@bago :(

We have developed maybe 10-12 email templates in the last couple months and haven't found a solid fix. In fact, we've mostly been making the background color the same as it hides it better. Sometimes they do fail to show up but I have never been able to nail down a concrete reason as to why or why not.

I'm going to be trying out Zurb's new foundation emails that they finally released for the next batch of emails. If not, I'm going to have to hire a subcontractor in Russia or somethin to fight with these. No one is making enough ROI on these flipping emails for me to spend the amount of hours I've been spending on them. So frustrating.

I'll keep you posted.

[scholtes]

This is not directly related to this issue, but in case it helps any future readers who chance upon it, here are some quirks Outlook has rendering emails:

• margin (and similar) properties are often ignored
• block elements inside inline elements can cause issues (e.g., if you put a ul in a td it might not render consistently)
• nth-child (and similar) selectors are often ignored

[CodingPeak]

Hi @bago,

It's been since March/April since anyone last answered on this issue, so I wanted to ask if this problem is still present. I'm desperately looking for a decent mail template editor and Mosaico looks promising! I'm now testing the online demo (https://mosaico.io/editor.html?0.14#templates/versafix-1/template-versafix-1.html) and I also got the rendering line in Outlook 2016...

[bago]

This is a known issue in Windows 10 mail and Outlook 2016. THere is no known workaround out there and Microsoft aknowledged it is a bug. Very often you can get rid of a line if you add a new line on a block (it doesn't matter if it is the same block, if it is before or after)... most changes you do to the email will alter the places where the 1px bug happens.. so sometimes by trial-error you can get rid of them.

BTW, I simply started ignoring it. People using Outlook 2016 or Windows 10 Mail is already used to see that weird lines on many emails.

Keep in mind that the lines are coloured the same as the background of the email. So if you use a background color that is the same of your main content then it will be harder to "spot".

[tayvano]

@bago Good to know. We use a lot of blocks now (using Foundation 2 emails to build) and try to use a background color that is content content color as well. Unfortunately for me, my clients don't think "everyone is ignoring the lines now" is a solution. ;)

[bago]

Well I know.. I have customers that wants to see animated gifs in Outlook, too.. but we can't do miracles.

At the end of this article you can find a Microsoft page acknowledging the issue:
https://mosaico.io/email-client-tricks/outlook-2016-weird-1px-horizontal-lines/

[voodoo6]

Removing align="left" from the last table fixed this for me (thanks to this post for the suggestion – mentioned at the end)

[bago]

@voodoo6 the post you linked is written by me and I also written the versafix-1 code.. if the align was a good solution I would have added it to the template: altering the align simply changes the places where the lines can appear.. so if you don't have lines you can see lines appearing .. if you have them you can see them disappearing...

This is a weird Outlook bug and Microsoft aknowledged it... as far as I know there is NO real solution to this but doing some little change around in your code/text/sizes/aligns until the lines disappear.

[voodoo6]

Thanks for the post @bago, I was close to losing it before I found your suggestion, it was a big help.

Just before I found your post, I tweeted the outlook team asking if they were trying to ruin my life but I now think the development team simply hate us all and get a kick out of finding new ways to make outlook even worse with each release. Surely it's the only logical explanation for these never ending bugs!?

[tayvano]

@voodoo6 I'm guessing their priorities are just elsewhere. How an email renders is like 1% of the code and bugs in any given email client. Random lines aren't 100% reproducible and don't have an affect on security.

....or maybe they're working on gif support. 😂

[rob24g]

Still no update on this? Seems like templates I used before now have tons of these lines going through random parts.

Glad to see Microsoft dragging their feet on fixing after they teamed up with litmus almost 10 months ago to make "email" better.

[pcbliss]

Something has happened recently to make this much worse. I can go back and look at emails that rendered fine just a few weeks ago and now they are full of white lines.

[ericbunch]

Just wanted to share what worked for me. Per this suggestion, I added a non-breaking space just before the table cell ends, right before the line appears.

https://code.support/code/html/fix-horizontal-line-in-emails-for-outlook-2016/

[bago]

I just tried adding an nbsp; almost everywhere but it doesn't fix 1px lines I see.

It only fixes them when the nbsp introduces visible vertical spacing, but in this case the result is not what I wanted and furthermore it is not a fix, it is just a variable: add the nbsp everywhere and 1px lines will appear somewhere else.

[barryflammia]

I've noticed when changing border-collapse from separate to collapse it removes the lines, but obviously breaks the email. I've also fixed the line issue by adjusting the line-height up or down by 0.1px until it disappears.

[27lm33]

We have just come up against this again, I see no one has posted for a while. Just wondering is anyone has any new fixs?

[bago]

There's no known fix for this Outlook issue. Microsoft doesn't seem to care about it and the "workaround" is altering the heights of the contents where you see the lines until the lines disappear (change font/font size, or add/remove content).

AFAIK Outlook 2019 for Windows does NOT fix the issue. Let's hope they didn't add more new issues like this one.

[27lm33]

Thought that was the case, i think we are on outlook 2019 and still get the issue. Thanks for the reply.

[mickkahn]

Keep in mind that the lines are coloured the same as the background of the email. So if you use a background color that is the same of your main content then it will be harder to "spot".

That doesn't work for me. Whatever colours I chose, Outlook chooses a colour that contrasts!

Its now 2020 and I don't suppose MS will do anything about this and more of us will waste time finding that there is nothing we can do about it. Has anyone found any work arounds yey?

[fish-404]

It's now 2022, my users and I use Outlook 365, this problem still exist.

[bago]

It's now 2022, my users and I use Outlook 365, this problem still exist.

yes, we know: sounds like Microsoft doesn't care at all.

This is not a versafix issue but an Outlook issue: and still there are no known generic workarounds as far as I known.

You can be succesfull fixing a single email by changing some random stuff like font height, spacings and more, but there is no generic fix we can apply to the template.