How to remove hyperlink link in Gmail when sending email template from Outlook
Today there is a new issue when sending mail from Outlook to Gmail. The problem is the hyperlink element is showing as an underline. I've tried below.
Method 1:
<td width="500px" align="center" style=" text-align: left; font-size:1.2em; font-family:Candara; color: #FFFFFF;">
<a href="mailto:info@example.com" style="color:#fff;text-decoration:none;" target="_blank">info@xxx.com</a>
</td>
method 2:
<a href="mailto:info@example.com" style="color:#fff;text-decoration:none !important;" target="_blank">info@ccc.com</a>
method 3:
a {text-decoration: none !important; color: #000; cursor: text;}
This code works fine in browser, Outlook, and the problem is with the Gmail inbox. Because the Gmail add range tag after the dynamic hyperlink tag dynamically.
Here I am attaching a video link:
Considering: text-decoration, none of these are taken in the gmail field due to the addition of the tag inside the span tag.
Complete code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>mailtest</title>
</head>
<body style="margin:0; padding:0;">
<table width="582" border="0" cellspacing="0" cellpadding="0" align="center" style="background:black;">
<tr>
<td width="500px" align="center" style=" text-align: left; font-size:1.2em; font-family:Candara; color: #FFFFFF;">
<img style="margin-left:10px;" src="http://codestrz.com/Content/mail/envelope.png" alt="" border="0" height="18" width="18"/>
<a href="mailto:info@example.com" style="color:#fff;text-decoration:none" target="_blank">info@xxx.com</a>
</td>
</tr>
</table>
</body>
</html>
I've tried this simple tag:
<p style="color:white;"> EXTRANET.EXAMPLE.COM</p>
After that tried a simple tag with no link,
Output in Outlook 2012 
:
[![enter code here][1]][1]
gmail exit
source to share
Try this
<a href='yourLink' bgcolor="#000000">yourLinkHere</a>
or
<a href="yourLink" style="color:#CCCCCC; text-decoration:none;"><color="#CCCCCC">yourLink</font></a>
For Outlook 2007 version,
- press CTRL + SHIFT + ALT + S
- Right-click the Hyperlink entry in the Styles and Formatting panel and select Modify
- Change the font settings for your hyperlink. (remove underline)
Here it is, To change it for all new posts created
- enable option (radio button): new documents based on this template
source to share
This is how I solved it (2 years later).
Gmail removes associated classes (so you can't add one text-decoration:none
using them) and text-decoration:none
inline styling like the OP mentioned in the video. And automatically surrounds the link text <span>
, which also does not have text-decoration
and cannot inherit this style, because it was removed earlier ...
To solve this problem, I added <style>
inside the HEAD tag (this is important for email compatibility):
<head>
<style>
td a { text-decoration: none;}
</style>
</head>
By adding this, the element will <a>
apply the text decoration:
<a href="mailto:info@example.com" style="color:#fff;text-decoration:none" target="_blank">info@xxx.com</a>
Keep in mind that the property is color
not removed by gmail, so you only need to style text-decoration
in <style>
.
The element <span>
that Gmail adds will inherit this text-decoration
.
And it works when submitting to outlook too.
Hope it helps.
source to share