Community Forum

Over the years we have built up a community of email marketers, coders and designers that live and breathe email.

Use the Email on Acid Forum like your virtual water cooler: Stop by to discuss email code, quirky clients and fixes and post your issues (with an example of the code) for our community to offer its assistance.

 
   
Weird grey lines in Outlook 2016 only

SquareBalloonEoin

Avatar
Newbie
Total Posts:  22
Posted: 12 April 2016 03:59 AM

This article explains things quite well and he’s done a lot more testing than I have.  https://mosaico.io/email-client-tricks/outlook-2016-weird-1px-horizontal-lines/  But he hasn’t found a solution (loser).

It’s basically the body colour of the email showing through.  Any ideas how to resolve it?

Image Attachments
Outlook_2016_backgound_body_colour_showing_through.png

 

Alex Ilhan

Avatar
Administrator
Total Posts:  226
Posted: 12 April 2016 06:39 AM
[ # 1 ]

Hey SquareBalloonEoin,

I’ve read that article and was also disappointed to see he didn’t actually find a solution!

I’ve been working on this bug too recently and haven’t had any lucky yet - have you had any findings? Would live your thoughts!

Cheers
Alex


 

jadampalmer

Newbie
Total Posts:  3
Posted: 12 April 2016 10:33 AM
[ # 2 ]

I’m having the same issue, and I’ve done everything from rebuild the entire email to removing elements and styles one pain staking piece at a time. I’ve been able to make the line go away, as randomly as it appears, but then a day later the exact same code renders that stupid line again. Wish I had a solid fix to share! I have noticed that if I go into my Outlook 2016 inbox (yes, I am a lucky MSO user…) and open the email several times, sometimes the line appears and sometimes it does not. Litmus has never rendered the line in a preview, but EOA does render the same issue in tests as I am seeing live. Hanging around till I find a solution.


 

SquareBalloonEoin

Avatar
Newbie
Total Posts:  22
Posted: 12 April 2016 11:37 AM
[ # 3 ]
jadampalmer - 12 April 2016 10:33 AM

I’m having the same issue, and I’ve done everything from rebuild the entire email to removing elements and styles one pain staking piece at a time. I’ve been able to make the line go away, as randomly as it appears, but then a day later the exact same code renders that stupid line again. Wish I had a solid fix to share! I have noticed that if I go into my Outlook 2016 inbox (yes, I am a lucky MSO user…) and open the email several times, sometimes the line appears and sometimes it does not. Litmus has never rendered the line in a preview, but EOA does render the same issue in tests as I am seeing live. Hanging around till I find a solution.

Mine appears consistently (every time).  I wish I knew why too, perhaps I’ll start to delete elements, that’s a good idea.  Do either of you want to share your designs so I can see if there are any similarities?  In my design the issue occurs immediately after an Email on Acid bulletproof button.  https://www.emailonacid.com/blog/article/email-development/simple-code-based-bulletproof-button

Those are also the only tables in my work that has align=“left” so I was wondering if that could somehow cause it.  It is basically the background colour showing through.  And that is unusual, however, thinking about it, perhaps something else is being set by the background colour.  Now, I know you may think that’s not possible, but what about if somehow it is setting :root or something, as per this article https://blog.gospodarets.com/css_properties_in_depth


 

jadampalmer

Newbie
Total Posts:  3
Posted: 12 April 2016 11:48 AM
[ # 4 ]

My next hack is to try to isolate the line and wrap it, and then force the bg color of the line to match my design. At least that way, it’s hidden. I’ve attached the latest iteration of my code. I haven’t even gotten to looking into fixes for OWA killing my buttons and images.

File Attachments
ADAM_Welcome to ReferLive 2016.txt  (File Size: 9KB - Downloads: 357)

 

SquareBalloonEoin

Avatar
Newbie
Total Posts:  22
Posted: 13 April 2016 05:34 AM
[ # 5 ]

I tried that and it didn’t work for me but I may not have conquered it.  So far as I can tell this is definitely related to the EOA buttons.  I’m going to switch them out of my designs and see if that changes things.


 

SquareBalloonEoin

Avatar
Newbie
Total Posts:  22
Posted: 13 April 2016 06:52 AM
[ # 6 ]
jadampalmer - 12 April 2016 11:48 AM

My next hack is to try to isolate the line and wrap it, and then force the bg color of the line to match my design. At least that way, it’s hidden. I’ve attached the latest iteration of my code. I haven’t even gotten to looking into fixes for OWA killing my buttons and images.

Just so you know margin won’t work on all tags, but if you are going to use it you should capitalise the M so it would be Margin: 10px 10px 10px 10px;.  Even so, I would personally write Margin-top: 10px.  This is because Outlook will mess up with a lower case m. 

You could try removing the alignment on your design.  This can be achieved as per this https://github.com/tutsplus/creating-a-future-proof-responsive-email-without-media-queries

You’re using different buttons from me (Campaign Monitor I think).  I’m going to create a button without the align property if I can.


 

jadampalmer

Newbie
Total Posts:  3
Posted: 13 April 2016 10:16 AM
[ # 7 ]

Try buttons.cm, it’s the button tool that campaign monitor put together. Works pretty well in most instances. Also, unfortunately, this email was built by our dev team who does not specialize in email. I came in after the fact, and I’m just trying to fix everything. At this point, I’m just rebuilding it on my own.


 

lbeltramelli

Newbie
Total Posts:  1
Posted: 09 November 2017 09:43 AM
[ # 8 ]

try
td {
  mso-line-height-rule: exactly;}

in the css.