Solved

remove underline from weblink

Posted on 2008-06-21
8
2,520 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
Independent Software Vendors: 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!

 
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
 
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

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Preface This is the third article about the EE Collaborative Login Project. A Better Website Login System (http://www.experts-exchange.com/A_2902.html) introduces the Login System and shows how to implement a login page. The EE Collaborative Logi…
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
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)

726 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