Marketo Template Rendering Problem In Outlook Desktop | Community
Skip to main content
May 9, 2018
Question

Marketo Template Rendering Problem In Outlook Desktop

  • May 9, 2018
  • 5 replies
  • 6348 views

I am using the Marketo templates and modules to create an email that is going to an internal audience with 95+% using Outlook 2016 desktop with Windows 10. This is what happens.

So I moved that right side column to the bottom of the email - removed all but two CTA image buttons - and get this

The email renders 100% correct in every other client - including Outlook mobile, Outlook 365, and Outlook on a Mac.

I have run my code through Email On Acid and there is nothing wrong, but obviously there is.

Any ideas???

Message was edited by: Ed Selby

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

5 replies

Grégoire_Miche2
Level 10
May 10, 2018

Hi Ed,

Impossible to tell you without looking at the code.

-Greg

Akshay_Pant
Level 4
May 10, 2018

Hi Ed Selby

Could you please share the code of the email?

Thanks in advance

Akshay

May 10, 2018
Content backfill required
Jay_Jiang
Level 10
May 11, 2018

MS Outlook is notorious for being difficult with email styling.

I think you need to set heights for those <td> if outlook is collapsing them. Of course that'd require you to edit your template...

EDIT: after rendering your template and taking a look, try adding the 2 images in the rich text area instead of using another module.

Try something like:

<table cellpadding="0" cellspacing="0" border="0" width="100%" style="padding-bottom:20px">

<tr>

<td width="50%" align="left" style="padding:20px 20px 0" class="block">

<img src="link 1" />

</td>

<td width="50%" align="right" style="padding:20px 20px 0" class="block">

<img src="link 2" />

</td>

</tr>

</table>

Jay

Dave_Roberts
Level 10
May 11, 2018

Hey Ed-

I've seen this happen before specifically with Outlook when it's reading a line-height rule on an image. I scanned your code real quick, but it wasn't obvious to me what might be causing that.

It looks like the images are consistently "1 line" high, so that makes me think it's something in the CSS in the head that might be causing this (maybe a 'fix' for "old Outlook" that's conflicting w/ 2016)?

You might try making the <td> an editable area and dropping the <div> container for the images

<td class="mktoImg" ...><img src="..."/></td>

or even try using an editable text area instead of the image (I've gotten a mixed bag of results from the .mktoImg container)

<td class="mktoText" ><img src="..."/></td>

Im thinking this approach would work around any styles that targeted your <div> container and set a line-height or height for all divs, for example.

To troubleshoot, I'd probably clone one of the problem modules and rename stuff, then remove the div from that module and test it w/ the <td> as an editable area to see if there was any difference without getting into the weeds too deep.

-Dave