HTML Email Display in Outlook

Pete_Jones · ‎02-05-2019

I've recently built a new email template in Marketo using HTML code I built outside of the program. Upon testing of the email in two nontraditional Outlook displays, a Browser version and a version in my Macbook pro, the email signature line is pushed up into the newsletter. That same email was tested in Gmail and an Outlook version on a Windows machine and no issues were found. Has anyone had this happen before? Below is a screenshot. The code of the email does not provide any obvious cues to explain this.

Chris_Wilcox · ‎02-05-2019

Are you using divs? They can cause problems in some outlook rendering scenarios in my experience. We try to code everything into fairly rigid tables to minimize the "outlook effect" of making emails ugly.

Pete_Jones · ‎02-05-2019

Yes! I've used div id's to separate the elements so they can be editable in the template. This was done on previous templates in our Marketo instance. Is there a better way? Ideally, I'd like to have the template be editable by others on our team within the email edit function.

Dave_Roberts · ‎02-05-2019

You should be able to add the editable syntax to a <td>, <table> or any other element in your email. I usually use a tabled approach for the structure of the email and then nest a div inside of a <td> that acts as the editable area, but I've also done it with editable <td>s and haven't really noticed much difference in Outlook or otherwise using either method.

Eric_Stone1 · ‎02-05-2019

The code of the email does not provide any obvious cues to explain this.

Is there any way to provide this? Many of us here would be happy to have a look.

Pete_Jones · ‎02-05-2019

Sure. This is just a mock up that I've created as a Template in the system:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>GuideOne Agent Newsletter</title>

<!--

Below is a weird hack that allows the links to not be underlined in Outlook. Have to set placeholder values in

header and override them with inline CSS. Tried many different things and this is the only one that worked.

-->

A {

FONT-WEIGHT: normal; COLOR: #FCB538;

}

A:link {

FONT-WEIGHT: normal; COLOR: #FCB538;

}

</style>

</head>

<body>

<!--

Weekly Digest Newsletter:

Since email clients such as Outlook can't render HTML 5 and modern CSS standards, this page uses a tabular structure

with limited inline CSS. IMPORTANT NOTE: be sure that any images are linked through a hosting service with complete URL

and not on the computer the email is being sent from.

-->

<tr>

<tr>

<tr>

</div>

</td>

</tr>

</table>

</td>

</tr>

<tr>

<!--

Start content item

Adding a new content section is done by copying the following table row and updating it with

the desired content, changing the two nested table ID's to content1, content2, etc and to

innerContent1, innerContent2, etc respectively. Then, updating the Content header and body

and the button link and text.

-->

<tr>

<tr>

<tr>

</div>

</td>

<p style="COLOR: #00B4D6; FONT-WEIGHT: bold; FONT-SIZE: 20px; MARGIN: 0 0 0 0;">Marketing Spotlight</p>

</div>

<div id="content-body1" class="content mktEditable"> <p style="COLOR: #545759; FONT-SIZE: 16px; MARGIN: 0 0 0 0;">2019 GuideOne calendars have arrived in the GuideOne Store!</p>

</div>

<tr>

<tr>

<a style="TEXT-DECORATION: none; FONT-SIZE: 14px; FONT-FAMILY: Arial; FONT-WEIGHT: bold; COLOR: #FFFFFF;" href="https://guideone.com">Check It Out</a>

</div>

</td>

</tr>

</table>

</td>

</tr>

</table>

</td>

</tr>

</table>

</td>

</tr>

<tr>

</td>

</tr>

</table>

</td>

</tr>

<tr>

<tr>

<tr>

</div> </td>

<p style="COLOR: #00B4D6; FONT-WEIGHT: bold; FONT-SIZE: 20px; MARGIN: 0 0 0 0;">What's Happening in Your State</p>

</div>

<p style="COLOR: #545759; FONT-SIZE: 16px; MARGIN: 0 0 0 0;">Following the landfall of Hurricane Florence, the North Carolina Department of Insurance has Issued Bulleting 18-B-12.</p>

</div> <table border="0" cellpadding="0" cellspacing="0" style="TABLE-LAYOUT: fixed; WIDTH: 110px; HEIGHT: 45px; PADDING-TOP: 15px;">

<tr>

<tr>

</div> </td>

</tr>

</table>

</td>

</tr>

</table>

</td>

</tr>

</table>

</td>

</tr>

</table>

</td>

</tr>

</table>

</td>

</tr>

<tr>

<tr>

</td>

</tr>

<tr>

1111 Ashworth Rd / West Des Moines, IA 50265 / 1.888.218.8561 / <a href="https://www.guideone.com" style="TEXT-DECORATION:none; FONT-WEIGHT: bold; COLOR: #00B4D6;">GuideOne.com</a> /

</td>

</tr>

<tr>

</td>

</tr>

<tr>

<div class="mktoText" mktoName="Update Email Preferences" id="preferences">Update your <a href="http://go.guideone.com/OP-Email-Change-Form_Email-Change-Form-Confirmation-v3.html" target="_blank">email preferences</a> | <a href="{{system.unsubscribeLink}}" target="_blank">Unsubscribe</a> from all future emails</div>

</td>

</tr>

</table>

</td>

</tr>

</table>

</td>

</tr>

</table>

</body>

</html>

Dave_Roberts · ‎02-06-2019

Hey Pete,

I had a look thru the HTML -- copied it into a new template in Marketo and scrolled thru. I didn't see anything obvious that would flip the order of the sections you've got built here. The one thing that does stand out is all the capitalized CSS. Im not sure what (if any) impact this could be having on your render, but from the sounds of it there is something that Outlook (some versions) are interpreting differently than others and that usually has something to do with "specialized code" (like all caps). A few years back I remember a hack for Outlook that involved capitalizing the "M" in margin to solve a bug with Outlook spacing display, maybe this is something similar. In the case of the capital Margin, I choose to use padding or "height" instead and moved on from that mess by using another method to create the space that was more "friendly" to Outlook. Another thing to think about here is that Outlook is all over the place in terms of the different engines they use to render the HTML and I've even seen situations where "Outlook code" (VML) works for one variation but not others -- a hot mess all the way around. I might try and create a new version of the template sans-capitalization and send that off for a test to Outlook, maybe you can kinda narrow in on what (if any of it) might be causing this display issue. I'll usually walk it all the way back to "no-caps" for something like this and then test-as-I-go adding a little at a time until it breaks or I get to the finish line.

While looking thru the code, I read a comment in there about creating a new row and renaming the elements inside. Im curious if this might have something to do with it. I've seen some strange behavior in email assets before when changing the IDs of editable areas on a template-level for an editable area that already "exists" in the email (i.e. the module is on the canvas and you change the IDs on the template, then re-open the email). I've usually solved something like this by creating a new email once the template is in a finalized state and testing from there. If this is a test email you've been working with thru changes to the template, maybe try and spin up a new one using the approved template and see if that makes a difference?

HTML Email Display in Outlook

HTML Email Display in Outlook

Re: HTML Email Display in Outlook

Re: HTML Email Display in Outlook

Re: HTML Email Display in Outlook

Re: HTML Email Display in Outlook

Re: HTML Email Display in Outlook

Re: HTML Email Display in Outlook