Microsoft Outlook (MSO) Email Button Formatting Issue (Only on PC)

Question

Originally posted by Unknown

The Crossing Church wants to fix an email formatting issue with action buttons that only seems to get cutoff in Microsoft Outlook on PC in some versions. See attached screenshot below.

Answer 1

Originally posted by Unknown

To fix this, you will need to edit the buttons within the Rock "Button HTML" define type (/admin/general/defined-types/44). Edit any of the buttons and look for this code within the email HTML field:

<!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="{{ ButtonLink }}" style="height:38px;v-text-anchor:middle;width:175px;" arcsize="11%" strokecolor="#adadad" fillcolor="#e6e6e6">
    <w:anchorlock/>
    <center style="color:#333333;font-family:sans-serif;font-size:13px;font-weight:normal;">{{ ButtonText }}</center>
</v:roundrect>
<![endif]-->

The code between [if mso] is what tells MSO to style the buttons differently than any other email client. So as a fix – we can increase the width and the height (in v:roundrect to width:225px;height:50px;), and then decrease the font size on the center element to font-size:8px.

As a result, it should look similar to below:

Comments

For some still unknown reason emails will look differently in same version of Outlook (on PC) on different machines. In testing on both systems, we found that changing font-size of buttons from 8px to 9px provided the best balance between the two systems.