Problem css notification outlook

[aaaadrian]

Hi,

I created an e-mail notification to send approver. I added two button (one button to approve other button to reject request).

The problem is my button doesn't show in outlook when i receive notification. The buttons show correctly in servicenow when i click on "Preview notification"

I think the problem is about CSS.

Could you help me ?

I attached some snapshot and html code for buttons.

<div><!-- [if mso]><span id="CmCaReT"></span>
   <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="${mail_script:approval_link_[TEST]}" style="height:40px;v-text-anchor:middle;width:200px;" arcsize="10%" strokecolor="#000000" fillcolor="#28b82d">
       <w:anchorlock/>
       <center style="color:#ffffff;font-family:sans-serif;font-size:13px;font-weight:bold;">Click here to approve</center>
   </v:roundrect>
<![endif]--> <a style="background-color: #28b82d; border: 1px solid #000000; border-radius: 4px; color: #ffffff; display: inline-block; font-family: sans-serif; font-size: 13px; font-weight: bold; line-height: 40px; text-align: center; text-decoration: none; width: 200px; -webkit-text-size-adjust: none; mso-hide: all;" href="${mail_script:approval_link_[TEST]}">Click here to approve</a> <!-- [if mso]>
   <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="${mail_script:reject_link_[TEST]}" style="height:40px;v-text-anchor:middle;width:200px;" arcsize="10%" strokecolor="#000000" fillcolor="#b82839">
       <w:anchorlock/>
       <center style="color:#ffffff;font-family:sans-serif;font-size:13px;font-weight:bold;">Click here to reject</center>
   </v:roundrect>
<![endif]--> <a style="background-color: #b82839; border: 1px solid #000000; border-radius: 4px; color: #ffffff; display: inline-block; font-family: sans-serif; font-size: 13px; font-weight: bold; line-height: 40px; text-align: center; text-decoration: none; width: 200px; -webkit-text-size-adjust: none; mso-hide: all;" href="${mail_script:reject_link_[TEST]}">Click here to reject</a></div>

In my outlook no button displayed.

[Jan Fr_hlich]

I've found an easy workaround for this. Just add ${} where unwanted spaces appear, this will prevent it from happening:

<!--${}[if mso]>

[Brandon R1]

Thanks for that tip on how it is affected even in Orlando.

For creating buttons, I've been using the scripting from the following posting and it's worked every time:

https://community.servicenow.com/community?id=community_question&sys_id=5a2187e5db98dbc01dcaf3231f96...

I've even used the scripting from the link above with CSS Button Generator and it looks as expected in Outlook.

Brandon

[Chirag A]

I faced the same issue last week and after multiple efforts ended with this successfull way to get rid off the "CmCaReT" span tag.

1) Take full HTML + CSS code into some local editor like notepad.

2) Remove those unwanted "CmCaReT" span tags; and make you necessary changes for all CSS / styles in notepad itself.

3) Copy full Code back to the Servicenow HTML editor. And save it.

This will not put the "CmCaReT" tags back in there.

Thanks

Chirag A

Snow Developer at Aavenir

[zee15]

I am facing the same issue i create two approve reject button using html CSS those buttons are working as expected on outlook web and mobile app but not working on desktop outlook.

this is code of those button which i have written in email script:

template.print('<a href="'+approvalURL+'" style="background-color: #388e3c; border: none; color: white; padding: 11px 12px; text-align: center; text-decoration: none; display: inline-block; font-size: 14px; margin: 4px 2px; cursor: pointer; width: 55px; height: 20px; border-radius: 12px;">Approve</a>');

template.print('<a href="'+rejectionURL+'" style="background-color: #f44336; border: none; color: white; padding: 11px 12px; text-align: center; text-decoration: none; display: inline-block; font-size: 14px; margin: 4px 2px; cursor: pointer; width: 55px; height: 20px; border-radius: 12px;">Reject</a>');

 The first image of outlook web which is working as expected and the second image of desktop outlook where CSS is not working.

Please help me out how we can do it.