Solved

remove underline from weblink

Posted on 2008-06-21
8
2,460 Views
Last Modified: 2013-11-19
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
Comment
Question by:gwh2
  • 4
  • 3
8 Comments
 
LVL 14

Expert Comment

by:agriesser
ID: 21837625
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
 
LVL 1

Author Comment

by:gwh2
ID: 21839482
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
 
LVL 14

Expert Comment

by:agriesser
ID: 21840141
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
 
LVL 14

Accepted Solution

by:
agriesser earned 500 total points
ID: 21840147
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
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 
LVL 1

Author Comment

by:gwh2
ID: 21840347
<<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
 
LVL 14

Expert Comment

by:agriesser
ID: 21840644
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
 
LVL 1

Author Closing Comment

by:gwh2
ID: 31469418
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
 

Expert Comment

by:helxis
ID: 26456163
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

Find Ransomware Secrets With All-Source Analysis

Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

Join & Write a Comment

So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

746 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now