?
Solved

remove underline from weblink

Posted on 2008-06-21
8
Medium Priority
?
2,580 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
WordPress Tutorial 4: Recommended Plugins

Now that you have WordPress installed, understand the interface, and know how to install new parts, let’s take a look at our recommended plugins.

 
LVL 14

Accepted Solution

by:
agriesser earned 2000 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

Optimize your web performance

What's in the eBook?
- Full list of reasons for poor performance
- Ultimate measures to speed things up
- Primary web monitoring types
- KPIs you should be monitoring in order to increase your ROI

Question has a verified solution.

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

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…
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
Suggested Courses

762 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