Skip to content
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 #10

Open
halszkaraptor opened this issue Jan 26, 2016 · 23 comments
Open

versafix-1: Outlook 2016 Rendering Lines #10

halszkaraptor opened this issue Jan 26, 2016 · 23 comments
Assignees
Labels

Comments

@halszkaraptor
Copy link

@halszkaraptor halszkaraptor commented Jan 26, 2016

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
Copy link
Member

@bago 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 Outlook 2016 Rendering Lines versafix-1: Outlook 2016 Rendering Lines Jan 26, 2016
@bago bago self-assigned this Jan 26, 2016
@tayvano
Copy link

@tayvano 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
Copy link
Member

@bago 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
Copy link

@tayvano 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
Copy link
Member

@bago 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
Copy link

@tayvano 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
Copy link

@scholtes scholtes commented 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
@CodingPeak
Copy link

@CodingPeak 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
Copy link
Member

@bago 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
Copy link

@tayvano 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
Copy link
Member

@bago 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
Copy link

@voodoo6 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
Copy link
Member

@bago 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
Copy link

@voodoo6 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
Copy link

@tayvano 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
Copy link

@rob24g 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
Copy link

@pcbliss 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
Copy link

@ericbunch ericbunch commented 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/

@bago
Copy link
Member

@bago 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
Copy link

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

@27lm33
Copy link

@27lm33 27lm33 commented Mar 8, 2019

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
Copy link
Member

@bago bago commented Mar 8, 2019

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.

@bago bago transferred this issue from voidlabs/mosaico Mar 8, 2019
@27lm33
Copy link

@27lm33 27lm33 commented Mar 8, 2019

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

@bago bago added the outlook label Mar 8, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
You can’t perform that action at this time.