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

Email Template 2.0 Button Alignment issue in Outlook

  • June 26, 2020
  • 2 replies
  • 8245 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

S
SrilekhaVV
New Participant
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
New Participant
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
New Participant
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,

 

Dave_Roberts
Dave_Roberts
New Participant
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
New Participant
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.

 

 

Terms & ConditionsAccessibility statement

Loading footer...