VML RoundReact overlap on the text

Question

appreciate your help and time.

I have this issue when using VML RoundRect in email design. I refer the following code from Bulletproof email buttons. However when i set absolute position on the RoundRect, it overlay on the white text.

<!-- Email Body : BEGIN -->
<table role="presentation" cellspacing="0" cellpadding="0" border="0" align="center" width="100%" style="max-width: 600px;" class="email-container">

  <!-- Banner : BEGIN -->
  <tr>
    <td background="https://s3-ap-southeast-1.amazonaws.com/edgedigital/tenderloin-banner-v2.jpg" bgcolor="#ffdda4" width="600" height="280" valign="top" style="background-position: center center !important;">
      <!--[if mso]>
        <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px; height:280px; background-position: center center !important;">
        <v:fill type="tile" src="https://s3-ap-southeast-1.amazonaws.com/edgedigital/footer-email.png"/>
        <v:textbox inset="0,0,0,0">
      <![endif]-->
      <div>
        <!--[if mso]>
           <table role="presentation" border="0" cellspacing="0" cellpadding="0" align="right" width="700">
               <tr>
                 <td align="right" valign="middle" width="700">
        <![endif]-->
        <table role="presentation" border="0" cellpadding="0" cellspacing="0" align="right" width="100%" style="margin: auto;">

          <tr>
            <td align="right" valign="middle">

              <table style="margin-right: 0!important">
                <tr>
                  <td valign="top" align="right" style="text-align: center; padding: 0px;">

                    <div>
         <!--[if mso]>
            <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://litmus.com" style="height:36px;v-text-anchor:middle;width:150px;" arcsize="5%" strokecolor="#EB7035" fillcolor="#EB7035">
            <w:anchorlock/>
            <center style="color:#ffffff;font-family:Helvetica, Arial,sans-serif;font-size:16px;">I am a button &rarr;</center>
            </v:roundrect>
         <![endif]-->
         <a href="http://buttons.cm" style="background-color:#EB7035;border:1px solid #EB7035;border-radius:3px;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:16px;line-height:44px;text-align:center;text-decoration:none;width:150px;-webkit-text-size-adjust:none;mso-hide:all;">I am a button &rarr;</a>
                    </div>
                  </td>
                </tr>
              </table>

            </td>
          </tr>

          <tr>
            <td height="20" style="font-size:20px; line-height:20px;">&nbsp;</td>
          </tr>

        </table>
        <!--[if mso]>
        </td>
        </tr>
        </table>
        <![endif]-->
      </div>
      <!--[if gte mso 9]>
      </v:textbox>
      </v:rect>
      <![endif]-->
    </td>
  </tr>
  <!-- BANNER : END -->

The normal email clients are working fine but when come to Outlook, it happened like image below shown.

Outlook output result screenshot

My Ideal Goal

As you can see, the RoundRect(orange object) is overlapping on the white display word. Please ignore the background-image at the behind. it is not related with question at all.

Please Help. Thank you again.

These VML objects cannot be nested. – scoopzilla Feb 28 '18 at 00:51 — scoopzilla, Feb 28 '18 at 00:51

Syfer · Answer 1 · 2018-02-28T01:28:39.600

Updating answer with a better way to do email.

Now that I have your code, I am able to give you a complete fix. Below is the code you require to solve your issued. I have removed the second VML that was causing the problem and added in a button that will work across all email clients the same way. The only thing is Outlook will not show the 3px rounded edges.

 <!-- Email Body : BEGIN -->
<table role="presentation" cellspacing="0" cellpadding="0" border="0" align="center" width="100%" style="max-width: 600px;" class="email-container">

  <!-- Banner : BEGIN -->
  <tr>
    <td background="https://s3-ap-southeast-1.amazonaws.com/edgedigital/tenderloin-banner-v2.jpg" bgcolor="#ffdda4" width="600" height="280" valign="top" style="background-position: center center !important;">
      <!--[if mso]>
        <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px; height:280px; background-position: center center !important;">
        <v:fill type="tile" src="https://s3-ap-southeast-1.amazonaws.com/edgedigital/footer-email.png"/>
        <v:textbox inset="0,0,0,0">
      <![endif]-->
      <div>
        <!--[if mso]>
           <table role="presentation" border="0" cellspacing="0" cellpadding="0" align="right" width="700">
               <tr>
                 <td align="right" valign="middle" width="700">
        <![endif]-->
        <table role="presentation" border="0" cellpadding="0" cellspacing="0" align="right" width="100%" style="margin: auto;">

          <tr>
            <td align="right" valign="middle">

              <table style="margin-right: 0!important">
                <tr>
                  <td valign="top" align="right" style="text-align: center; padding: 0px;">

       
<table border="0" cellpadding="0" cellspacing="0" class="btn btn-primary" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%; box-sizing: border-box; min-width: 100% !important;" width="100%">
  <tr>
    <td align="center" style="font-family: sans-serif; font-size: 14px; vertical-align: top; padding-bottom: 15px;" valign="top">
      <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: auto;">
        <tr>
          <td style="font-family: sans-serif; font-size: 14px; vertical-align: top; background-color: #EB7035; border-radius: 3px; text-align: center;" valign="top" bgcolor="#EB7035" align="center"> <a href="" target="_blank" style="display: inline-block; color: #ffffff; background-color: #EB7035; border: solid 1px #EB7035; border-radius: 3px; box-sizing: border-box; cursor: pointer; text-decoration: none; font-size: 14px; font-weight: normal; margin: 0; padding: 12px 22px; text-transform: capitalize; border-color: #EB7035;">Take action now</a> </td>
        </tr>
      </table>
    </td>
  </tr>
</table>
       
       
                    
                  </td>
                </tr>
              </table>

            </td>
          </tr>

          <tr>
            <td height="20" style="font-size:20px; line-height:20px;">&nbsp;</td>
          </tr>

        </table>
        <!--[if mso]>
        </td>
        </tr>
        </table>
        <![endif]-->
      </div>
      <!--[if gte mso 9]>
      </v:textbox>
      </v:rect>
      <![endif]-->
    </td>
  </tr>
  <!-- BANNER : END -->

You can add more tables around the button to space it out properly and control it using CSS and media queries on supported devices.

Hope this answers your question.

Hi Syfer, Thanks for fast replying my question. No, you misunderstanding the question. What i trying to say is the roundrect (orange subject) supposely as a background of the white text. However, as you can see the roundrect was overlapping on the white text which i headache now. Please ignore the background-image at the behind. it is not related with question at all. Please help again, Thanks. — Byao, Feb 26 '18 at 22:47
your code is not what it is from the image you loaded. Cant do much if I cant see what i am trying to fix? — Syfer, Feb 27 '18 at 11:02
Syfer, i have already edit the question. Now it should be clearer for the question. As you can see, i have a background image and inside the background image i have another bulletproof button. But the bulletproof button orange subject was overlap to the text. I did tried remove the background image, and surprising the button is fine. It seem the background cause the issue. Do you have any clue on it? — Byao, Feb 27 '18 at 19:57
VML inside a vml will not work. I will let you know in a few hours how to fix it if someone doesn't before me. — Syfer, Feb 27 '18 at 20:00
You cannot nest VML objects like your code is. It will ALWAYS break. Trust me, I found this out the hard way. — scoopzilla, Feb 28 '18 at 00:51
@Syfer the only thing to do is rely on the `background` in CSS and if it breaks, it breaks. — scoopzilla, Feb 28 '18 at 00:52
@scoopzilla i have updated my answer above which i think will solve the issue. You get the button, the background image and functionality as per requirement (with disclaimer for outlook). — Syfer, Feb 28 '18 at 01:23
Hi Syfer, thanks ur great answer. I've found the issue and fix it already in last couple of days But i greatly thanks for your contribute. I will look into your code and learn from it. Thank again. — Byao, Mar 01 '18 at 22:07
Add what you found to be an issue as an answer so everyone facing it can fix it if they face it. — Syfer, Mar 01 '18 at 22:09
It actually similar to what you describe up there. No nest VML object which will always break. — Byao, Mar 01 '18 at 22:16

VML RoundReact overlap on the text

1 Answers1