email rendering issue for mac outlook app | Community
Skip to main content
T
tanusrij
Level 2
February 14, 2023
Solved

email rendering issue for mac outlook app

  • February 14, 2023
  • 3 replies
  • 9618 views

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:

 

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

 

  1. 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:

  1. 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.
  2. 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?

    This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
    Best answer by Dave_Roberts
    <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

    3 replies

    Disha_Goyal6
    Community Advisor
    Disha_Goyal6Community Advisor
    Community Advisor
    February 14, 2023

    Hi @tanusrij,

    Please share the HTML of email template. After that, I can help you on the same.

     

    Thanks,

    Disha

    Jill_Harrison1
    Jill_Harrison1
    Level 2
    February 15, 2023

    I am having the exact same issue with my responsive code.

     

    I filed a ticket with Marketo, and they did some testing and told me what I already know, there is a rendering issue with Mac and office 365. I have been using the same code for years with perfect rendering.

     

    Marketo told me to go back to my developer and have them update the code.

     

    I wish Marketo would have taken a quick look at my code and provided me with a solution that I could implement in the code myself to quickly remediate.

    Darshil_Shah1
    Community Advisor and Adobe Champion
    Darshil_Shah1Community Advisor and Adobe Champion
    Community Advisor and Adobe Champion
    February 15, 2023

    Marketo TSEs are not web developers and as a result, they are unable to troubleshoot most types of custom coding (ie. HTML, JavaScript, XML, etc.). People in the community could help you look into this if you post your email template code here. 

      Dave_Roberts
      Dave_Roberts
      Level 10
      April 14, 2023

      This has come up a few time recently in the Community.  It looks like something updated in Outlook and broke stuff - surprise, surprise! For anyone having this issue here's a brief issue/resolution to try:

       

      ISSUE:

      This problem seems to be caused by using the align="left" or align="right" attribute on tables to create columns in your layout. This is kind of an 'old school' way to create columns in email so especially if you've been using the same code for a long time, this update probably got you. As I understand it, Outlook on MacOS does not support using the align attribute to float the tables next to each other in columns.

       

      SOLUTION:
      Where you are using align="left" on your tables, also add an inline style to float the table left (style="float:left;").

      Where you are using align="right" on your tables, also add an inline style to float the table left (style="float:right;").

      This should help the tables to display as columns rather than rows.

       

      MY TWO CENTS:

      For the long-term it might be worth considering a new codebase for your email HTML that does not use tables-as-columns b/c it's not really the way they're natively intended to be used -- a table cell would be a more appropriate choice in terms of the semantic architecture of a table, but there's always more than one way to solve a problem with code I suppose. 

       

      EXAMPLE:

      In your code, the first table I see that is aligned left or right looks like this:

      <table width="409" border="0" cellspacing="0" cellpadding="0" align="left" class="to100pc-late">

      ^^ note: align="left"

       

      Instead, try adding an inline float to help Outlook do it's thing:

      <table width="409" border="0" cellspacing="0" cellpadding="0" align="left" class="to100pc-late" style="float:left;">

      ^^ note -- style="float:left;" added 

       

      Technically this doesn't NEED to live as inline style, it could live on a class as well - perhaps you could add it to the styles for the "to100pc-late" class in your stylesheet or even create a new class called float-left that looked something like this:

      .float-left { float: left;}

       

      K
      katp_marketing_automation
      Level 2
      April 17, 2023
      Content backfill required
      Dave_Roberts
      Dave_RobertsAccepted solution
      Level 10
      May 4, 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

      Dave_Roberts
      Dave_Roberts
      Level 10
      May 4, 2023

      @tanusrij @katp_marketing_automation there's another post in the community here:https://nation.marketo.com/t5/product-discussions/marketo-email-issues-on-outlook-for-mac/m-p/335475/highlight/false#M189632 where something similar came up and this approach seems to have solved the issue there. Let me know if you need any help implementing this into your HTML or if you were able to get this working? Thanks!

      Terms & ConditionsAccessibility statement

      Loading footer...