Outlook versions of email creates a line through image

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. 

@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

Hi,

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

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=Outlook%20does%20not%20support%20CSS,that'll%20break%20your%20emails.

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

- Ryan