Search code examples
emailoutlookhtml-emailvmloutlook-2016

Outlook 2016 VML width issue

This is first question so please be gentle :-)

I am in charge of creating surveys which is sent as an email invite to users. Recently I created a 10 point scale for users on an email where they click on a number of their choice and it takes them to the survey.

Problem: The VML i have placed for outlooks is causing issues. Below is the screenshot of how it looks. The scale starts at 0 and is supposed to end at 10 but Outlook 2016 is showing only 1 rather than 10.

Outlook 2016 showing 1 rather than 10

What i have tried:

  • I tested this email through Litmus and it showed everything properly
  • I tried to increase the width of the table in VML to see if it fixes it but it didn't work.
  • I have outlook 2016 (Office 365) and i don't see this issue.

Code snippet for the whole table:

<table border="0" cellspacing="0" cellpadding="0" style="width:100%; max-width: 552px;">
<tbody>
<tr>
<td width="9%" align="center" valign="top" class="selectors">
<!-- answer for Q Zero -->												      
<!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="0" style="height:40px;v-text-anchor:middle;width:45px; text-align:center;" arcsize="10%" strokecolor="#ec00Bc"  fillcolor="#ec00Bc" onmouseover='this.fillcolor="#0088cc"'>
<w:anchorlock/>
<center style="color:#ffffff;font-family:sans-serif;font-size:16px;font-weight:bold;">
0
</center>
</v:roundrect>
<![endif]-->

<!--[if !mso]><!-->
<a href="0" target="_blank" class="button_link" style="width:90%;padding:8px 0px;display: inline-block;text-decoration: none;border:0;text-align: center;font-weight: bold;font-size: 15px;font-family: sans-serif;color: #ffffff;background: #ec00Bc;border: 1px solid #ec00Bc;-moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px;line-height:17px;">
0
</a>   
<!--><![endif]-->

</td>
<td width="9%" align="center" valign="top" class="selectors">
<!-- answer for Q1 -->												      
<!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="1" style="height:40px;v-text-anchor:middle;width:45px; text-align:center;" arcsize="10%" strokecolor="#ec00Bc"  fillcolor="#ec00Bc" onmouseover='this.fillcolor="#0088cc"'>
<w:anchorlock/>
<center style="color:#ffffff;font-family:sans-serif;font-size:16px;font-weight:bold;">
1
</center>
</v:roundrect>
<![endif]-->

<!--[if !mso]><!-->
<a href="1" target="_blank" class="button_link" style="width:90%;padding:8px 0px;display: inline-block;text-decoration: none;border:0;text-align: center;font-weight: bold;font-size: 15px;font-family: sans-serif;color: #ffffff;background: #ec00Bc;border: 1px solid #ec00Bc;-moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px;line-height:17px;">
1
</a>   
<!--><![endif]-->

</td>
<td width="9%" align="center" valign="top" class="selectors">
<!-- answer for Q2 -->												      
<!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="2" style="height:40px;v-text-anchor:middle;width:45px; text-align:center;" arcsize="10%" strokecolor="#ec00Bc"  fillcolor="#ec00Bc" onmouseover='this.fillcolor="#0088cc"'>
<w:anchorlock/>
<center style="color:#ffffff;font-family:sans-serif;font-size:16px;font-weight:bold;">
2
</center>
</v:roundrect>
<![endif]-->

<!--[if !mso]><!-->
<a href="2" target="_blank" class="button_link" style="width:90%;padding:8px 0px;display: inline-block;text-decoration: none;border:0;text-align: center;font-weight: bold;font-size: 15px;font-family: sans-serif;color: #ffffff;background: #ec00Bc;border: 1px solid #ec00Bc;-moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px;line-height:17px;">
2
</a>   
<!--><![endif]-->

</td>
<td width="9%" align="center" valign="top" class="selectors">
<!-- answer for Q3 -->												      
<!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="3" style="height:40px;v-text-anchor:middle;width:45px; text-align:center;" arcsize="10%" strokecolor="#ec00Bc"  fillcolor="#ec00Bc" onmouseover='this.fillcolor="#0088cc"'>
<w:anchorlock/>
<center style="color:#ffffff;font-family:sans-serif;font-size:16px;font-weight:bold;">
3
</center>
</v:roundrect>
<![endif]-->

<!--[if !mso]><!-->
<a href="3" target="_blank" class="button_link" style="width:90%;padding:8px 0px;display: inline-block;text-decoration: none;border:0;text-align: center;font-weight: bold;font-size: 15px;font-family: sans-serif;color: #ffffff;background: #ec00Bc;border: 1px solid #ec00Bc;-moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px;line-height:17px;">
3
</a>   
<!--><![endif]-->

</td>
<td width="9%" align="center" valign="top" class="selectors">
<!-- answer for Q4 -->												      
<!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="4" style="height:40px;v-text-anchor:middle;width:45px; text-align:center;" arcsize="10%" strokecolor="#ec00Bc"  fillcolor="#ec00Bc" onmouseover='this.fillcolor="#0088cc"'>
<w:anchorlock/>
<center style="color:#ffffff;font-family:sans-serif;font-size:16px;font-weight:bold;">
4
</center>
</v:roundrect>
<![endif]-->

<!--[if !mso]><!-->
<a href="4" target="_blank" class="button_link" style="width:90%;padding:8px 0px;display: inline-block;text-decoration: none;border:0;text-align: center;font-weight: bold;font-size: 15px;font-family: sans-serif;color: #ffffff;background: #ec00Bc;border: 1px solid #ec00Bc;-moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px;line-height:17px;">
4
</a>   
<!--><![endif]-->

</td>
<td width="9%" align="center" valign="top" class="selectors">
<!-- answer for Q5 -->												      
<!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="5" style="height:40px;v-text-anchor:middle;width:45px; text-align:center;" arcsize="10%" strokecolor="#ec00Bc"  fillcolor="#ec00Bc" onmouseover='this.fillcolor="#0088cc"'>
<w:anchorlock/>
<center style="color:#ffffff;font-family:sans-serif;font-size:16px;font-weight:bold;">
5
</center>
</v:roundrect>
<![endif]-->

<!--[if !mso]><!-->
<a href="5" target="_blank" class="button_link" style="width:90%;padding:8px 0px;display: inline-block;text-decoration: none;border:0;text-align: center;font-weight: bold;font-size: 15px;font-family: sans-serif;color: #ffffff;background: #ec00Bc;border: 1px solid #ec00Bc;-moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px;line-height:17px;">
5
</a>   
<!--><![endif]-->

</td>
<td width="9%" align="center" valign="top" class="selectors">
<!-- answer for Q6 -->												      
<!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="6" style="height:40px;v-text-anchor:middle;width:45px; text-align:center;" arcsize="10%" strokecolor="#ec00Bc"  fillcolor="#ec00Bc" onmouseover='this.fillcolor="#0088cc"'>
<w:anchorlock/>
<center style="color:#ffffff;font-family:sans-serif;font-size:16px;font-weight:bold;">
6
</center>
</v:roundrect>
<![endif]-->

<!--[if !mso]><!-->
<a href="6" target="_blank" class="button_link" style="width:90%;padding:8px 0px;display: inline-block;text-decoration: none;border:0;text-align: center;font-weight: bold;font-size: 15px;font-family: sans-serif;color: #ffffff;background: #ec00Bc;border: 1px solid #ec00Bc;-moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px;line-height:17px;">
6
</a>   
<!--><![endif]-->

</td>
<td width="9%" align="center" valign="top" class="selectors">
<!-- answer for Q7 -->												      
<!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="7" style="height:40px;v-text-anchor:middle;width:45px; text-align:center;" arcsize="10%" strokecolor="#ec00Bc"  fillcolor="#ec00Bc" onmouseover='this.fillcolor="#0088cc"'>
<w:anchorlock/>
<center style="color:#ffffff;font-family:sans-serif;font-size:16px;font-weight:bold;">
7
</center>
</v:roundrect>
<![endif]-->

<!--[if !mso]><!-->
<a href="7" target="_blank" class="button_link" style="width:90%;padding:8px 0px;display: inline-block;text-decoration: none;border:0;text-align: center;font-weight: bold;font-size: 15px;font-family: sans-serif;color: #ffffff;background: #ec00Bc;border: 1px solid #ec00Bc;-moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px;line-height:17px;">
7
</a>   
<!--><![endif]-->

</td>
<td width="9%" align="center" valign="top" class="selectors">
<!-- answer for Q8 -->												      
<!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="8" style="height:40px;v-text-anchor:middle;width:45px; text-align:center;" arcsize="10%" strokecolor="#ec00Bc"  fillcolor="#ec00Bc" onmouseover='this.fillcolor="#0088cc"'>
<w:anchorlock/>
<center style="color:#ffffff;font-family:sans-serif;font-size:16px;font-weight:bold;">
8
</center>
</v:roundrect>
<![endif]-->

<!--[if !mso]><!-->
<a href="8" target="_blank" class="button_link" style="width:90%;padding:8px 0px;display: inline-block;text-decoration: none;border:0;text-align: center;font-weight: bold;font-size: 15px;font-family: sans-serif;color: #ffffff;background: #ec00Bc;border: 1px solid #ec00Bc;-moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px;line-height:17px;">
8
</a>   
<!--><![endif]-->

</td>
<td width="9%" align="center" valign="top" class="selectors">
<!-- answer for Q9 -->												      
<!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="9" style="height:40px;v-text-anchor:middle;width:45px; text-align:center;" arcsize="10%" strokecolor="#ec00Bc"  fillcolor="#ec00Bc" onmouseover='this.fillcolor="#0088cc"'>
<w:anchorlock/>
<center style="color:#ffffff;font-family:sans-serif;font-size:16px;font-weight:bold;">
9
</center>
</v:roundrect>
<![endif]-->

<!--[if !mso]><!-->
<a href="9" target="_blank" class="button_link" style="width:90%;padding:8px 0px;display: inline-block;text-decoration: none;border:0;text-align: center;font-weight: bold;font-size: 15px;font-family: sans-serif;color: #ffffff;background: #ec00Bc;border: 1px solid #ec00Bc;-moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px;line-height:17px;">
9
</a>   
<!--><![endif]-->

</td>
<td width="9%" align="center" valign="top" class="selectors">
<!-- answer for Q10 -->												      
<!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="10" style="height:40px;v-text-anchor:middle;width:45px; text-align:center;" arcsize="10%" strokecolor="#ec00Bc"  fillcolor="#ec00Bc" onmouseover='this.fillcolor="#0088cc"'>
<w:anchorlock/>
<center style="color:#ffffff;font-family:sans-serif;font-size:16px;font-weight:bold;">
10
</center>
</v:roundrect>
<![endif]-->

<!--[if !mso]><!-->
<a href="10" target="_blank" class="button_link" style="width:90%;padding:8px 0px;display: inline-block;text-decoration: none;border:0;text-align: center;font-weight: bold;font-size: 15px;font-family: sans-serif;color: #ffffff;background: #ec00Bc;border: 1px solid #ec00Bc;-moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px;line-height:17px;">
10
</a>   
<!--><![endif]-->

</td>
</tr>
</tbody>
</table>

Has anyone encountered this issue and have found a fix?

Looking forward to your replies/comments.

Cheers

Solution

  • First of all the screenshot provided doesn't correspond to the code snippet you have provided. Some styles from your "grey" table are overwrites the styles of the elements of the table, snippet of which you have provided. This is exactly why you cannot find your mistake ... you are looking at the part of the whole picture and surprise yourself why it works in Litmus (I even don't know what is this) and doesn't under Outlook. But, let's get to the point of the question.

    Has anyone encountered this issue and have found a fix?

    I inserted your code from snippet into the HTML body of my test message and it was looking fine as you mention it. All numbers were displayed properly (on the white background through as you provided just the part of HTML).

    Next I set for one of the cell the number with more digits (4 digits "1056") than you expect (you are expecting a maximum of 2 digits). The code (part of it) I have inserted this time was ...

    <td width="9%" align="center" valign="top" class="selectors">
<!-- answer for Q10 -->                                                   
<!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="10" style="height:40px;v-text-anchor:middle;width:45px; text-align:center;" arcsize="10%" strokecolor="#ec00Bc"  fillcolor="#ec00Bc" onmouseover='this.fillcolor="#0088cc"'>
<w:anchorlock/>
<center style="color:#ffffff;font-family:sans-serif;font-size:16px;font-weight:bold;">
1056
</center>
</v:roundrect>
<![endif]-->

<!--[if !mso]><!-->
<a href="10" target="_blank" class="button_link" style="width:90%;padding:8px 0px;display: inline-block;text-decoration: none;border:0;text-align: center;font-weight: bold;font-size: 15px;font-family: sans-serif;color: #ffffff;background: #ec00Bc;border: 1px solid #ec00Bc;-moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px;line-height:17px;">
10
</a>   
<!--><![endif]-->

</td>

    The result as I expected looks like ... enter image description here

    You already noticed the digits don't fit the width of the cell and wrap underneath. This is exactly what's happening with your "10" becoming "1": the digit "0" doesn't fit into the cell of the screenshot provided and wraps under. You don't see it because of some style from the parent table you didn't provide code for.

    And finally how to fix it ... As long as I increase width of the cell (to 90px in my case):

    <v:roundrect xmlns:v='urn:schemas-microsoft-com:vml' xmlns:w='urn:schemas-microsoft-com:office:word' href='10' style='height:40px;v-text-anchor:middle;width:90px; text-align:center;' arcsize='10%' strokecolor='#ec00Bc'  fillcolor='#ec00Bc'>

    I able to see entire number in one line again ... enter image description here

    You need to make sure the width of each cell has enough width to fit 2 digits and not overridden by the styles from parent elements.