[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 2637
  • Last Modified:

remove underline from weblink

Hi everyone,

I've created an email signature and have found that certain email clients are displaying the web address link with an underline even though I've specified in the inline css for there to be no text decoration as follows:

<a href="http://www.webaddress.net.au" style="color: #000; text-decoration: none;">www.webaddress.net.au</a><br />

These are the email clients that won't render correctly:

Thunderbird (mac and win), Apple Mail, Gmail (mac), Yahoo (mac)

I wonder if someone knows I can get this underline to disappear?

Appreciate any help.


<td valign="top" style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; text-align:left; color:#000; margin: 0 !important; padding-top: 5px; line-height: 19px;">Address goes here<br />
    <span style="color: #000; font-weight:bold">T: </span>9327 XXXX <span style="color: #e5ae51; font-weight:bold">&nbsp;|&nbsp;</span> <span style="color: #000; font-weight:bold">F:</span> 9328 XXXX  <span style="color: #e5ae51; font-weight:bold">&nbsp;|&nbsp;</span> <span style="color: #000; font-weight:bold">W:</span> <a href="http://www.webaddress.net.au" style="color: #000; text-decoration: none;">www.webaddress.net.au</a><br />

Open in new window

0
gwh2
Asked:
gwh2
  • 4
  • 3
1 Solution
 
agriesserCommented:
It's up to the browser and the mail client how to display links in signatures and e-mails. Some of them (you mentioned thunderbird above) do underline _EVERY_ hyperlink they can find in an e-mail message, even if you chose to display the mail in plain text mode (no markup at all).

There's nothing wrong with your CSS, but I think that it doesn't get rendered correctly by the clients, so you're probably out of luck there (some clients even use their own stylesheets for displaying signatures and mail content...).

But you could try to add a designated style section to your signature, like shown in the code snippet below by either overruling the <a> tag at all (method #1) or by defining a separate link class (method #2).

Using method #1, change the link line from

<a href="..." style="color: #000; text-decoration: none">...</a>

to

<a href="...">...</a>

Using method #2 you have to change the line

<a href="..." style="color: #000; text-decoration: none">...</a>

to

<a class="nounderline" href="..."></a>
<style type="text/css">
 
/* method #1 */
a {
  color: #000;
  text-decoration: none;
}
 
/* method #2 */
a.nounderline {
  color: #000;
  text-decoration: none;
}
</style>

Open in new window

0
 
gwh2Author Commented:
Thanks for the reply,

I tried your suggestion of method 2 with the class but had no luck. I even tried adding !important after the text-decoration: none; line but this made no difference. It seems that the email clients listed above won't give up that line. It just seems really weird though that it's only on the mac side that Gmail and Yahoo keep the line - windows is fine. Do yo know why that is?
0
 
agriesserCommented:
The use of !important is not standardized, so browsers may or even may not adhere to this option.
If you say that it's only on the MAC it probably has something todo with Safari?

I tried to reproduce this issue on my PC but wasn't successful (see attached screenshot).
I created a HTML e-mail with Thunderbird, added your code above as signature and sent it to my gmail account.
The strange thing is, that Safari and Firefox both show the signature correctly (without the underline), but Thunderbird itself ignores the style when composing new mail.

I guess you're out of luck here. Even if it's possible to set some options in Safari, Thunderbird, whatever to display the link style correctly, the people you're sending mail too probably don't want to change their browser/MUA settings just to see your link styles correctly :)
scrshots.png
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
agriesserCommented:
JFYI: On my iphone (which is MacOSX of course and has Mobile safari on it) it renders correctly too.
Maybe there's something with your mail client?

If you want, I could try to send this mail to you too (just tell me your mail address, mine should be obvious now if you don't want to post it in here).
Maybe it's even a problem with your MUA that sends the mail in a wrong format or the like.
0
 
gwh2Author Commented:
<<If you say that it's only on the MAC it probably has something to do with Safari?>>

I thought that this may have been the case but I've just used Firefox on my mac to check the email in Gmail and it's still underlining it. If I check the same Gmail email in Internet Explorer 7 on a pc the underline isn't there.


<<I tried to reproduce this issue on my PC but wasn't successful (see attached screenshot).
I created a HTML e-mail with Thunderbird, added your code above as signature and sent it to my gmail account. The strange thing is, that Safari and Firefox both show the signature correctly (without the underline), but Thunderbird itself ignores the style when composing new mail.>>

Since Safari and Firefox on a PC are rendering correctly (no underline) then that matches what I'm experiencing, ie. I mentioned that all the webmail clients on the PC are NOT displaying the underline. With regard to Thunderbird, it's adding the underlining on both the mac and the pc so maybe this is just one email client that I'll just have to live with.


<<JFYI: On my iphone (which is MacOSX of course and has Mobile safari on it) it renders correctly too.
Maybe there's something with your mail client?>>

You were saying that you sent the email from Thunderbird. I'm sending the email from Outlook 2007 on a PC so maybe that is causing the problem. I've stored the .htm file (that I created in Dreamweaver) in the signatures folder at this file path:

C:\Users\<username>\AppData\Roaming\Microsoft\Signatures

...so I'm able to create the html email this way. I'd like to be able to send a test email from Thunderbird but I don't know where to store the .htm file and use it as the signature in the email. As a last resort can you show me how to do this with Thunderbird?
0
 
agriesserCommented:
I attached two screenshots that show how to set up thunderbird to use this signature.
Unfortunately, I don't know what the menu items are labeled in english, but I guess it's "Tools" -> "Email Accounts".

Then in the general e-mail account configuration check "Add this file as signature" and browser for your .htm file.
The next step is to click on "Composing options" (if that's the correct translation) and check "Send mail as HTML".
screen1.png
screen2.png
0
 
gwh2Author Commented:
I wasn't able to test on Thunderbird as the email wouldn't send for some reason, however I tested by sending from Windows Mail and all the underlines were not there in the webmail clients, so clearly it must be a problem with Outlook 2007 that's causing the problem.

So thanks so much for the help troubleshooting.
0
 
helxisCommented:
I am having this same issue. I use a custom html signature in outlook 2007. When the email is sent to Mail.app on the mac the links, which I set up in CSS to be not underlined, are underlined on with a blue line. When I send from outlook 2007 to a pc based email client the underline isn't there. Also, when I use the same signatures in mail.app, there is no underline in any client.
0

Featured Post

New feature and membership benefit!

New feature! Upgrade and increase expert visibility of your issues with Priority Questions.

  • 4
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now