CTA button alignment issue in Outlook for Windows/Mac

[Alle_JB]

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> 

Preview of template in MarketoPreview of Template in Outlook

[Dave_Roberts]

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

[joshhughes]

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]

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

[Dave_Roberts]

You're spot on Sanford. 

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