Email Template 2.0 Button Alignment issue in Outlook | Community
Skip to main content
K
kana0_0ng
Level 2
June 26, 2020
Solved

Email Template 2.0 Button Alignment issue in Outlook

  • June 26, 2020
  • 2 replies
  • 8270 views

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!

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 kana0_0ng

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-problems-in-outlook/

Please let us know after you get the problem resolved.

 

thanks,

 


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!

2 replies

Dave_Roberts
Dave_Roberts
Level 10
June 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.

K
kana0_0ngAuthor
Level 2
June 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.

 

 

S
SrilekhaVV
Level 2
June 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. 

K
kana0_0ngAuthor
Level 2
June 29, 2020

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

S
SrilekhaVV
Level 2
July 2, 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-problems-in-outlook/

Please let us know after you get the problem resolved.

 

thanks,

 

Terms & ConditionsAccessibility statement

Loading footer...