email rendering issue for mac outlook app

jtanusri · ‎02-13-2023

I am currently facing an issue with an email template design for all mac recipients who are receiving emails in their outlook app.

Issue Statement: The email template has modules with 2 columns. One for image and the other for copy(text). For all PC users and mac users (outlook browser – mail.outlook.com), the email design looks good.

Whereas for mac users with outlook app, here are the 2 issues we are seeing:

The images are showing on the left instead of right (which is how it should display)

The text copy are all left aligned (text wrapped below the image) and are showing at below the image for each module.

Here is a screenshot:

These 2 issues are being displayed only for modules which have image. And not for the modules with only text.

Here are some of the remediation steps we took to resolve:

We took the OOTB Template Picker, “Newsletter” > “Flatiron” and tested in mac outlook app, it shows the same issue for mac recipients. The template width size is 600.
Based on the Marketo Nation Community , we also updated the width to 750 (The Template Pickers have width=600) and added the following partition size for the columns:

750 - 10px - 20px = 720px / 2 = 360px per column

Here is a screenshot of how it displays correctly for all recipients who are using PC as well viewing the email from their browser (outlook.mail.com).

The image is on the right and the copy is on the left.

Can someone assist me or connect me to a contact who can provide with a resolution for a mac user. Is this a bug? Or is there a separate code that we need to include for the mac recipients?

Tanusri Jammalamadaka

Dave_Roberts · ‎05-04-2023

 <table class="table1-2" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0; border-collapse: collapse;" align="left" border="0" cellpadding="0" cellspacing="0" width="240" style="float:left;">

Hey Helen,

Thanks for posting the updated code here for reference. It looks like you've got two style tags on this table and that might be why it's looking strange in Dreamweaver. For what it's worth, I always try to make sure that the "style" attribute is the last one in the list b/c it's really easy to overlook something like this (I've done it a bunch before myself and thus the habit).

I see that you also added the ".float-left" class to your stylesheet. You can add that to this table by using the class inside the class="" attribute -- as it, it's not doing anything for you. Here's a look at some updated code to try out:

 <table class="table1-2 float-left" align="left" border="0" cellpadding="0" cellspacing="0" width="240" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0; border-collapse: collapse; float:left;" >

You'll also probably want to add the "float:right;" style on the table that follows this one (the right column) b/c it's got the align="right" attribute there as well. Here's an example of what that code might look like:

<table class="table1-2 float-right"  align="right" border="0" cellpadding="0" cellspacing="0" width="240" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0; border-collapse: collapse; float:right;">

^^ Notice that I also added the "float-right" class to this one to make it similar to the one above with the "float-left" class. You'll want to add some CSS to your stylesheet to build out some rules for this new class as well:

.float-left {float: left;}
.float-right {float: right};

^^ This is doing the same thing as the inline style but as a class. It's redundant with the inline style so you probably don't need both and I generally trust the inline style over the classes in email b/c they're more universal.

Let me know if this helps to solve the issue for you? I don't have access to testing software to run this thru an Outlook test, so sorry for the "shot in the dark" approach here if this doesn't work and thanks for testing it on your end to confirm the results!

-Dave

View solution in original post