Re: Email Template 2.0 Button Alignment issue in Outlook

kana0_0ng · ‎06-25-2020

Hello,

I'm trying to put in a button alignment option in an email template but I'm having issues on Outlook. In my EOA tests, the button seems to align fine when I select left or center, but if I select right, it works on Outlook 2003, 2011, and 2016, but all other versions it's on the left. What am I missing here?

<head>
<meta mktomodulescope="true" class="mktoList" id="CTA-align" mktoname="CTA Align" values="left,center,right" default="left" />
</head>
<body>
<table class="mktoModule" id="banner-1" style="border-spacing: 0; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-collapse: collapse;" align="center" border="0" cellpadding="0" cellspacing="0" width="100%" mktoname="Banner"> 
                      <tbody> 
                        <tr> 
                          <td style="border-collapse:collapse;background-color:${grey-BGColor}; background-size: cover;background-repeat:no-repeat;background-position: center;" background="${SectionBgimg}" bgcolor="${grey-BGColor}"> 
                            <!--[if gte mso 9]>
						<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:636px;height:${bannerheight}px;">
						<v:fill type="frame" src="${SectionBgimg}" color="${grey-BGColor}"/>
							<v:textbox  inset="0,0,0,0">
							<![endif]--> 
                            <table width="588" cellpadding="0" cellspacing="0" style="border-spacing: 0; margin:0 auto;width:588px;" border="0" align="center" class="deviceWidth1"> 
                              <tbody> 
                                <tr> 
                                  <td class="extra-space" style="font-size: 1px;line-height: 1px;" height="${bnr-top-space}">&nbsp;</td> 
                                </tr> 
                                <tr> 
                                  <td valign="top" style="vertical-align:top;"> 
                                    <table width="100%" cellpadding="0" cellspacing="0" border="0"> 
                                      <tbody> 
                                        <tr> 
                                          <td class="block" valign="top" style="vertical-align:top;"> 
                                            <table width="" cellpadding="0" cellspacing="0" border="0"> 
                                              <tbody> 
                                                <tr> 
                                                  <td width="560" class="block" valign="top" style="vertical-align:top;text-align:left;color:#0A1F44; font-size: 40px;font-weight:bold;line-height:38px;font-family: HCo Gotham SSm,Gotham SSm A,Gotham SSm B,Gotham,Helvetica,Arial, sans-serif;"> 
                                                    <div class="mktoText" id="headline1dd1s" mktoname="Headline Text">
                                                      <div>
                                                         Headline one: 
                                                        <br /> Helvetica, 
                                                        40+/1.0x 
                                                        4 lines max 
                                                      </div>
                                                    </div> </td> 
                                                </tr> 
                                              </tbody> 
                                            </table> </td> 
                                        </tr> 
                                        <tr> 
                                          <td class="extra-space" style="font-size: 1px;line-height: 1px;" height="20">&nbsp;</td> 
                                        </tr> 
                                        <tr> 
                                          <td class="block" valign="top" style="vertical-align:top;"> 
                                            <table width="" cellpadding="0" cellspacing="0" border="0"> 
                                              <tbody> 
                                                <tr> 
                                                  <td width="560" class="block" valign="top" style="vertical-align:top;text-align:left;color:#0A1F44; font-size: 14px;font-weight:bold;line-height:17px;font-family: HCo Gotham SSm,Gotham SSm A,Gotham SSm B,Gotham,Helvetica,Arial, sans-serif;"> 
                                                    <div class="mktoText" id="paragraphtext1s" mktoname="Paragraph Text">
                                                      <div>
                                                         Ipsum dolor sit amet, 
                                                         consectetur adipisicing elit, 
                                                         sed do eiusmod tempor. <br />Ipsum dolor sit amet, 
                                                         consectetur adipisicing elit, 
                                                         sed do eiusmod tempor. <br />Ipsum dolor sit amet, 
                                                         consectetur adipisicing elit, 
                                                         sed do eiusmod tempor.
                                                      </div>
                                                    </div> </td> 
                                                </tr> 
                                                <tr> 
                                                  <td style="font-size: 1px;line-height: 1px;" height="20">&nbsp;</td> 
                                                </tr> 
                                              </tbody> 
                                            </table> </td> 
                                        </tr> 
                                        <tr> 
                                          <td valign="top" style="vertical-align:top;"> 
                                            <table align="${CTA-align}" cellpadding="0" cellspacing="0" border="0" style="margin:0 auto;"> 
                                              <tbody> 
                                                <tr> 
                                                  <td align="${CTA-align}" style="text-align:${CTA-align}; margin: 0 auto;"> 
                                                    <div class="mktoText" id="ctad14dd" mktoname="CTA">
                                                      <table class="" style="border-spacing: 0; mso-table-lspace: 0pt; mso-table-rspace: 0pt; margin: 0 auto;" cellspacing="0" cellpadding="0" align="${CTA-align}"> 
                                                        <tbody> 
                                                          <tr> 
                                                            <td bgcolor="${CTA-bg}" style="text-decoration: none; color: ${CTA-color1};border: 1px solid ${CTA-bordercolor}; outline: none;background-color:${CTA-bg}; font-family:  HCo Gotham SSm,Gotham SSm A,Gotham SSm B,Gotham,Helvetica,Arial,sans-serif; font-size: 14px; mso-line-height-rule: exactly; text-align: center; vertical-align: top; line-height:14px; padding:9px 37px; text-transform:normal; font-weight:bold; display:block; border-radius:20px;" valign="middle"><a style="outline: 0; text-decoration: none; color:${CTA-color1};" href="${CTA-url}">${CTA-text}</a> </td> 
                                                          </tr> 
                                                        </tbody> 
                                                      </table>
                                                    </div> </td> 
                                                </tr> 
                                              </tbody> 
                                            </table> </td> 
                                        </tr> 
                                      </tbody> 
                                    </table> </td> 
                                </tr> 
                                <tr> 
                                  <td class="extra-space" style="font-size: 1px;line-height: 1px;" height="${bnr-bottom-space}">&nbsp;</td> 
                                </tr> 
                              </tbody> 
                            </table> 
                            <!--[if gte mso 9]>
						  </v:textbox>
						 </v:rect>
						<![endif]--> </td> 
                        </tr> 
                      </tbody> 
                    </table>
<body>

Thank you!

kana0_0ng · ‎07-06-2020

I did try ghost tables and it didn't seem to work. I actually found a stock template that contained a right align button within the hero and edited the code to fit my template. I haven't tested to see exactly which part made this work, but in case anyone's interested this is what I ended up with:

<tr> 
                                                <td class="cta" style="word-break: break-word; -webkit-hyphens: none; -moz-hyphens: none; hyphens: none; border-collapse: collapse; text-align: ${CTA-align};"> 
                                                  <div> 
                                                    <div class="aligner mktoText" align="${CTA-align}" id="ctad14dd" mktoname="CTA" > 
                                                      <table style="border-spacing: 0; border-collapse: collapse;" cellspacing="0" cellpadding="0" border="0"> 
                                                        <tbody> 
                                                          <tr> 
                                                            <td style="word-break: break-word; -webkit-hyphens: none; -moz-hyphens: none; hyphens: none; border-collapse: collapse; background-clip: padding-box; -moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px; -moz-background-clip: padding; -webkit-background-clip: padding-box; text-align: ${CTA-align}; color:${CTA-color1};" bgcolor="${CTA-bg}" align="${CTA-align}"><a class="primary-font button" href="${CTA-url}" target="_blank" style="border-left-style: solid;font-size: 14px;text-decoration: none;padding-top: 0.563em;padding-bottom: 0.563em;padding-left: 2.313em;padding-right: 2.313em;border-top-width:1px;border-right-width:1px;border-bottom-width:1px;border-left-width:1px;border-top-style: solid;border-right-style: 
solid;border-bottom-style: solid;color: #0099f1;border-top-color:${CTA-bordercolor};border-right-color:${CTA-bordercolor};border-bottom-color:${CTA-bordercolor};border-left-color:${CTA-bordercolor};display: inline-block;-webkit-border-radius: 20px;-moz-border-radius: 20px;border-radius: 20px;-moz-background-clip: padding;-webkit-background-clip: padding-box;background-clip: padding-box;font-weight: 
700;font-family:HCo Gotham SSm,Gotham SSm A,Gotham SSm B,Gotham,Helvetica,Arial,sans-serif;;background-color:${CTA-bg}; color:${CTA-color1};"> 
                                                                <!--[if gte mso 9]>&nbsp;&nbsp;<![endif]-->${CTA-text} 
                                                                <!--[if gte mso 9]>&nbsp;&nbsp;<![endif]--></a></td> 
                                                          </tr> 
                                                        </tbody> 
                                                      </table> 
                                                    </div> 
                                                  </div> </td> 
                                              </tr>

Thanks for taking the time to help me!

View solution in original post

SrilekhaVV · ‎06-29-2020

The below line in your code needs a modification for it to work on Outlook.

<table align="${CTA-align}" cellpadding="0" cellspacing="0" border="0" style="margin:0 auto;">

Change to align="center" that will align the button to center or the value of token can be set to center.

kana0_0ng · ‎06-29-2020

Oddly enough, I'm not having any issues aligning center, it's only aligning right that I'm having trouble on Outlook.

SrilekhaVV · ‎07-02-2020

Hi,

Have you tried adding ghost columns for those versions of Outlook. Looks like the problem has been there, please see if this link helps

https://www.emailonacid.com/blog/article/email-development/using-ghost-columns-to-fix-alignment-prob...

Please let us know after you get the problem resolved.

thanks,

kana0_0ng · ‎07-06-2020

I did try ghost tables and it didn't seem to work. I actually found a stock template that contained a right align button within the hero and edited the code to fit my template. I haven't tested to see exactly which part made this work, but in case anyone's interested this is what I ended up with:

<tr> 
                                                <td class="cta" style="word-break: break-word; -webkit-hyphens: none; -moz-hyphens: none; hyphens: none; border-collapse: collapse; text-align: ${CTA-align};"> 
                                                  <div> 
                                                    <div class="aligner mktoText" align="${CTA-align}" id="ctad14dd" mktoname="CTA" > 
                                                      <table style="border-spacing: 0; border-collapse: collapse;" cellspacing="0" cellpadding="0" border="0"> 
                                                        <tbody> 
                                                          <tr> 
                                                            <td style="word-break: break-word; -webkit-hyphens: none; -moz-hyphens: none; hyphens: none; border-collapse: collapse; background-clip: padding-box; -moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px; -moz-background-clip: padding; -webkit-background-clip: padding-box; text-align: ${CTA-align}; color:${CTA-color1};" bgcolor="${CTA-bg}" align="${CTA-align}"><a class="primary-font button" href="${CTA-url}" target="_blank" style="border-left-style: solid;font-size: 14px;text-decoration: none;padding-top: 0.563em;padding-bottom: 0.563em;padding-left: 2.313em;padding-right: 2.313em;border-top-width:1px;border-right-width:1px;border-bottom-width:1px;border-left-width:1px;border-top-style: solid;border-right-style: 
solid;border-bottom-style: solid;color: #0099f1;border-top-color:${CTA-bordercolor};border-right-color:${CTA-bordercolor};border-bottom-color:${CTA-bordercolor};border-left-color:${CTA-bordercolor};display: inline-block;-webkit-border-radius: 20px;-moz-border-radius: 20px;border-radius: 20px;-moz-background-clip: padding;-webkit-background-clip: padding-box;background-clip: padding-box;font-weight: 
700;font-family:HCo Gotham SSm,Gotham SSm A,Gotham SSm B,Gotham,Helvetica,Arial,sans-serif;;background-color:${CTA-bg}; color:${CTA-color1};"> 
                                                                <!--[if gte mso 9]>&nbsp;&nbsp;<![endif]-->${CTA-text} 
                                                                <!--[if gte mso 9]>&nbsp;&nbsp;<![endif]--></a></td> 
                                                          </tr> 
                                                        </tbody> 
                                                      </table> 
                                                    </div> 
                                                  </div> </td> 
                                              </tr>

Thanks for taking the time to help me!

Dave_Roberts · ‎06-26-2020

You might try adding the "CTA Align" variable ${CTA-align} on the actual <td> for your button. It looks like you've got it on the parent <table> and the parent <td> to that table, but maybe putting it on the <td> as well would help align that <td> inside the <table>? It's been a while, but I think I remember some versions of Outlook "preferring" the inline attribute align="center" over something like style="text-align:center".

I can't tell without running some tests, but you might also want to check and make sure that table is showing up at 100% width so that there's room for the button to get pushed to the right. If it weren't reading the full width of the table, it might actually be right-aligned but in a short row so it looks left or center. An easy way to do this would be to change the bg-color of the parent elements (table and td) to something loud like bright-green and then send a test to make sure the colored boxes span the width of your email body.

kana0_0ng · ‎06-26-2020

I tried your suggestions and unfortunately the results are the same. With the bg-color test, it does seem to span the entire width.