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

asked Nov 20 at 15:00

Tibster

add a comment |

up vote
1
down vote

favorite

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

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?

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

asked Nov 20 at 15:00

Tibster

add a comment |

up vote
1
down vote

favorite

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

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?

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

asked Nov 20 at 15:00

Tibster

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

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?

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

asked Nov 20 at 15:00

Tibster

asked Nov 20 at 15:00

Tibster

asked Nov 20 at 15:00

Tibster

asked Nov 20 at 15:00

Tibster

asked Nov 20 at 15:00

Tibster

add a comment |

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

answered Nov 20 at 15:08

Richard Clifford

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

|
show 1 more comment

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

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

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

Name

Required, but never shown

1 Answer
1

active

oldest

votes

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

answered Nov 20 at 15:08

Richard Clifford

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

|
show 1 more comment

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

answered Nov 20 at 15:08

Richard Clifford

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

|
show 1 more comment

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

answered Nov 20 at 15:08

Richard Clifford

20319

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

answered Nov 20 at 15:08

Richard Clifford

20319

answered Nov 20 at 15:08

Richard Clifford

20319

answered Nov 20 at 15:08

Richard Clifford

20319

answered Nov 20 at 15:08

Richard Clifford

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

|
show 1 more comment

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

@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

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

@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

|
show 1 more comment

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

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Tukukkk