Email template - inconsistent styling | Community
Skip to main content
F
FrizzyBrain
Level 2
June 13, 2023
Solved

Email template - inconsistent styling

  • June 13, 2023
  • 2 replies
  • 2728 views

Hello,

 

I am having issues with developing the same styling for different email clients in a web and desktop app versions. I have tried using conditional css comments to detect and style different email clients but it has not been working. What am I doing wrong?

 

For example, I am changing the border thickness of the button. It's only applied the change on the web version of outlook but not the desktop app.

 

Outlook desktop app:

 

Outlook web:

 

Below is the button html code:

<a href="${CTALinkA5}" style="background-color:${CTABkColorA5};border:5px solid ${CTABorderColorA5};border-radius:12px;color:${CTACopyColorA5};display:inline-block;font-family: 'Montserrat Semi Bold',sans-serif;font-size:18px;line-height:42px; letter-spacing: -0.2px;text-align:center;text-decoration:none;width:${CTAWidthA5}px;-webkit-text-size-adjust:none;mso-hide:all;">${CTACopyA5}</a></div>

 

The conditional comment to target outlook desktop app:

<!--[if mso 16]> <a href="${CTALinkA5}" style="background-color:${CTABkColorA5};border:5px solid ${CTABorderColorA5};border-radius:8px;color:${CTACopyColorA5};display:inline-block;font-family: 'Montserrat Semi Bold',sans-serif;font-size:18px;line-height:42px; letter-spacing: -0.2px;text-align:center;text-decoration:none;width:${CTAWidthA5}px;-webkit-text-size-adjust:none;mso-hide:all;">${CTACopyA5}</a></div> <![endif]-->
This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by Jasbirka

Hi @frizzybrain,

 

Try the below code -

 

 

<table align="center" style="width:${CTAWidthA5}px; margin:0 auto;" border="0" cellspacing="0" cellpadding="0"> <tr> <td align="center" style="background-color:${CTABkColorA5};border:2px solid ${CTABorderColorA5};border-radius:8px;color:${CTACopyColorA5}; font-family:'Montserrat Semi Bold',sans-serif; font-size:18px; line-height: 20px; padding: 13px 17px; letter-spacing: -0.2px; font-weight: 700; text-align: center; vertical-align: middle;"> <a target="_blank" style="color:${CTACopyColorA5}; display:block; -webkit-text-size-adjust:none;text-decoration:none;outline:none;letter-spacing: -0.2px;" href="${CTALinkA5}">${CTACopyA5} </a> </td> </tr> </table>

 

 

Screenshot for the above code - 

 

And, if you want to use the border-radius in Outlook as well, then you have to use the outlook hack code for the same.

 

Let me know if you will still face any issue.

 

Thanks!

Jasbir

2 replies

Dave_Roberts
Dave_Roberts
Level 10
June 14, 2023

Blame Outlook... always blame Outlook 😂
While the rest of the world was working hard at improving it's code base, Microsoft got to work connecting their applications into an ecosystem rather than working on bringing that stuff up to speed... and so, instead of issues with Old Outlook or IE, we've got issues with new Outlook in all kinds of new and exciting ways.

 

The issue here might be the "border" and "border-radius" you're using on the <a> element. Here's a few links to support charts for the "border" and "border-radius" CSS properties where you'll notice both have some issues for Outlook specifically:

 

https://www.caniemail.com/features/css-border/

https://www.caniemail.com/features/css-border-radius/

 

As a solution, you might consider moving the border on to a different element (maybe a <td> parent element)?

F
FrizzyBrainAuthor
Level 2
June 23, 2023

I didn't know Outlook was this unstable with css properties. Unfortunately, moving wrapping the <a> in a <td> (also moving the styles in the <td>) did not work. It ended up displaying another border right next to the button. I will have to wait until Microsoft can fix this at their end.

 

Code:

<td class="blue-btn" style="background-color:${CTABkColorA5};border:2px solid ${CTABorderColorA5};border-radius:8px;color:${CTACopyColorA5};display:inline-block;font-family: 'Montserrat Semi Bold',sans-serif;font-size:18px;line-height:42px; letter-spacing: -0.2px;text-align:center;text-decoration:none;width:${CTAWidthA5}px;-webkit-text-size-adjust:none;mso-hide:all;"> <a href="${CTALinkA5}">${CTACopyA5}</a> </td>

 

Outlook desktop app:

 

I appreciate the suggestion.

 

Jasbirka
JasbirkaAccepted solution
Level 5
June 23, 2023

Hi @frizzybrain,

 

Try the below code -

 

 

<table align="center" style="width:${CTAWidthA5}px; margin:0 auto;" border="0" cellspacing="0" cellpadding="0"> <tr> <td align="center" style="background-color:${CTABkColorA5};border:2px solid ${CTABorderColorA5};border-radius:8px;color:${CTACopyColorA5}; font-family:'Montserrat Semi Bold',sans-serif; font-size:18px; line-height: 20px; padding: 13px 17px; letter-spacing: -0.2px; font-weight: 700; text-align: center; vertical-align: middle;"> <a target="_blank" style="color:${CTACopyColorA5}; display:block; -webkit-text-size-adjust:none;text-decoration:none;outline:none;letter-spacing: -0.2px;" href="${CTALinkA5}">${CTACopyA5} </a> </td> </tr> </table>

 

 

Screenshot for the above code - 

 

And, if you want to use the border-radius in Outlook as well, then you have to use the outlook hack code for the same.

 

Let me know if you will still face any issue.

 

Thanks!

Jasbir

S
SandeepKu4
Level 2
June 16, 2023

<a> in an inline element, which will create an issue on email if the border and other styling are added to it, make sure to wrap the <a> tag in a <td> and give background color and border to the <td> instead of <a> tag.

    Terms & ConditionsAccessibility statement

    Loading footer...