Remove underline from link in e-mail signature on mobile screen with HTML/CSS-CodePudding

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!

CodePudding user response：

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>

CodePudding user response：

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/

CodePudding user response：

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>

CodePudding user response：

What if you use text-decoration: transparent; instead of none