CODEWITHSUNDEEP
cssemailhtml-emailvml
Tibster
Tibster

Reputation: 11

Spacing issue in VML email button

I am working with some HTML/CSS and VML code to make a button render consistently in most email clients. As outlook doesn't support rounded corners I'm having to add some VML code to achieve this effect. I managed to fix most of the alignment issues but I can't figure out where the spacing at the top/bottom on the button is coming from and how to get rid of it?

I was able to use some VML code from this bulletproof email button generator and Microsoft's reference site

The reason why I'm not using the bulletproof generator is because the people responsible for adding content to emails are not technical and as such I'm trying to minimise issues by exposing them to code as little as possible. Also I understand clicks on VML buttons might not track on some Outlook clients.

Also a similar question can be found here but the solution provided there didn't work in my case or I might have overlooked something?

Below is the code I'm working with. Please note the VML button background colour has been set to green and the table that's meant to be the button is blue. I did this as it was easier for me to troubleshoot.

So far I managed to identify the strange padding around the text itself is coming from the inline css on the a tag but I can't figure our where those random lines of space at the top and bottom of the VML button are coming from.

 <!-- button -->
                      <div align="center" class="float-center" >
                     <!--[if mso]>
                       <v:roundrect
                         xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" arcsize="100%" fillcolor="green" style="width:250px; height:70px;mso-fit-shape-to-text:True;"
                         <v:stroke color="#1e6db1"/>
   
                         <center>

                     <![endif]-->
            <table class="button rounded cta-main float-center" style="Margin:16px 0 16px 0;border-collapse:collapse;border-spacing:0;float:none;margin:16px 0 16px 0;padding:0;text-align:center;vertical-align:top;width:auto">
             
              <tr style="padding:0;text-align:left;vertical-align:top">
               <td style="-moz-hyphens:none;-webkit-hyphens:none;Margin:0;border-collapse:collapse!important;color:#1f2935;font-family:Helvetica,Arial,sans-serif;font-size:14px;font-weight:400;hyphens:none;line-height:1.5;margin:0;padding:0;text-align:left;vertical-align:top;word-break:break-word;word-wrap:break-word" valign="middle">
                <table style="border-collapse:collapse;border-spacing:0;padding:0;text-align:center;vertical-align:top;width:100%" valign="top">
                 
                  <tr style="padding:0;text-align:left;vertical-align:top;">
                   <td style="-moz-hyphens:none;-webkit-hyphens:none;Margin:0;background:#1e6db1;border:none;border-collapse:collapse!important;-webkit-border-radius:500px;-moz-border-radius:500px;border-radius:500px;color:#fefefe;font-family:Helvetica,Arial,sans-serif;font-size:14px;font-weight:400;hyphens:none;line-height:1.5;margin:0;padding:0;text-align:left;vertical-align:top;word-break:break-word;word-wrap:break-word" valign="top">

                    <a href="https://click.email.ucas.com/?qs=6c9084e0730ba4dc1922768cfa83b05115461a1febe2fb9df4b046be8ebdbf014229f45cf8558f65a28e9fcdb54ced5d6a5fa122aee33ef8" style="Margin:0;border:0 solid #1e6db1;border-radius:50px;color:#fefefe;display:inline-block;padding:24px 32px 24px 32px;font-family:Helvetica,Arial,sans-serif;font-size:18px;font-weight:700;mso-line-height-rule:exactly;line-height:1.5;margin:0;text-align:left;text-decoration:none;"> 
                      <span style="color:#fefefe;">
                      Finance &rsaquo;
                      </span>
                     </a>
                      
                    </td></tr></table></td></tr></table>
                        
                           <!--[if mso]>
                         </center>
                      </v:roundrect>
                     <![endif]-->
                     </div>
                    <!-- end button -->

Upvotes: 1

Views: 2816

Answers (1)

RichardDev
RichardDev

Reputation: 552

VML stuff in general adds a lot to your file size unnecessarily. I use this for my button code and it works on all the major litmus clients:

  <table class="button"  border="0" cellpadding="0" cellspacing="0" style="background-color:#212121; -webkit-border-radius:2px; -moz-border-radius:2px; border-radius:2px; overflow:hidden; mso-padding-alt:0px 21px 0px 21px;">
    <tr>
      <td width="100%" height="54" align="center" style="font-size:16px; line-height:16px; text-align:center; font-family:'DINPro-Medium',sans-serif; color:#FFFFFF;">
        <a href="http://buttonLink.com" target="_blank" style="color:#FFFFFF; text-decoration:none; width:100%; display:block; padding-top:16px; padding-bottom:16px;"> <span style="display:inline-block; padding-top:0px; padding-right:21px; padding-bottom:0px; padding-left:21px; color:#FFFFFF;">
        SHOP NOW
        </span></a>
      </td>
    </tr>
  </table>

Litmus also has this super helpful article on buttons:

https://litmus.com/blog/a-guide-to-bulletproof-buttons-in-email-design

Upvotes: 1

Related Questions