(Part I) Weird Outlook issues with VML button

Guitarrista82
Level 5

(Part I) Weird Outlook issues with VML button

Hi Community,

 

I am having issues with a VML button in Outlook. 

 

Because there are two different issues, but related to the same button, I am going to create two posts--Part I and Part II.


This is how the button should/does appear in most email clients:

Guitarrista82_0-1663873204240.png

This is the module/button code:

 

<tr class="mktoModule" mktoname="Module 34b | BulletProof Button" id="Module_34b" mktoaddbydefault="false">
          <td align="center" valign="top" style="border-collapse: collapse; mso-line-height-rule: exactly; padding:${section_top_space_01} 0px ${section_bottom_space_01} 0px;">
            <table align="center" width="600" border="0" cellspacing="0" cellpadding="0" class="em_main_table" style="border-collapse: collapse; mso-table-lspace: 0px; mso-table-rspace: 0px; width:600px; table-layout:fixed;" bgcolor="${Mod_01_BG_Color}">
              <tbody>
                <tr>
                  <td width="42" style="border-collapse: collapse; mso-line-height-rule: exactly; width:42px;" class="em_side14">&nbsp;</td>
                  <td align="center" valign="top" class="em_defaultlink" style="border-collapse: collapse; mso-line-height-rule: exactly; padding:10px 0px 10px 0px;">			  
					  <div id="Mod34b_button" mktoname="Button Mod 34b" class="mktoText"><!--[if mso]>
          <a:roundrect 
xmlns:a="urn:schemas-microsoft-com:vml" 
xmlns:w="urn:schemas-microsoft-com:office:word" 
href="{{lead.Brand Phone MX - Nationals CallTo}}" target="_blank" style="height:48px;v-text-anchor:middle;width:180px;" arcsize="15%" strokecolor="{{Lead.Brand Primary Color}}" fillcolor="{{Lead.Brand Primary Color}};width: 180;">
             <w:anchorlock/>
             <center style="color:#ffffff;font-family:'Helvetica', Arial, sans-serif; font-size:16px; font-weight: 600;">Llama&nbsp;<span style="text-decoration: underline;">{{lead.Brand Phone MX - Nationals}}</span></center>
           </a:roundrect>
        <![endif]-->
 <a href="{{lead.Brand Phone MX - Nationals CallTo}}" target="_blank" style="display: inline-block; mso-hide: all; background-color:aquamarine; color: #ffffff; border: 1px solid aquamarine; border-radius: 8px; line-height: 48px; width: 180px; font-family: 'Helvetica', Arial, sans-serif; font-size: 16px; font-weight: 600; text-align: center; -webkit-text-size-adjust: none; text-decoration: none;">SHOP NOW</a></div>
					  
                  </td>
                  <td width="42" style="border-collapse: collapse; mso-line-height-rule: exactly; width:42px;" class="em_side14">&nbsp;</td>
                </tr>
              </tbody>
            </table>
          </td>
        </tr>

 

 

The first problem I have been trying to resolve is that when an email containing the button is forwarded from Outlook desktop, it shows two buttons:

Guitarrista82_0-1663872447793.png

 

I tried resolving this by adding <!--[if !mso]><!-->  around the <a href> code as shown below:

 

<!--[if !mso]><!--> <a href="{{lead.Brand Phone MX - Nationals CallTo}}" target="_blank" style="display: inline-block; background-color:aquamarine; color: #ffffff; border: 1px solid aquamarine; border-radius: 8px; line-height: 48px; width: 180px; font-family: 'Helvetica', Arial, sans-serif; font-size: 16px; font-weight: 600; text-align: center; -webkit-text-size-adjust: none; text-decoration: none;">SHOP NOW</a> <!--<![endif]-->


But that caused the following issues to occur in Outlook for desktop and Outlook.Office.com:

 

Outlook Desktop:

 

BP button missing telephone #_Outlook Desktop.png

 

Outlook.Office.com:

BP button no styling_Outlook Office online.png

 

I have not been able to figure out a cause for this or a solution.

 

Any suggestions?

 

Thanks,

 

LK

3 REPLIES 3
SanfordWhiteman
Level 10 - Community Moderator

Re: (Part I) Weird Outlook issues with VML button


The first problem I have been trying to resolve is that when an email containing the button is forwarded from Outlook desktop, it shows two buttons:

It's simply not reasonable to expect formatting to be predictable after forwarding: part of the act of forwarding (unless forwarded as an attachment) is altering the HTML.

Guitarrista82
Level 5

Re: (Part I) Weird Outlook issues with VML button

That makes sense, Sanford. Thanks.

 

Can you recommend an alternative to VML buttons that might not have this same issue? The reason I wanted to switch to VMLs is that we've noticed that Outlook AND Gmail are stripping out the padding so that the button ends up looking like the below:

Guitarrista82_0-1663887019136.png

 

Dave_Roberts
Level 10

Re: (Part I) Weird Outlook issues with VML button

You might try using  style="width:200px;" in place of the padding there. I'm pretty sure Outlook only supports padding on table cells (<td>), so it's probably failing when added to the link (<a>) element.  Here's a link to a support chart for reference: https://www.caniemail.com/features/css-padding/