Spacing issue in VML email button











up vote
1
down vote

favorite












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 -->








css email html-email vml







share|improve this question


























    up vote
    1
    down vote

    favorite












    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 -->








    css email html-email vml







    share|improve this question
























      up vote
      1
      down vote

      favorite









      up vote
      1
      down vote

      favorite











      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 -->








      css email html-email vml







      share|improve this question













      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 -->








       <!-- 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 -->





       <!-- 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 -->





      css email html-email vml




      css email html-email vml






      share|improve this question













      share|improve this question











      share|improve this question




      share|improve this question










      asked Nov 20 at 15:00









      Tibster

      63




      63
























          1 Answer
          1






          active

          oldest

          votes

















          up vote
          0
          down vote













          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






          share|improve this answer





















          • That's great but I still need to render rounded corners on buttons in outlook. So far it looks like there's no escape VML code.
            – Tibster
            Nov 20 at 15:20






          • 1




            @Tibster There's a concept called graceful degradation. It's not easy to get rounded buttons in Outlook. In addition, you can't use web fonts, so DINPro-Medium is never going to work in Outlook or Gmail You just make concessions and have a fallback.
            – gwally
            Nov 20 at 19:41






          • 1




            right. Most devs/creative teams see the lack of border-radius as an ok degration since Outlook Windows is usually an exceptionally small user base.
            – Richard Clifford
            Nov 20 at 20:04










          • @gwally perhaps my question is not clear enough, I will look at rephrasing. I was able to achieve rounded corners in outlook with a little bit of VML, it's just the padding top and bottom that I need help understanding where it's coming from. I am aware of graceful degradation and that emails will not look exactly the same on all clients and I'm fine with that.
            – Tibster
            Nov 22 at 9:48






          • 1




            @Tibster I looked at your code, played with it. I am unwilling to sacrifice ease of coding for 50 lines to get a rounded button in Outlook. Your current code has a button that's too narrow for Outlook, too tall for everything else. Try decreasing your padding on the href, the margin on the <td> and increasing the height on the <v:roundrect>. Good luck.
            – gwally
            Nov 22 at 16:13











          Your Answer






          StackExchange.ifUsing("editor", function () {
          StackExchange.using("externalEditor", function () {
          StackExchange.using("snippets", function () {
          StackExchange.snippets.init();
          });
          });
          }, "code-snippets");

          StackExchange.ready(function() {
          var channelOptions = {
          tags: "".split(" "),
          id: "1"
          };
          initTagRenderer("".split(" "), "".split(" "), channelOptions);

          StackExchange.using("externalEditor", function() {
          // Have to fire editor after snippets, if snippets enabled
          if (StackExchange.settings.snippets.snippetsEnabled) {
          StackExchange.using("snippets", function() {
          createEditor();
          });
          }
          else {
          createEditor();
          }
          });

          function createEditor() {
          StackExchange.prepareEditor({
          heartbeatType: 'answer',
          convertImagesToLinks: true,
          noModals: true,
          showLowRepImageUploadWarning: true,
          reputationToPostImages: 10,
          bindNavPrevention: true,
          postfix: "",
          imageUploader: {
          brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
          contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
          allowUrls: true
          },
          onDemand: true,
          discardSelector: ".discard-answer"
          ,immediatelyShowMarkdownHelp:true
          });


          }
          });














          draft saved

          draft discarded


















          StackExchange.ready(
          function () {
          StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53395797%2fspacing-issue-in-vml-email-button%23new-answer', 'question_page');
          }
          );

          Post as a guest















          Required, but never shown

























          1 Answer
          1






          active

          oldest

          votes








          1 Answer
          1






          active

          oldest

          votes









          active

          oldest

          votes






          active

          oldest

          votes








          up vote
          0
          down vote













          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






          share|improve this answer





















          • That's great but I still need to render rounded corners on buttons in outlook. So far it looks like there's no escape VML code.
            – Tibster
            Nov 20 at 15:20






          • 1




            @Tibster There's a concept called graceful degradation. It's not easy to get rounded buttons in Outlook. In addition, you can't use web fonts, so DINPro-Medium is never going to work in Outlook or Gmail You just make concessions and have a fallback.
            – gwally
            Nov 20 at 19:41






          • 1




            right. Most devs/creative teams see the lack of border-radius as an ok degration since Outlook Windows is usually an exceptionally small user base.
            – Richard Clifford
            Nov 20 at 20:04










          • @gwally perhaps my question is not clear enough, I will look at rephrasing. I was able to achieve rounded corners in outlook with a little bit of VML, it's just the padding top and bottom that I need help understanding where it's coming from. I am aware of graceful degradation and that emails will not look exactly the same on all clients and I'm fine with that.
            – Tibster
            Nov 22 at 9:48






          • 1




            @Tibster I looked at your code, played with it. I am unwilling to sacrifice ease of coding for 50 lines to get a rounded button in Outlook. Your current code has a button that's too narrow for Outlook, too tall for everything else. Try decreasing your padding on the href, the margin on the <td> and increasing the height on the <v:roundrect>. Good luck.
            – gwally
            Nov 22 at 16:13















          up vote
          0
          down vote













          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






          share|improve this answer





















          • That's great but I still need to render rounded corners on buttons in outlook. So far it looks like there's no escape VML code.
            – Tibster
            Nov 20 at 15:20






          • 1




            @Tibster There's a concept called graceful degradation. It's not easy to get rounded buttons in Outlook. In addition, you can't use web fonts, so DINPro-Medium is never going to work in Outlook or Gmail You just make concessions and have a fallback.
            – gwally
            Nov 20 at 19:41






          • 1




            right. Most devs/creative teams see the lack of border-radius as an ok degration since Outlook Windows is usually an exceptionally small user base.
            – Richard Clifford
            Nov 20 at 20:04










          • @gwally perhaps my question is not clear enough, I will look at rephrasing. I was able to achieve rounded corners in outlook with a little bit of VML, it's just the padding top and bottom that I need help understanding where it's coming from. I am aware of graceful degradation and that emails will not look exactly the same on all clients and I'm fine with that.
            – Tibster
            Nov 22 at 9:48






          • 1




            @Tibster I looked at your code, played with it. I am unwilling to sacrifice ease of coding for 50 lines to get a rounded button in Outlook. Your current code has a button that's too narrow for Outlook, too tall for everything else. Try decreasing your padding on the href, the margin on the <td> and increasing the height on the <v:roundrect>. Good luck.
            – gwally
            Nov 22 at 16:13













          up vote
          0
          down vote










          up vote
          0
          down vote









          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






          share|improve this answer












          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







          share|improve this answer












          share|improve this answer



          share|improve this answer










          answered Nov 20 at 15:08









          Richard Clifford

          20319




          20319












          • That's great but I still need to render rounded corners on buttons in outlook. So far it looks like there's no escape VML code.
            – Tibster
            Nov 20 at 15:20






          • 1




            @Tibster There's a concept called graceful degradation. It's not easy to get rounded buttons in Outlook. In addition, you can't use web fonts, so DINPro-Medium is never going to work in Outlook or Gmail You just make concessions and have a fallback.
            – gwally
            Nov 20 at 19:41






          • 1




            right. Most devs/creative teams see the lack of border-radius as an ok degration since Outlook Windows is usually an exceptionally small user base.
            – Richard Clifford
            Nov 20 at 20:04










          • @gwally perhaps my question is not clear enough, I will look at rephrasing. I was able to achieve rounded corners in outlook with a little bit of VML, it's just the padding top and bottom that I need help understanding where it's coming from. I am aware of graceful degradation and that emails will not look exactly the same on all clients and I'm fine with that.
            – Tibster
            Nov 22 at 9:48






          • 1




            @Tibster I looked at your code, played with it. I am unwilling to sacrifice ease of coding for 50 lines to get a rounded button in Outlook. Your current code has a button that's too narrow for Outlook, too tall for everything else. Try decreasing your padding on the href, the margin on the <td> and increasing the height on the <v:roundrect>. Good luck.
            – gwally
            Nov 22 at 16:13


















          • That's great but I still need to render rounded corners on buttons in outlook. So far it looks like there's no escape VML code.
            – Tibster
            Nov 20 at 15:20






          • 1




            @Tibster There's a concept called graceful degradation. It's not easy to get rounded buttons in Outlook. In addition, you can't use web fonts, so DINPro-Medium is never going to work in Outlook or Gmail You just make concessions and have a fallback.
            – gwally
            Nov 20 at 19:41






          • 1




            right. Most devs/creative teams see the lack of border-radius as an ok degration since Outlook Windows is usually an exceptionally small user base.
            – Richard Clifford
            Nov 20 at 20:04










          • @gwally perhaps my question is not clear enough, I will look at rephrasing. I was able to achieve rounded corners in outlook with a little bit of VML, it's just the padding top and bottom that I need help understanding where it's coming from. I am aware of graceful degradation and that emails will not look exactly the same on all clients and I'm fine with that.
            – Tibster
            Nov 22 at 9:48






          • 1




            @Tibster I looked at your code, played with it. I am unwilling to sacrifice ease of coding for 50 lines to get a rounded button in Outlook. Your current code has a button that's too narrow for Outlook, too tall for everything else. Try decreasing your padding on the href, the margin on the <td> and increasing the height on the <v:roundrect>. Good luck.
            – gwally
            Nov 22 at 16:13
















          That's great but I still need to render rounded corners on buttons in outlook. So far it looks like there's no escape VML code.
          – Tibster
          Nov 20 at 15:20




          That's great but I still need to render rounded corners on buttons in outlook. So far it looks like there's no escape VML code.
          – Tibster
          Nov 20 at 15:20




          1




          1




          @Tibster There's a concept called graceful degradation. It's not easy to get rounded buttons in Outlook. In addition, you can't use web fonts, so DINPro-Medium is never going to work in Outlook or Gmail You just make concessions and have a fallback.
          – gwally
          Nov 20 at 19:41




          @Tibster There's a concept called graceful degradation. It's not easy to get rounded buttons in Outlook. In addition, you can't use web fonts, so DINPro-Medium is never going to work in Outlook or Gmail You just make concessions and have a fallback.
          – gwally
          Nov 20 at 19:41




          1




          1




          right. Most devs/creative teams see the lack of border-radius as an ok degration since Outlook Windows is usually an exceptionally small user base.
          – Richard Clifford
          Nov 20 at 20:04




          right. Most devs/creative teams see the lack of border-radius as an ok degration since Outlook Windows is usually an exceptionally small user base.
          – Richard Clifford
          Nov 20 at 20:04












          @gwally perhaps my question is not clear enough, I will look at rephrasing. I was able to achieve rounded corners in outlook with a little bit of VML, it's just the padding top and bottom that I need help understanding where it's coming from. I am aware of graceful degradation and that emails will not look exactly the same on all clients and I'm fine with that.
          – Tibster
          Nov 22 at 9:48




          @gwally perhaps my question is not clear enough, I will look at rephrasing. I was able to achieve rounded corners in outlook with a little bit of VML, it's just the padding top and bottom that I need help understanding where it's coming from. I am aware of graceful degradation and that emails will not look exactly the same on all clients and I'm fine with that.
          – Tibster
          Nov 22 at 9:48




          1




          1




          @Tibster I looked at your code, played with it. I am unwilling to sacrifice ease of coding for 50 lines to get a rounded button in Outlook. Your current code has a button that's too narrow for Outlook, too tall for everything else. Try decreasing your padding on the href, the margin on the <td> and increasing the height on the <v:roundrect>. Good luck.
          – gwally
          Nov 22 at 16:13




          @Tibster I looked at your code, played with it. I am unwilling to sacrifice ease of coding for 50 lines to get a rounded button in Outlook. Your current code has a button that's too narrow for Outlook, too tall for everything else. Try decreasing your padding on the href, the margin on the <td> and increasing the height on the <v:roundrect>. Good luck.
          – gwally
          Nov 22 at 16:13


















          draft saved

          draft discarded




















































          Thanks for contributing an answer to Stack Overflow!


          • Please be sure to answer the question. Provide details and share your research!

          But avoid …



          • Asking for help, clarification, or responding to other answers.

          • Making statements based on opinion; back them up with references or personal experience.


          To learn more, see our tips on writing great answers.





          Some of your past answers have not been well-received, and you're in danger of being blocked from answering.


          Please pay close attention to the following guidance:


          • Please be sure to answer the question. Provide details and share your research!

          But avoid …



          • Asking for help, clarification, or responding to other answers.

          • Making statements based on opinion; back them up with references or personal experience.


          To learn more, see our tips on writing great answers.




          draft saved


          draft discarded














          StackExchange.ready(
          function () {
          StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53395797%2fspacing-issue-in-vml-email-button%23new-answer', 'question_page');
          }
          );

          Post as a guest















          Required, but never shown





















































          Required, but never shown














          Required, but never shown












          Required, but never shown







          Required, but never shown

































          Required, but never shown














          Required, but never shown












          Required, but never shown







          Required, but never shown







          -

          Popular posts from this blog

          404 Error Contact Form 7 ajax form submitting

          Image
          0 The contact form does not work, and affects loading after one try. The chrome console shows the error message: POST http://example.com/wp-json/contact-form-7/v1/contact-forms/50/feedback 404 (Not Found) send @ jquery.js?ver=1.12.4:4 ajax @ jquery.js?ver=1.12.4:4 wpcf7.submit @ scripts.js?ver=5.0.3:346 (anonymous) @ scripts.js?ver=5.0.3:53 dispatch @ jquery.js?ver=1.12.4:3 r.handle @ jquery.js?ver=1.12.4:3 How to solve this issue? thanks in advance javascript wordpress contact-form-7 share | improve this question edited Jul 17 '18 at 5:39 Kiran Shahi 4,745 3 16 43 ...
          Read more

          How to know if a Active Directory user can login interactively

          Image
          1 I would like to know if and how is it possible to know if a AD user can login interactively (on a server) in a domain. I need to know if I can find it out using a LDAP search. Thanks. windows active-directory login user-permissions user-profile share | improve this question edited 1 hour ago yagmoth555 ♦ 11.6k 3 17 42 asked 1 hour ago Luigi Luigi 6 1 New contributor ...
          Read more

          Refactoring coordinates for Minecraft Pi buildings written in Python

          Image
          0 $begingroup$ I'm fairly new to coding and I wrote this script in Python for a house with a roof in Minecraft Pi. I've found different ways to write the coordinates to make the code base shorter, but I'm wondering if it is possible for me to refactor it any further so I don't have to list each coordinate line by line. import mcpi.minecraft as minecraft import mcpi.block as block mc = minecraft.Minecraft.create() p = mc.player.getTilePos() mc.setBlocks(p.x+1, p.y, p.z+1, #Main structure starting coordinates (DO NOT ALTER) p.x+19, p.y+4, p.z+6, #Structure size/coordinates (Alters cube size) block.STONE_BRICK) mc.setBlocks(p.x+2, p.y+1, p.z+2, #Hollowing out main structure interior p.x+18, p.y+3, p.z+5, block.AIR) mc.setBlocks(p.x, p.y...
          Read more