Outlook & VML different view

843 Views Asked by At

The root problem is to display nice button compatible with MSO. As I used VML its working perfectly one pc, and not working an another. The point is environment of both PC is same

Win 10 - Microsoft Outlook ( 16005.13110.41006.0 ) The button source code is

    <!--[if mso]>
    <v:rect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://google.com" style="line-height:28px; height:28px;width:135px; display: inline-block;" stroked="False" fillcolor="#468fb0">
        <center style="color: #ffffff; font-size: 11px;">
            CENTER
        </center>
    </v:rect>
    <![endif]-->

At mine it looks nice enter image description here

In other PC enter image description here

So

  • Sizes are less in both dimensions
  • No text inside
  • Button is clickable

I tried different combination of VML/HTML tags, but it always the same - width&height ignored, and inner text is missing at all

If save emails as EML file and compare - its the same Any suggestions what can be trigger this styling?

Other links and styles working properly btw. Thanks

2

There are 2 best solutions below

1
On BEST ANSWER

Ok, it was a weird but The problem was in pixels ( maybe screen resolution related? ) Every size with px was less. Solved with replace sizes to pt

2
On

I noticed Campaign Monitor's 'bullet proof button' has this <w:anchorlock/> before the <center> which appears to function as an internal mechanism to stop anchors (links) from being modified. Maybe that's it?

I.e.

<!--[if mso]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://google.com" style="line-height:28px; height:28px;width:135px; display: inline-block;" stroked="False" fillcolor="#468fb0">
<w:anchorlock/>
    <center style="color: #ffffff; font-size: 11px;">
        CENTER
    </center>
</v:rect>
<![endif]-->