New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

versafix-1: Outlook 2016 Rendering Lines #93

Open
thewibblywobbly opened this Issue Jan 26, 2016 · 20 comments

Comments

Projects
None yet
10 participants
@thewibblywobbly

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.

line_issue

@bago

This comment has been minimized.

Show comment
Hide comment
@bago

bago Jan 26, 2016

Member

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.

Member

bago commented Jan 26, 2016

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.

@bago bago changed the title from Outlook 2016 Rendering Lines to versafix-1: Outlook 2016 Rendering Lines Jan 26, 2016

@bago bago self-assigned this Jan 26, 2016

@tayvano

This comment has been minimized.

Show comment
Hide comment
@tayvano

tayvano Jan 27, 2016

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 ;)

tayvano commented Jan 27, 2016

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

This comment has been minimized.

Show comment
Hide comment
@bago

bago Jan 27, 2016

Member

"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).

Member

bago commented Jan 27, 2016

"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

This comment has been minimized.

Show comment
Hide comment
@tayvano

tayvano Jan 27, 2016

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.

tayvano commented Jan 27, 2016

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

This comment has been minimized.

Show comment
Hide comment
@bago

bago Mar 24, 2016

Member

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!

Member

bago commented Mar 24, 2016

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

This comment has been minimized.

Show comment
Hide comment
@tayvano

tayvano Mar 24, 2016

@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.

tayvano commented Mar 24, 2016

@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 comment has been minimized.

Show comment
Hide comment
@scholtes

scholtes Apr 27, 2016

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

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

This comment has been minimized.

Show comment
Hide comment
@CodingPeak

CodingPeak Sep 14, 2016

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...

CodingPeak commented Sep 14, 2016

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 comment has been minimized.

Show comment
Hide comment
@bago

bago Sep 14, 2016

Member

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".

Member

bago commented Sep 14, 2016

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

This comment has been minimized.

Show comment
Hide comment
@tayvano

tayvano Sep 14, 2016

@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. ;)

tayvano commented Sep 14, 2016

@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

This comment has been minimized.

Show comment
Hide comment
@bago

bago Sep 14, 2016

Member

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/

Member

bago commented Sep 14, 2016

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

This comment has been minimized.

Show comment
Hide comment
@voodoo6

voodoo6 Nov 16, 2016

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

voodoo6 commented Nov 16, 2016

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

@bago

This comment has been minimized.

Show comment
Hide comment
@bago

bago Nov 16, 2016

Member

@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.

Member

bago commented Nov 16, 2016

@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

This comment has been minimized.

Show comment
Hide comment
@voodoo6

voodoo6 Nov 16, 2016

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!?

voodoo6 commented Nov 16, 2016

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

This comment has been minimized.

Show comment
Hide comment
@tayvano

tayvano Nov 16, 2016

@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. 😂

tayvano commented Nov 16, 2016

@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

This comment has been minimized.

Show comment
Hide comment
@rob24g

rob24g Jun 5, 2017

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.

rob24g commented Jun 5, 2017

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

This comment has been minimized.

Show comment
Hide comment
@pcbliss

pcbliss Jun 7, 2017

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.

pcbliss commented Jun 7, 2017

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

This comment has been minimized.

Show comment
Hide comment
@ericbunch

ericbunch Oct 11, 2017

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/

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

This comment has been minimized.

Show comment
Hide comment
@bago

bago Oct 12, 2017

Member

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.

Member

bago commented Oct 12, 2017

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

This comment has been minimized.

Show comment
Hide comment
@barryflammia

barryflammia Nov 17, 2017

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.

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment