please try this approach, as Outlook, and other mail services tend to have problems with text-decoration:none (one can assume it’s because of security concerns)
<a href="mailto:[email protected]" style="color: white;">
<span style="text-decoration:none">[email protected]</span>
</a>
You could try
<a href="mailto:[email protected]" style="color: white;">
<span style="text-decoration:none !important; text-decoration:none;">[email protected]</span>
</a>
The !important tag should rule over the web-based email clients’ default style, thus leaving no underline.
Also, you can find a lot of information about email clients and their behaviour here:
https://www.campaignmonitor.com/css/link-element/link-in-body/
Try on Firefox browser. So open your Gmail account & email.html page on Firefox browser after that follow instructions like Select all (Ctrl+A) and Copy (Ctrl+C) then Paste (Ctrl+V) inside Signature Area. I tested on both devices PC & iPhone so Its working fine without underline.
I hope this trick will solve your problem.
<html>
<style>
a{
text-decoration: none;
text-decoration: none !important;
}
</style>
<body>
<table cellpadding="0" cellspacing="0" style="width: 287; vertical-align: -webkit-baseline-middle; font-family: Courier; background-color:#353535;"><tbody><tr><td style="padding-left:25px; padding-right:25px; padding-bottom:25px; padding-top:25px;"><a href="mailto:[email protected]" style="color:white; text-decoration:none!important; text-decoration: none"><p style="text-decoration: none; margin: 0;">[email protected]</p></a></td></tr></td></tr></tbody>
</table>
</html>I have the simplest html/css code that I’m using for e-mail signatures, and I’m trying to remove the underline from the links. I store the .htm document in the folder where Outlook looks for signatures. It works fine on a PC screen, but when I look at it later in the iPhone (whether it’s in the Outlook app, Mail app or Gmail app), the underlines are there. Here is a sample:
<html>
<body>
<table cellpadding="0" cellspacing="0" style="width: 287; vertical-align: -webkit-baseline-middle; font-family: Courier; background-color:#353535;">
<tbody><tr><td style="padding-left:25px; padding-right:25px; padding-bottom:25px; padding-top:25px; "><a href="mailto:[email protected]" style="color: white; text-decoration: none !important;">[email protected]</a></td></tr>
</td></tr></tbody></table>
</html>What’s so strange is that if I send the .htm document as an attachment, and view it in on the iphone, it works fine (i.e. no underlines), even though I’m using the same e-mail apps to view it as when it’s embedded directly into the e-mail.
As you have probably figured, I’m a total rookie, but I have googled this for days without finding a solution. Appreciate any help!
Edit: I have also tried by setting the color of the underline to the same as the table background (style=”text-decoration-color:#353535″), but the result is the same. It works on PC screen, but not iPhone. The blue underline is extremely persistent!
Have you tried (text-decoration: none;) ?
Yes, that’s precisely what I’m trying.
Does it happen only with Iphone? or any phone?
You can try a trick. 1st you need to save your above html code like
@Koithé, I have only tried iphone so far.
Thanks, but that didn’t help. In fact, with that method, the underline appears even on the PC screen.
It seems to be that the tag inside the tag does not work at all. I wasn’t aware that the !important tag should be added to a separate tag so that it’s repeated with and without it. But anyway, I tried that, both in a element and in the element, and still no luck…
It’s not working for me. Just to be sure, when you’re saying I should paste it into the signature area, do you mean I should create a new signature in Outlook and paste it there? Is the idea that Firefox should rewrite the code into something that’s more robust? If so, what’s the code that you get?