CODEWITHSUNDEEP
htmlcssemailoutlooktext-decorations
Sander Schaeffer
Sander Schaeffer

Reputation: 2827

How do you remove link underlines in Outlook?

I'm trying to create a HTML signature but whatever I try, all my links keep an underline when I send it with Outlook (2007). The strange thing is: When I copy the rendered code (copied from browser to Outlook) it doesn't show any underline. However, once I sent it, it seems all formatting is gone and the underline appears again. If I sent the identical thing from any other client to Outlook this does not happen and it shows correctly.

A few samples of what I've tried:

<a href="#" style="border-style:none;text-decoration:none;">Link 1</a><br/>
<a href="#" style="border-style:none!important;text-decoration:none!important;">Link 2</a><br/>
<a href="#" style="text-decoration:none !important; text-decoration: none">Link 3</a><br/>
<a href="#" style="text-decoration: none"><span style="text-decoration: none">Link 4</span></a><br/>
<a href="#" style="text-decoration:none">Link 5</a></br>
<a href="#" style="text-decoration:none; text-decoration: none !important"><span style="text-decoration:none; text-decoration: none !important">Link 6</span></a><br/>
<a href="#" style='text-decoration:none;text-underline:none'><span style='text-decoration:none; text-underline:none'>Link 7</span></a><br/>

I'm really out of ideas how to create a clickable link in Outlook that does not has an underline.. Even though 'underline-color:white' is an option. It is not supported by all browsers, which makes it a bit useless.

Any suggestion is welcome!

Via http://devspot.nl/testfile.html you can try all variations yourself.

How it is displayed when copied from Chrome into Outlook:

enter image description here

And how it is displayed when received in Apple Mail (Note: Gmail in Chrome-browser is identical)

enter image description here

Upvotes: 7

Views: 16114

Answers (2)

Madness
Madness

Reputation: 638

WORKING UPDATE

As the CSS method never worked, I suggested the OP to take a look at the link below which shows you how to change the hyperlink styling inside Outlook itself:

http://www.msoutlook.info/question/remove-underline-and-changing-hyperlinks-color

-- NOT WORKING FOR OP --

Try this:

<a href="#" style="text-decoration:none !important; text-decoration:none;">Link</a>

The reason this works is because Outlook strips the !important style, leaving the regular style to do the job.

Upvotes: 7

Saravanakumar
Saravanakumar

Reputation: 28

Try the following:

<a style="color:#E3A216; text-decoration:none;">
  <span style="color:#E3A216; text-decoration:none;">
    <font color="#E3A216">
      Link 1
    </font>
  </span>
</a>

Upvotes: 0

Related Questions