KR1
Removing Underline from Outlook
Im trying to figure out how to remove the underline from all the hyperlinks in Outlook. text-decoration: none; works on everything else except for Outlook...
KRKRIm trying to figure out how to remove the underline from all the hyperlinks in Outlook. text-decoration: none; works on everything else except for Outlook...
<!--[if (mso)|(mso 16)]>
<style type="text/css">
a {text-decoration: none;}
</style>
<![endif]-->
that works for me just fine, put this in your style
This is also the method that I use. ;)
Dear Kiki,
this one is a common problem in Outlook & OWA. Sadly u have to put
this way (inline) =( Outlook dont suport many things including this one. Here is a full list of css suport accross the web
https://www.campaignmonitor.com/css/
I have been having the same trouble particularly with Outlook Web App, thankfully I came across an answer that worked for me:
display: inline-block
Use this in your style and it should work
While methods described here will work, it is important to consider why you would do this. Links have states: default/link; focus; hover; active; and visited. Each should have appropriate and accessible affordances (plural). Removing an underline from a link is like removing a door handle from a door. If you replace the underline with some other display properties, please ensure that you use more than one and that they are clearly differentiated from surrounding text. Then, test.
One reason to suppress underline: the text is in a button.
I assume you mean the text is in a link that has been styled to appear like a button. In which case, there is absolutely nothing wrong with having both an underline and the bounding area serve as affordances. CSS also has many text-decoration-* properties for some progressive enhancement that has webkit support for the most popular email clients. And again, links (and buttons) are stateful, so different style properties can (and arguably should) be applied in different states.
I tried the if mso-conditional thing & it didn't work properly.
I solved this issue by taking out the text-decoration: underline from within the <a> style attribute and put inside that of the <th>.
Hey you could add internal style specifically for outlook as :
<!--[if (gte mso 9)|(IE)]>
<style type="text/css">
a{
font-weight: normal !important;
text-decoration: none !important;
}
</style>
<![endif]-->
It will work. :)
I think this has been discussed before see the following in case useful:
https://litmus.com/community/discussions/6161-remove-underlines-in-anchors-in-outlook
Hey Kiki,
Sorry to hear about the troubles you're having with your links in Outlook! Which specific versions of Outlook are you having trouble in (2003, 2010, Outlook.com, etc)? This might help us narrow down why this isn't working, since different versions of Outlook use different rendering engines (https://litmus.com/blog/a-guide-to-rendering-differences-in-microsoft-outlook-clients).
We see it in Outlook 2013 and Outlook 2014. :(
I am also having same issue
I largely agree with Charles, removing the underline removes the visual identifier most people expect links to have. Removing this underline also causes an accessibility violation.
To the point on removing the underline so that the link looks like a button, I say. 1st decide if a button or a link is what's truly needed. buttons are used to invoke an action (that isn't just taking users to a new page) Links are used to take users to another page, or section on a page via the anchor tag. Using an anchor link as if it were a button is poor accessibility and bad semantics.
I understand all of that, but sometimes a designer makes something and you just have to code it. And underlines are pretty ugly, which is why you see so many different ways people create links on the web.
There are plenty of ways to make a link look like link without the underline, most of the time it's by using a different colour. Although I accept that isn't very accessible. Making something look like a button surely doesn't break any accessibility rules?