SOLVED

Outlook CTA Alignment in Right Side of Email

Go to solution
Highlighted
Level 4

Outlook CTA Alignment in Right Side of Email

In Outlook 2016, email CTA button of banner is being aligned to left automatically if I put the CTA text alignment option as right. I am looking forward to know the exact reason why this happen in Outlook 2016 w.r.t. CTA alignment as a right and please suggest any reference link for the same.

Tags (1)
1 ACCEPTED SOLUTION

Accepted Solutions
Highlighted
Level 4

Re: Outlook CTA Alignment in Right Side of Email

Hi @SanfordWhiteman 

Below is the sample HTML code with CTA in banner and having issue in Outlook alignment in case of CTA is aligned in right side. and it shows in Outlook left side.

 

 

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" style="width: 100%;">
<head>
<!-- Marketo Variable Definitions --> 

<meta class="mktoString" id="heroLinkTextbutton" mktoname="CTA Alignment" default="right" mktomodulescope="true" />
  
<meta class="mktoImg" id="heroBackgroundImage" mktoname="Background Image" default="http://na-sj29.marketo.com/rs/717-ICG-368/images/CTA Bng.png" mktomodulescope="true" />
<meta class="mktoColor" id="heroBackgroundColor" mktoname="Module Background" default="#ffffff" mktomodulescope="true" />
<meta class="mktoColor" id="heroButtonBackgroundColor" mktoname="Button Background Color" default="#ff5a00" mktomodulescope="true" />
<meta class="mktoColor" id="heroBorderColor" mktoname="Button Border Color" default="#ff5a00" mktomodulescope="true" />
<meta class="mktoNumber" id="heroBorderSize" mktoname="Button Border Width" default="1" min="0" max="20" units="px" step="1" mktomodulescope="true" />
<meta class="mktoString" id="heroLinkText" mktoname="Button Text" default="CLICK HERE" mktomodulescope="true" />
<meta class="mktoString" id="heroLink" mktoname="Button Link" default="http://mylink" mktomodulescope="true" />
<meta class="mktoString" id="module1ctacontent" mktoname="UTM Content" default="banner content" mktomodulescope="true" />

</head>
<body  style="margin-bottom: 0; -webkit-text-size-adjust: 100%; padding-bottom: 0; min-width: 100%; margin-top: 0; margin-right: 0; -ms-text-size-adjust: 100%; margin-left: 0; padding-top: 0; padding-right: 0; padding-left: 0; width: 100%; font-family:Verdana;">



<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;" align="center" border="0" cellpadding="0" cellspacing="0" width="650">
<tbody>
<tr>
<td class="background" style="-webkit-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-moz-hyphens: none;hyphens: none;-ms-text-size-adjust: 100%;background-position:
center;background:${heroBackgroundImage};background-color:${heroBackgroundColor};background-image:${heroBackgroundImage};border-collapse: collapse; background-repeat:no-repeat; padding-left10px; padding-right:10px" background="${heroBackgroundImage}" bgcolor="${heroBackgroundColor}" valign="top" width="100%"> 
                            <center> 
                              <!--[if gte mso 9]>
                                                        <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:480pt;height:310pt">
                                                        <v:fill type="frame" src="${heroBackgroundImage}" color="${heroBackgroundColor}" />
                                                        <v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
                                                        <![endif]--> 
                              
<table class="table600" 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; min-height: 400px; width: auto" 
height="auto" align="${heroLinkTextbutton}" border="0" cellpadding="0" cellspacing="0" width="100%">
<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; padding-left: 25px" align="${heroLinkTextbutton}"> 
                                      
<table class="contents" 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;" align="${heroLinkTextbutton}" border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td class="" 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; text-align: left; border-collapse: collapse;" height="15%">&nbsp;</td>
</tr>
<tr style="vertical-align: middle; margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto;">
<td class="primary-font title" style="-webkit-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-moz-hyphens: none;hyphens: none;-ms-text-size-adjust: 100%;margin-left: auto;vertical-align: middle;margin-top: 0;margin-right: 
auto;margin-bottom: 0;text-align: ${heroLinkTextbutton};font-size: 50px;font-family:Verdana;color:#FFF;border-collapse: 
collapse;">
<div class="mktoText" mktoname="Main Title" id="mainTitle">
                                                 FREE DELIVERY 
                                              </div>
</td>
</tr>
<tr>
<td class="" 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; text-align: left; border-collapse: collapse;" height="2%">&nbsp;</td>
</tr>
<tr style="vertical-align: middle; margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto;">
<td class="secondary-font subtitle" style="-webkit-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-moz-hyphens: none;hyphens: none;-ms-text-size-adjust: 100%;margin-left: auto;vertical-align: middle;margin-top: 0;margin-right: 
auto;margin-bottom: 0;text-align: ${heroLinkTextbutton};font-size: 18px;font-family:Verdana;color: #000;border-collapse: 
collapse;" align="${heroLinkTextbutton}"> 
                                             
<div class="mktoText" mktoname="Subtitle" id="subtitle">
                                                   LOREM IPSUM DOLOR SIT AMET CONSECURETUR LOREM IPSUM DOLOR SIT AMET 
</td>
</tr>
<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; text-align: left; border-collapse: collapse;" height="20%">&nbsp;</td>
</tr>
<tr>
<td class="cta" style="hyphens: none;-webkit-text-size-adjust: 100%;mso-table-lspace: 00pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-moz-hyphens: none;-ms-text-size-adjust: 100%;color: #FFF;font-size: 
36px;line-height:38px;font-family:Verdana;border-collapse: collapse;" align="${heroLinkTextbutton}"> 
<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;" align="${heroLinkTextbutton}" border="0" cellpadding="0" cellspacing="0" align="${heroLinkTextbutton}">
<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; -webkit-border-radius: 4px;-moz-border-radius: 
4px;border-radius: 4px;" align="${heroLinkTextbutton}" bgcolor="${heroButtonBackgroundColor}"> <a 
href="${heroLink}?utm_content=CTA" target="_blank" class="primary-font button" style="text-decoration: none; -webkit-text-size-adjust:100%;-ms-text-size-adjust: 
100%;-webkit-background-clip: padding-box;-moz-background-clip:padding;font-family:Verdana;color: #ffffff;padding-top: 
12px;padding-right:
18px;padding-bottom:
12px;padding-left:18px;border-top-width:${heroBorderSize};border-right-width:${heroBorderSize};border-bottom-width:${heroBorderSize};border-left-width:${heroBorderSize};background-clip: padding-box;border-right-style: solid;border-bottom-style:
solid;border-left-style:solid;border-top-color:${heroBorderColor};border-right-color:${heroBorderColor};border-bottom-color:${heroBorderColor};border-left-color:${heroBorderColor};display: inline-block;-webkit-border-radius: 4px;-moz-border-radius: 4px; border-radius: 4px;border-top-style: 
solid;text-decoration: none;font-size: 16px;background-color:${heroButtonBackgroundColor};"><b>${heroLinkText}</b></span></a> </td>
</tr>
</tbody>
</table>
 </td>
</tr>
<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; text-align: left; border-collapse: collapse;"> &nbsp;</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!--[if gte mso 9]>
                                                        </v:textbox>
                                                        </v:rect>
                                                        <![endif]--> 
                            </center> </td>
</tr>
<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;line-height:10px;font-size:10px;" height="10">&nbsp; </td>
</tr>
</tbody>
</table>
</body>
</html>

 

 

 

 

 

View solution in original post

2 REPLIES 2
Highlighted
Level 10 - Community Moderator

Re: Outlook CTA Alignment in Right Side of Email

It's not possible to answer questions about HTML structure without seeing the (relevant parts of) the HTML.

Highlighted
Level 4

Re: Outlook CTA Alignment in Right Side of Email

Hi @SanfordWhiteman 

Below is the sample HTML code with CTA in banner and having issue in Outlook alignment in case of CTA is aligned in right side. and it shows in Outlook left side.

 

 

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" style="width: 100%;">
<head>
<!-- Marketo Variable Definitions --> 

<meta class="mktoString" id="heroLinkTextbutton" mktoname="CTA Alignment" default="right" mktomodulescope="true" />
  
<meta class="mktoImg" id="heroBackgroundImage" mktoname="Background Image" default="http://na-sj29.marketo.com/rs/717-ICG-368/images/CTA Bng.png" mktomodulescope="true" />
<meta class="mktoColor" id="heroBackgroundColor" mktoname="Module Background" default="#ffffff" mktomodulescope="true" />
<meta class="mktoColor" id="heroButtonBackgroundColor" mktoname="Button Background Color" default="#ff5a00" mktomodulescope="true" />
<meta class="mktoColor" id="heroBorderColor" mktoname="Button Border Color" default="#ff5a00" mktomodulescope="true" />
<meta class="mktoNumber" id="heroBorderSize" mktoname="Button Border Width" default="1" min="0" max="20" units="px" step="1" mktomodulescope="true" />
<meta class="mktoString" id="heroLinkText" mktoname="Button Text" default="CLICK HERE" mktomodulescope="true" />
<meta class="mktoString" id="heroLink" mktoname="Button Link" default="http://mylink" mktomodulescope="true" />
<meta class="mktoString" id="module1ctacontent" mktoname="UTM Content" default="banner content" mktomodulescope="true" />

</head>
<body  style="margin-bottom: 0; -webkit-text-size-adjust: 100%; padding-bottom: 0; min-width: 100%; margin-top: 0; margin-right: 0; -ms-text-size-adjust: 100%; margin-left: 0; padding-top: 0; padding-right: 0; padding-left: 0; width: 100%; font-family:Verdana;">



<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;" align="center" border="0" cellpadding="0" cellspacing="0" width="650">
<tbody>
<tr>
<td class="background" style="-webkit-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-moz-hyphens: none;hyphens: none;-ms-text-size-adjust: 100%;background-position:
center;background:${heroBackgroundImage};background-color:${heroBackgroundColor};background-image:${heroBackgroundImage};border-collapse: collapse; background-repeat:no-repeat; padding-left10px; padding-right:10px" background="${heroBackgroundImage}" bgcolor="${heroBackgroundColor}" valign="top" width="100%"> 
                            <center> 
                              <!--[if gte mso 9]>
                                                        <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:480pt;height:310pt">
                                                        <v:fill type="frame" src="${heroBackgroundImage}" color="${heroBackgroundColor}" />
                                                        <v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
                                                        <![endif]--> 
                              
<table class="table600" 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; min-height: 400px; width: auto" 
height="auto" align="${heroLinkTextbutton}" border="0" cellpadding="0" cellspacing="0" width="100%">
<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; padding-left: 25px" align="${heroLinkTextbutton}"> 
                                      
<table class="contents" 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;" align="${heroLinkTextbutton}" border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td class="" 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; text-align: left; border-collapse: collapse;" height="15%">&nbsp;</td>
</tr>
<tr style="vertical-align: middle; margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto;">
<td class="primary-font title" style="-webkit-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-moz-hyphens: none;hyphens: none;-ms-text-size-adjust: 100%;margin-left: auto;vertical-align: middle;margin-top: 0;margin-right: 
auto;margin-bottom: 0;text-align: ${heroLinkTextbutton};font-size: 50px;font-family:Verdana;color:#FFF;border-collapse: 
collapse;">
<div class="mktoText" mktoname="Main Title" id="mainTitle">
                                                 FREE DELIVERY 
                                              </div>
</td>
</tr>
<tr>
<td class="" 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; text-align: left; border-collapse: collapse;" height="2%">&nbsp;</td>
</tr>
<tr style="vertical-align: middle; margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto;">
<td class="secondary-font subtitle" style="-webkit-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-moz-hyphens: none;hyphens: none;-ms-text-size-adjust: 100%;margin-left: auto;vertical-align: middle;margin-top: 0;margin-right: 
auto;margin-bottom: 0;text-align: ${heroLinkTextbutton};font-size: 18px;font-family:Verdana;color: #000;border-collapse: 
collapse;" align="${heroLinkTextbutton}"> 
                                             
<div class="mktoText" mktoname="Subtitle" id="subtitle">
                                                   LOREM IPSUM DOLOR SIT AMET CONSECURETUR LOREM IPSUM DOLOR SIT AMET 
</td>
</tr>
<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; text-align: left; border-collapse: collapse;" height="20%">&nbsp;</td>
</tr>
<tr>
<td class="cta" style="hyphens: none;-webkit-text-size-adjust: 100%;mso-table-lspace: 00pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-moz-hyphens: none;-ms-text-size-adjust: 100%;color: #FFF;font-size: 
36px;line-height:38px;font-family:Verdana;border-collapse: collapse;" align="${heroLinkTextbutton}"> 
<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;" align="${heroLinkTextbutton}" border="0" cellpadding="0" cellspacing="0" align="${heroLinkTextbutton}">
<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; -webkit-border-radius: 4px;-moz-border-radius: 
4px;border-radius: 4px;" align="${heroLinkTextbutton}" bgcolor="${heroButtonBackgroundColor}"> <a 
href="${heroLink}?utm_content=CTA" target="_blank" class="primary-font button" style="text-decoration: none; -webkit-text-size-adjust:100%;-ms-text-size-adjust: 
100%;-webkit-background-clip: padding-box;-moz-background-clip:padding;font-family:Verdana;color: #ffffff;padding-top: 
12px;padding-right:
18px;padding-bottom:
12px;padding-left:18px;border-top-width:${heroBorderSize};border-right-width:${heroBorderSize};border-bottom-width:${heroBorderSize};border-left-width:${heroBorderSize};background-clip: padding-box;border-right-style: solid;border-bottom-style:
solid;border-left-style:solid;border-top-color:${heroBorderColor};border-right-color:${heroBorderColor};border-bottom-color:${heroBorderColor};border-left-color:${heroBorderColor};display: inline-block;-webkit-border-radius: 4px;-moz-border-radius: 4px; border-radius: 4px;border-top-style: 
solid;text-decoration: none;font-size: 16px;background-color:${heroButtonBackgroundColor};"><b>${heroLinkText}</b></span></a> </td>
</tr>
</tbody>
</table>
 </td>
</tr>
<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; text-align: left; border-collapse: collapse;"> &nbsp;</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!--[if gte mso 9]>
                                                        </v:textbox>
                                                        </v:rect>
                                                        <![endif]--> 
                            </center> </td>
</tr>
<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;line-height:10px;font-size:10px;" height="10">&nbsp; </td>
</tr>
</tbody>
</table>
</body>
</html>

 

 

 

 

 

View solution in original post