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.