I'm working on an email that has several dividers. The character in the table cell gets deleted when edited through the wysiwyg editor. I tried using the &zwj character to solve that issue and it works on most email clients but outlook 2016 is showing a line above the divider.
Screenshot
Is there a better solution than this?
<tr>
<td bgcolor="#222222" style="font-size: 1px; line-height:16px; color:#222222">‍</td>
</tr>
Outlook 2016 has a problem with adding those lines in. Other developers have reported that the issue is down to Outlook 2016 converting white space.
You could try targeting Outlook and collapsing the borders. Just add this:
<!--[if (gte mso 9)|(IE)]>
<style type="text/css">
table {
border-collapse: collapse;
border-spacing: 0; }
</style>
<![endif]-->
It’s worth noting that depending on how you structured your email this may not be the right fix for you. It works on some emails, but can have an adverse effect on the overall rendering of the design.
You can also try matching the background. It's more of a cover up than a fix. Lines inherit the color from the <body> tag. So, by setting the background color of the <body> to the same color as our problem section, we essentially cover up the lines. They’re still there, yes, but no one will see them. We also want to only target the problem clients. There’s no need to change the background color of clients that render the email correctly.
Simply add this to the <head> of your email with the background color changed to match the problem section.
<!--[if (gte mso 9)|(IE)]>
<style type="text/css">
body { background-color:#123456 !important;}
</style>
<![endif]-->
More info about lines in Outlook here: https://www.emailonacid.com/blog/article/email-development/how-do-i-get-rid-of-the-lines-in-outlook-emails/
Cannot replicate this at all. Any chance of a view of your complete template code? There could be a wider underlying issue with your HTML.
Alternatively, change your ‍ declaration to ‌
That is the correct HTML version of a zero space character.
zwj also doesn't display correctly in Litmus when I test your snippet in one of my templates.
Have you tried using border instead of background to set the color?
<tr>
<td style="font-size: 1px; line-height:0; border-bottom: 1px solid #222222;">‌</td>
</tr>
If found that even when ESP's don't mess with ‌ and characters, Outlook can sometimes interpret height and line-height oddly. If if we're using mso-line-height-rule: exactly;.
I use border in my own work and haven't found an issue yet.
