SOLVED

Email Template 2.0 Button Alignment issue in Outlook

Go to solution
kana0_0ng
Level 2

Email Template 2.0 Button Alignment issue in Outlook

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!

1 ACCEPTED SOLUTION

Accepted Solutions
kana0_0ng
Level 2

Re: Email Template 2.0 Button Alignment issue in Outlook

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

6 REPLIES 6
Dave_Roberts
Level 10

Re: Email Template 2.0 Button Alignment issue in Outlook

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
Level 2

Re: Email Template 2.0 Button Alignment issue in Outlook

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

kana0_0ng_0-1593187654389.png

 

 

SrilekhaVV
Level 2

Re: Email Template 2.0 Button Alignment issue in Outlook

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
Level 2

Re: Email Template 2.0 Button Alignment issue in Outlook

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

SrilekhaVV
Level 2

Re: Email Template 2.0 Button Alignment issue in Outlook

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
Level 2

Re: Email Template 2.0 Button Alignment issue in Outlook

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!