Re: Marketo Template Rendering Problem In Outlook Desktop

Anonymous · ‎05-09-2018

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

Grégoire_Miche2 · ‎05-10-2018

Hi Ed,

Impossible to tell you without looking at the code.

-Greg

Akshay_Pant · ‎05-10-2018

Hi Ed Selby

Could you please share the code of the email?

Thanks in advance

Akshay

Anonymous · ‎05-10-2018

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<!--[if gte mso 9]>

<xml>

<o:OfficeDocumentSettings>

<o:AllowPNG/>

<o:PixelsPerInch>96</o:PixelsPerInch>

</o:OfficeDocumentSettings>

</xml>

<![endif]-->

<!--[if mso]>

.primary-font {

font-family: Arial, sans-serif !important;

}

</style>

<![endif]-->

<!--[if mso]>

.secondary-font {

font-family: Arial, sans-serif !important;

}

</style>

<![endif]-->

<!--[if gte mso 9]>

#hero .table3-3{

width: 100% !important;

}

</style>

<![endif]-->

<style>

/*startcommon*/

@media only screen and (max-width: 803px) {

.m_hero .background {

background-size: cover !important;

}

/*endcommon*/

</style>

<!--[if mso]>

<style>

.outlookbutton {

padding-left:60px !important

}

</style>

<![endif]-->

/* CLIENT-SPECIFIC STYLES */

#outlook a {

padding: 0;

}

/* Force Outlook to provide a "view in browser" message */

.ReadMsgBody {

width: 100%;

}

.ExternalClass {

width: 100%;

}

/* Force Hotmail to display emails at full width */

.ExternalClass,

.ExternalClass p,

.ExternalClass span,

.ExternalClass font,

.ExternalClass td,

.ExternalClass div {

line-height: 100%;

}

/* Force Hotmail to display normal line spacing */

/* iOS BLUE LINKS */

@-ms-viewport {

width: device-width;

}

</style>

html { -webkit-text-size-adjust:none; }

p {margin: 0 0 10px !important;padding: 0;}

body{font-family:Lato, Calibri, sans-serif;}

a[x-apple-data-detectors] {

color: inherit !important;

text-decoration: none !important;

font-size: inherit !important;

font-family: inherit !important;

font-weight: inherit !important;

line-height: inherit !important;

}

a{outline: none !important; text-decoration:none !important;}

@media only screen and (max-width: 640px){

.em_main_table {

width: 100% !important;

}

.em_spc_20 {

height: 20px !important;

}

.em_hide {

display: none !important;

}

.m_hero .background {

background-size: cover !important;

}

table[class="table600"] {

width: 450px !important;

}

*[class].main {width:100% !important;min-width:100% !important;}

*[class].inner_table{width:90% !important;min-width:90% !important;}

*[class].block{width:100% !important;margin:0 auto !important;padding:0 !important;display:block;}

*[class].center_align{text-align:center !important;margin:0 auto;}

*[class].left_align{text-align:left !important;}

*[class].padding_bottom{padding-bottom:20px !important;}

*[class].padding_top{padding-top:20px !important;}

*[class].image-width img{width:100% !important;height:auto !Important;}

*[class].line-height{line-height:36px !important;}

*[class].button_width{width:100% !important;}

*[class].Video img{max-width:100% !important;height:auto !Important;}

*[class].margin-top{margin-top:20px !important;}

*[class].float{float:none !important;margin-top:14px !Important;display:inline-block;}

*[class].button_width{width:100% !Important;}

}

@media only screen and (max-width: 479px){

.m_hero .background {

background-size: cover !important;

}

.em_spc_20 {

height: 20px !important;

}

.em_hide {

display: none !important;

}

.em_main_table {

width: 100% !important;

}

table[class="table600"] {

width: 290px !important;

}

*[class].main {width:100% !important;min-width:100% !important;}

*[class].inner_table{width:90% !important;min-width:90% !important;}

*[class].block{width:100% !important;margin:0 auto !important;padding:0 !important;display:block;}

*[class].center_align{text-align:center !important;margin:0 auto;}

*[class].left_align{text-align:left !important;}

*[class].padding_top{padding-top:20px !important;}

*[class].padding_bottom{padding-bottom:20px !important;}

*[class].image-width img{width:100% !important;height:auto !Important;}

*[class].img-width img{width:100% !important;height:auto !Important;}

*[class].line-height{line-height:36px !important;}

*[class].button_width{width:100% !important;}

*[class].Video img{max-width:100% !important;height:auto !Important;}

*[class].margin-top{margin-top:20px !important;}

*[class].float{float:none !important;margin-top:14px !Important;display:inline-block;}

*[class].button_width{width:100% !Important;}

}

</style>

</head>

<tbody>

<tr>

<tbody>

<tr>

<tbody>

<tr>

</tr>

<tr>

</div> </td>

</tr>

<tr>

</tr>

</tbody>

</table> </td>

</tr>

</tbody>

</table>

<tbody>

<tr>

<tbody>

<tr>

<tbody>

<tr>

</tr>

<tr>

</div> </td>

</tr>

<tr>

</tr>

</tbody>

</table> </td>

</tr>

</tbody>

</table>

<tbody>

<tr>

<tbody>

<tr>

</tr>

<tr>

<p style="text-align: left;">Have you heard of FOMO? It stands for Fear Of Missing Out. If you suffer from FOMO, then you’ll definitely want to sign up today for the brand-new XSource Mobile application - exclusively for Ciox Health associates. </p>

<p style="text-align: left;">The mobile app is designed to provide you with an easily accessible, on-the-go way to receive timely company news and information, from wherever you happen to be. From Ciox announcements, industry news and communications from our leaders to new sales collateral, information on events, updates from HR and breaking news on successes, the app is designed to be your source for the latest information.<br /></p>

<p style="text-align: left;">It’s all part of your leadership team’s commitment to communicate with you more frequently. Going forward, XSource Mobile will be our primary distribution channel to send you important updates, so be sure to log on today so you don’t miss out!<span> </span><br /></p>

<p style="text-align: left;"><strong>The set-up is simple:</strong></p>

<li>On your cell phone/mobile device, just go to either the online<span> </span><a href="https://itunes.apple.com/us/app/xsource-mobile/id1364701966?mt=8&ign-mpt=uo%3D4" target="_blank" id="">Apple app store</a><span> </span>or<span> </span><a href="https://play.google.com/store/apps/details?id=com.socialchorus.iih.android.googleplay" target="_blank" id="">Google Play store</a><span> </span>and search for XSource Mobile, then download it as you would any other app.</li>

<li>The platform is integrated with<span> </span><strong>Okta</strong>, so you will be prompted to enter your email address/ID and Okta password.</li>

<li>When prompted to choose whether to receive push notifications, please select<span> </span><strong>YES</strong>. That will ensure you receive personalized push notifications flagging new content. Once in the app, please click on the person icon in the lower right hand corner and click<span> </span><strong>Edit Profile</strong><span> </span>to ensure that your first and last names are filled in and correct.</li>

<li>As you see a piece of content that interests you, click to<span> </span><strong>FOLLOW</strong><span> </span>the channel. That will ensure that you receive updates as new items are posted. When you log on, you will see all the posts in your newsfeed. If you want to only view content in a particular channel, click on the second icon at the bottom of your screen and select the channel.</li>

<li>Finally, some of the content on the app will be marked as suitable to share publicly. At the bottom of those posts, you’ll see an icon that allows you to<span> </span><strong>SHARE</strong>. We’d encourage you to click on it to share the post via your own LinkedIn, Twitter or other social media sites.</li>

</ul>

<p style="text-align: left;">While the app is designed for mobile viewing via smartphones, you also can view it from your desktop. The XSource Mobile icon will appear on your Okta screen, alongside Academy, Ultipro and other internal applications. This desktop version of the application is an option if you don’t have a smartphone.<br /></p>

<p style="text-align: left;">Of course, this is just the beginning. The content will be updated daily and, in the coming weeks and months, new channels will be added. In the meantime, if you have technical questions, please direct them to<span> </span><a href="mailto:support@socialchorus.com">support@socialchorus.com</a><span> </span>or call the support hotline 24/7 at 1-888-674-1158 and let them know you work for Ciox. For questions about content posted to the app or suggestions for future posts, reach out to<span> </span><a href="mailto:joey.nord@cioxhealth.com">joey.nord@cioxhealth.com</a>.</p>

<p style="text-align: left;">So what are you waiting for? Sign up for XSource Mobile now so you don’t miss a thing!</p>

</div> </td>

</tr>

<tr>

</tr>

</tbody>

</table> </td>

</tr>

</tbody>

</table>

<tbody>

<tr>

<tbody>

<tr>

</tr>

<tr>

<tbody>

<tr>

<td>

<tbody>

<tr>

</div> </td>

</tr>

</tbody>

</table> </td>

</tr>

<tr>

<td>

<tbody>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

<tbody>

<tr>

<td style="background-color: ${Products2Col-LButton-Color}; border:1px solid ${Products2Col-LButton-Border};border-radius:${Products2Col-LButton-Radius};font-family:${TextFontFamily}; font-size: 16px; mso-line-height-rule: exactly; line-height:22px ; text-align: center; vertical-align: middle; color: ${Products2Col-LButton-Text-Color}; display: block; padding:9px 40px 8px;" valign="middle"> <a style="text-decoration: none; color: ${Products2Col-LButton-Text-Color} !important;outline: none;" href="${Products2Col-LButton-Link}"> <span style="color:${Products2Col-LButton-Text-Color};">${Products2Col-LButton-Text}</span> </a> </td>

</tr>

</tbody>

</table>

</div> </td>

</tr>

<tr>

</tr>

</tbody>

</table> </td>

</tr>

</tbody>

</table> </td>

<tbody>

<tr>

<td>

<tbody>

<tr>

</div> </td>

</tr>

</tbody>

</table> </td>

</tr>

<tr>

<td>

<tbody>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

<tbody>

<tr>

<td style="background-color: ${Products2Col-RButton-Color}; border:1px solid ${Products2Col-RButton-Border};border-radius:${Products2Col-RButton-Radius};font-family:${TextFontFamily}; font-size: 16px; mso-line-height-rule: exactly; line-height:22px ; text-align: center; vertical-align: middle; color: ${Products2Col-RButton-Text-Color}; display: block; padding:9px 40px 9px;" valign="middle"> <a style="text-decoration: none; color: ${Products2Col-RButton-Text-Color} !important;outline: none;" href="${Products2Col-RButton-Link}"> <span style="color:${Products2Col-RButton-Text-Color};">${Products2Col-RButton-Text}</span> </a> </td>

</tr>

</tbody>

</table>

</div> </td>

</tr>

<tr>

</tr>

</tbody>

</table> </td>

</tr>

</tbody>

</table> </td>

</tr>

<tr>

</tr>

</tbody>

</table> </td>

</tr>

</tbody>

</table></td>

</tr>

</tbody>

</table> </td>

</tr>

</tbody>

</table>

<tbody>

<tr>

<tbody>

<tr>

</tr>

<tr>

</tr>

<tr>

<p>Ciox Health | 925 North Point Parkway, Suite 350 | Alpharetta, GA 30005<br /></p>

</div> </td>

</tr>

<tr>

<div>

<a href="https://www.cioxhealth.com/contact-us" target="_blank">Contact </a>

<a style="text-decration: none; color: ${footer-linkcolor};" href="https://www.cioxhealth.com/privacy-policy" target="_blank">Privacy Policy</a>

</div>

</div> </td>

</tr>

<tr>

</tr>

</tbody>

</table> </td>

</tr>

</tbody>

</table>

</body>

</html>

Jay_Jiang · ‎05-10-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 · ‎05-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)

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