CTA button alignment issue in Outlook for Windows/Mac | Community
Skip to main content
A
Alle_JB
New Participant
May 7, 2024
Question

CTA button alignment issue in Outlook for Windows/Mac

  • May 7, 2024
  • 2 replies
  • 1851 views

Having an issue with CTA button alignment in the Outlook client for Windows. The alignment always gets pushed left no matter what we input in the template before sending it out. Any idea what would be causing this?

 

Below is the code for one of our CTA buttons. I have also attached 2 pictures with how it previews in Marketo vs how it shows in Outlook.

<tr class="mktoModule" id="orangeCTAModule" mktoname="Orange CTA Module" mktoaddbydefault="true" style="border-collapse:collapse !important;"> <td style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-moz-hyphens: none;hyphens: none;border-collapse: collapse;background-color:#F5F5F5;" bgcolor="#F5F5F5" valign="top"> <table 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; margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto;" align="center" border="0" cellpadding="0" cellspacing="0" width="640" class="fullWidth"> <tbody> <tr> <td style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-moz-hyphens: none;hyphens: none;border-collapse: collapse;"> <table align="center" role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="width: 100%;" bgcolor="#F5F5F5"> <tbody> <tr> <td valign="top" align="center" style="padding: 0px;"> <table width="640" cellpadding="0" cellspacing="0" border="0" role="presentation" align="center" class="fullWidth" bgcolor="#F5F5F5" style="width:640px;"> <tbody> <tr> <td valign="top" align="left" style="padding-left: 40px;padding-right: 40px; padding-top:10px; padding-bottom:10px;"> <table width="100%" cellpadding="0" cellspacing="0" border="0" role="presentation"> <tbody> <tr> <td valign="top" align="left"> <!--[if mso]> <td> <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="${CTAurl}" style="height:45px;v-text-anchor:middle;width:260px;" arcsize="15%" strokecolor="${CTABorderColor}" fillcolor="${CTABgColor}"> <w:anchorlock/> <center style="color:${CTATextColor};font-family:'Roboto', arial; font-size: 18px; line-height: 24px; font-weight: 500; text-decoration: none;; color: ${CTATextColor}; padding: 10px 35px; display: inline-block;">${CTAtext} </center> </v:roundrect> </td> <![endif]--> <!--[if !mso]><!-- --> <table cellpadding="0" cellspacing="0" border="0" role="presentation" class="fullWidth" align="${ctabuttonalign}"> <tbody> <tr> <th valign="top" class="stack-column primarytext" align="left"> <table border="0" cellspacing="0" cellpadding="0" role="none" class="fullWidth primary primarytext" style="border-collapse: separate !important;border-radius: 8px;min-width:260px;max-width:260px;" align="left"> <tbody> <tr> <td valign="top" align="center" class="primary primarytext" bgcolor="${CTABgColor}" style=" border: 1px solid ${CTABorderColor}; mso-padding-alt: 10px 35px; border-radius: 8px;"> <a target="_blank" class="primarytext" href="${CTAurl}" style="font-family:'Roboto', arial; font-size: 18px; line-height: 24px; font-weight: 500; text-decoration: none;; color: ${CTATextColor}; padding: 10px 35px; display: inline-block; "> ${CTAtext}</a> </td> </tr> </tbody> </table> </th> </tr> </tbody> </table> <!--<![endif]--> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </td> </tr>

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

2 replies

joshhughes
joshhughes
New Participant
May 28, 2024

Hi @alle_jb .  Its likely that some of your ghost tables are confusing Marketo.  We're finding with our code that we no longer need to use Outlook specific ghost tables to get correct output for all Outlook clients/screens.  You would want to build in your specific variables, but Here is what we use at MERGE for modern buttons that will hopefully help you: 

<table role="presentation" width="100%" align="center" cellpadding="0" cellspacing="0" border="0" class="mktoModule" id="BtnModule01" mktoName="Button" mktoAddByDefault="false" mktoActive="true" style="background-color:#fff; margin:0px auto; width:100%!important; min-width:100%!important;"> <tr> <td style="padding-top:0px; padding-bottom:0px; padding-left:20px; padding-right:20px;"> <table role="presentation" width="100%" align="center" cellpadding="0" cellspacing="0" border="0" style="background-color:#fff; margin:0px auto; width:100%!important; min-width:100%!important; border-radius:5px 5px 5px 5px;"> <tr> <td class="mktEditable w24" align="center" id="Btn01" mktoName="Content" style="padding:35px 60px 50px 60px;"> <table class="center" role="presentation" align="center" border="0" cellspacing="0" cellpadding="0"> <tr> <td class="outlook-font button" style="background-color:#000; border:1px solid #000; font-family:'proxima-nova',Arial,sans-serif; text-align:center; font-size:20px; line-height:20px; font-weight:normal; mso-padding-alt:12px 30px 12px 30px; color:#fff; border-radius:5px;"> <div> <a class="button" href="${BtnLink}" target="_blank" style="display:block; padding:12px 30px 12px 30px; text-decoration:none; color:#fff;"><span style="text-decoration:none; color:#fff;">CTA Text</span></a> </div> </td> </tr> </table> </td> </tr> </table> </td> </tr> </table>

 

SanfordWhiteman
SanfordWhiteman
New Participant
May 28, 2024

border-radius doesn’t work in Outlook through 2019 though?

Dave_Roberts
Dave_Roberts
New Participant
May 30, 2024

You're spot on Sanford. 

https://www.caniemail.com/features/css-border-radius/

 

 

Dave_Roberts
Dave_Roberts
New Participant
May 8, 2024

Hey @alle_jb -- I tried to code up a body and surrounding table for this in our Email on Acid test platform to run a few render tests and see if I could get the button to center on the page using the ${ctabuttonalign} variable. I think I've got something working, but I had to guess at a few of the variable values and classes (like .fullWidth) to try and interpret those in my test so this might not be 100% of the way there. 

 

Let's start by trying this code to replace your existing code for the module to see if this fixes the issue. If not, it might be helpful to get a look at the <head> of your template where all the variable values and styles are located to dial in the troubleshooting a bit more. 

 

PLEASE NOTE: Updating the code of your template will kick your email assets into draft mode. It might be easier to clone your template and apply these changes there and then create a net-new asset to test this module before applying this change to your current template. If you do go that route, please copy out and save your current code to save as a reference.

<tr class="mktoModule" id="orangeCTAModule" mktoname="Orange CTA Module" mktoaddbydefault="true" style="border-collapse:collapse !important;"> <td style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-moz-hyphens: none;hyphens: none;border-collapse: collapse;background-color:#F5F5F5;" bgcolor="#F5F5F5" valign="top"> <table 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; margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto;" align="center" border="0" cellpadding="0" cellspacing="0" width="640" class="fullWidth"> <tbody> <tr> <td style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-moz-hyphens: none;hyphens: none;border-collapse: collapse;"> <table align="center" role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="width: 100%;" bgcolor="#F5F5F5"> <tbody> <tr> <td valign="top" align="center" style="padding: 0px;"> <table width="640" cellpadding="0" cellspacing="0" border="0" role="presentation" align="center" class="fullWidth" bgcolor="#F5F5F5" style="width:640px;"> <tbody> <tr> <td valign="top" align="left" style="padding-left: 40px;padding-right: 40px; padding-top:10px; padding-bottom:10px;"> <table width="100%" cellpadding="0" cellspacing="0" border="0" role="presentation"> <tbody> <tr> <td valign="top" align="${ctabuttonalign}"> <!--[if mso]> <td align="${ctabuttonalign}"> <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="${CTAurl}" style="height:45px;v-text-anchor:middle;width:260px;" arcsize="15%" strokecolor="${CTABorderColor}" fillcolor="${CTABgColor}"> <w:anchorlock/> <center style="color:${CTATextColor};font-family:'Roboto', arial; font-size: 18px; line-height: 24px; font-weight: 500; text-decoration: none; color: ${CTATextColor}; padding: 10px 35px; display: inline-block;">${CTAtext} </center> </v:roundrect> </td> <![endif]--> <!--[if !mso]><!-- --> <table cellpadding="0" cellspacing="0" border="0" role="presentation" class="fullWidth" align="${ctabuttonalign}"> <tbody> <tr> <th valign="top" class="stack-column primarytext" align="left"> <table border="0" cellspacing="0" cellpadding="0" role="none" class="fullWidth primary primarytext" style="border-collapse: separate !important;border-radius: 8px;min-width:260px;max-width:260px;" align="${ctabuttonalign}"> <tbody> <tr> <td valign="top" align="center" class="primary primarytext" bgcolor="${CTABgColor}" style=" border: 1px solid ${CTABorderColor}; mso-padding-alt: 10px 35px; border-radius: 8px;"> <a target="_blank" class="primarytext" href="${CTAurl}" style="font-family:'Roboto', arial; font-size: 18px; line-height: 24px; font-weight: 500; text-decoration: none;; color: ${CTATextColor}; padding: 10px 35px; display: inline-block; "> ${CTAtext}</a> </td> </tr> </tbody> </table> </th> </tr> </tbody> </table> <!--<![endif]--> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </td> </tr>

 The changes in the code above include replacing some of the align="left" attributes on a few of the tables and table cells as well as adding the variable alignment to the outlook-only code. There was also an error (an extra semi-colon) in the style portion of the outlook code which didn't seem to be creating an issue but I've removed that b/c clean code is happy code 🙂

 

Let me know if this works for you and or if there's anything else I can help out with in terms of testing this out.

 

Thanks,
Dave

Terms & ConditionsAccessibility statement

Loading footer...