23
Views
6
Comments
Solved
How to remove blue underline from (certain) links
Question

I have an application that is sending out e-mails. In the e-mail there are some links which are supposed to have a blue underline, but there is also a button with text in it which is also a link. This specific item should not become underlined in the e-mail. I have tried different options using CSS 'text-decoration: none'. I have applied this to the text, to the link above it in the widget tree, and even added general CSS for links on the whole e-mail.

The outcome is each time that the e-mail looks okay in the Outlook client, but not okay when the e-mail is opened in for instance Outlook webmail, or Hotmail in a browser. Also in Gmail (client) it does not come out right. Even with the general CSS for links (using a:link, a: visited, a: hover and setting all to text decoration:none) the blue underline remains on the link in certain clients and in the browser/webmail. In Outlook all blue underlines are not shown anymore, so the CSS seems to work properly for the Outlook client but not for other clients or webmail.

Is there a solution for this or is it just a fact that this CSS styling just doesn't work for all e-mail clients / browsers?

Many thanks in advance for your time and effort.

Solution

Hello LindaP,


Yes it's correct, CSS applied in links are email client/browser dependent and may behave different. Perhaps it works well with chrome/gmail/outlook so I would like to suggest you to find out if CSS renders properly on browser by inspecting it. This way you can confirm if you are applying CSS in proper place or OS applying it properly.

 Can you plz take your button inside a container and apply the CSS only for that. For your requirements a:link, a:visited is enough to apply(eg below):

Eg : 

  a:link, a:visited {

  background-color: #f44336;

  color: white;

  padding: 14px 25px;

  text-align: center;

  text-decoration: none;

  display: inline-block;

}


Regards,

Sanjay

Hi Linda,

Can you please share you oml with us?

Thanks,

Samiksha

Rank: #1172

Hi Samiksha,


Thank you for your reply.
I can't share my oml with you, since it is not my property.


Best regards,

Linda

Solution

Hello LindaP,


Yes it's correct, CSS applied in links are email client/browser dependent and may behave different. Perhaps it works well with chrome/gmail/outlook so I would like to suggest you to find out if CSS renders properly on browser by inspecting it. This way you can confirm if you are applying CSS in proper place or OS applying it properly.

 Can you plz take your button inside a container and apply the CSS only for that. For your requirements a:link, a:visited is enough to apply(eg below):

Eg : 

  a:link, a:visited {

  background-color: #f44336;

  color: white;

  padding: 14px 25px;

  text-align: center;

  text-decoration: none;

  display: inline-block;

}


Regards,

Sanjay

Rank: #491

Hi,

just add the style or css include thing like this

text-decoration: none;

Hope this help