Outlook versions of email creates a line through image

[Knelson]

Hi there, 

We are trying to send out an email and it looks like theres a line being created in the outlook versions of this email. here is a screenshot: 

How can I fix this?

[ryanfirstorion]

So, yeah, very familiar with this issue. Outlook and specifically the Outlook app on Windows does not render CSS properly. 

What we have done and found that works is to use images for buttons and use images whenever we can, along with text in it's own fields. 

Also, please note that button margins/radii aren't rendered properly either and we have dealt with the same issue. 

Check out this article: https://www.litmus.com/blog/a-guide-to-rendering-differences-in-microsoft-outlook-clients/#:~:text=O....

Don't hesitate to reach out if I can help in any way. We learned from experience and by having the same issues!

- Ryan

[ryanfirstorion]

Also - are you using an email builder such as Stripo or Mailchimp?

[Dave_Roberts]

I'd be careful about using images in emails just to support un-supported design choices.

Things like buttons that are images not only require a new image for each button, but they also hide the text "CLICK HERE" from a screen reader and make the email less accessible for folks who rely on things like screen readers to read an email. It also makes it more difficult to make minor updates to buttons b/c you've got to create a new image, load it into Marketo and then replace it in the email rather than just updating the color of the background, or the color or value of the text atop the button. 

Superficially using images for "not image things" might solve the problem, but I wouldn't recommend it as a solution to the issues w/ Outlook -- I'd look more to the designs being out of line for email in general. There may be limitations like rounded borders and overlapping images to consider when designing for email and choosing how your brand is represented in that format. Too often this is something that could be ironed out at the design table and ends up being a development / error issue b/c of the nature of the designs. 

[SanfordWhiteman]

Hi,

Please include the relevant parts of your HTML so we can troubleshoot. Use the “Insert/Edit Code Sample” feature as illustrated below.

[Jo_Pitts1]

@Knelson ,

If you have a border around the images/elements you need to be very careful as Outlook has a bad habit of rendering them!

Show us some code, and we can probably sort it out pretty quickly.

Cheers

Jo

[Dave_Roberts]

You might also consider the value of the "overlapping" aesthetic here -- it might not be the best design choice for the modern email (Outlook) environment, albeit visually satisfying. You might ask if having this appear broken in some places and seamless in others is really worth it to have the headline overlap an image or if you could go back to the drawing board w/ design and just simplify this down.

If you find that your click-thru rates (or whatever metric(s) are important to you for email) go down in an A/B test with-and-without the overlapping feature then I'd say it might be worth the fancy design piece. I've been working on emails for a few years and have yet to see something data-driven to suggest that this is a good design choice in the first place -- but don't get me wrong, I like the way it looks too.

It looks like the root issue here is that the background image goes edge-to-edge and thus had to sit "behind" the headline piece. If you were to just move the image up a bit so there wasn't an overlap there you also wouldn't see the piece of the background showing thru the gap there and instead should see the white background come thru so it's more seamless. 

[Katja_Keesom]

Totally agree with keeping it simple. In my experience, a lot of what is technically possible will cause issues with one email client or another, with Outlook being notorious for making quite distinct interpretations.