No matter what I try Outlook on Windows adds blue links to my HTML email signature - how can I remove them...
<td style="margin:0;padding:0;padding-left:8px;font-family:Verdana,Tahoma,Arial,sans-serif;white-space:nowrap;font-size:11px;">
Mobile:
<a href="tel:0456666555" style="border:none;text-decoration:none!important;color:#9d9fa2;">
<font color="#9d9fa2">0456 666 555</font>
</a>
</td>
Your example gave me an idea as a solution, and it seems to work for the colour but not the underline.
<td style="margin:0;padding:0;padding-left:8px;font-family:Verdana,Tahoma,Arial,sans-serif;white-space:nowrap;font-size:11px;">
Mobile:
<a href="tel:0456666555" style="border:none;text-decoration:none;color:#9d9fa2;">
<span style="text-decoration:none;color:#9d9fa2;">0456 666 555</span>
</a>
</td>
You wrap the link around a <span>.
On inspecting the signature in Gmail, Outlook strips the link of any styling. So it looks like there is no way around it.
I have found an answer that works for me! I am also amazed it works!
It involves duplicating any styling on the <a> tag and then adding an !important attribute to it.
BOOK NOW
Outlook will strip out the style with !important attribute leaving the regular style, thus no underline. The !important attribute will overrule the web based email clients' default style, thus leaving no underline.
Source
I realise this has been asked many times before so apologies if I'm repeating myself but having followed many other tips on this I'm getting some weird behaviours in Gmail.
If I open the below code in a browser, copy it and then paste it into a Gmail sig (via Settings) the text respects the text-decoration attribute (I'm using the span and !important as advised by other posts).
I can now create/send emails and the styling is respected.
But if I quit Gmail and then log-in again, the text-decoration:none styling is suddenly ignored. The only way to 'repair' is to copy/paste the sig back in again (via Settings).
I'm wondering if something has changed in Gmail as I've been using this sig for a good year or so and it's only recently that I've noticed this behaviour.
Anybody else experienced this (or can see anything wrong with my code)?
<body>
<table width="98%" border="0" cellspacing="0" cellpadding="0" style="font-family:'Lucida Grande','Lucida Sans','Lucida Sans
Unicode';font-size:12px;margin:0px">
<tr>
<td>
<a href="http://maps.google.com?q=Mainframe North" target="_blank" style="text-decoration:none !important;color:rgb(180,180,180);">
<span style="text-decoration:none !important;color:rgb(180,180,180);">
82 Silk Street<br>Manchester M4 6BJ
</span>
</a>
</td>
</tr>
</table>
</body>
Updated code as per comments below:
<table width="98%" border="0" cellspacing="0" cellpadding="0" style="font-family:'Arial';font-size:12px;margin:0px;color:#B4B4B4">
<tr>
<td>
<a href="http://maps.google.com?q=Mainframe North" target="_blank" style="text-decoration:none">
<span style="text-decoration:none;color:#B4B4B4">
82 Silk Street<br>Manchester M4 6BJ
</span>
</a>
</td>
</tr>
</table>
The issue is a bug with Google's fork of Webkit Layout Engine, Blink. When just viewing the Gmail Settings page in Chrome, the "text-decoration:none" style tag is completely removed from your signature permanently.
I found a hack to fix this issue though:
Either paste your HTML signature into Gmail Settings using any other browser,
or do the following:
Right-click the underscored element in your signature and inspect
In the inspection window, add the "text-decoration:none" back into your style attribute
Introduce a text change in the signature like a space so that the "Save Changes" button activates.
Save your changes.
Voila, no more underscores ever (or at least until you change your signature once again).
Use text-decoration: unset;
This issue still exists in Gmail and since most browsers are now Chromium-based, using "another browser" generally presents the exact same issue.
Adding text-decoration: none; via Inspect Element and making a minor change to enable "Save Changes" still works.
Alternatively, use text-decoration: unset; instead and paste the signature into Gmail. Gmail doesn't remove text-decoration: unset; and the signature loads without links underlined.
It seems adding and saving my signature in Gmail via Safari (rather than Chrome) fixed my issue.
I'm trying to create a HTML signature but whatever I try, all my links keep an underline when I send it with Outlook (2007). The strange thing is: When I copy the rendered code (copied from browser to Outlook) it doesn't show any underline. However, once I sent it, it seems all formatting is gone and the underline appears again. If I sent the identical thing from any other client to Outlook this does not happen and it shows correctly.
A few samples of what I've tried:
Link 1<br/>
Link 2<br/>
Link 3<br/>
<span style="text-decoration: none">Link 4</span><br/>
Link 5</br>
<span style="text-decoration:none; text-decoration: none !important">Link 6</span><br/>
<a href="#" style='text-decoration:none;text-underline:none'><span style='text-decoration:none; text-underline:none'>Link 7</span></a><br/>
I'm really out of ideas how to create a clickable link in Outlook that does not has an underline.. Even though 'underline-color:white' is an option. It is not supported by all browsers, which makes it a bit useless.
Any suggestion is welcome!
Via http://devspot.nl/testfile.html you can try all variations yourself.
How it is displayed when copied from Chrome into Outlook:
And how it is displayed when received in Apple Mail (Note: Gmail in Chrome-browser is identical)
WORKING UPDATE
As the CSS method never worked, I suggested the OP to take a look at the link below which shows you how to change the hyperlink styling inside Outlook itself:
http://www.msoutlook.info/question/remove-underline-and-changing-hyperlinks-color
-- NOT WORKING FOR OP --
Try this:
Link
The reason this works is because Outlook strips the !important style, leaving the regular style to do the job.
Try the following:
<a style="color:#E3A216; text-decoration:none;">
<span style="color:#E3A216; text-decoration:none;">
<font color="#E3A216">
Link 1
</font>
</span>
</a>
I've created HTML mailers before, but I just cannot figure out how to remove the text-decoration from a link using inline styles for the Gmail/Yahoo clients. I am getting the link colors the way I want them, but gmail is inserting that ugly blue line under every link. I have tried
link
And
<span style="text-decoration:none">link</span>
I am using the F12 tools to inspect the email, and the inline styles are completely blown away by the email client and don't appear. I have a very basic template with no overriding properties - am I missing something that I need for Gmail?
Your code seems correct, I suspect it's actually the client you're sending the emails FROM that is stripping the code.
Outlook 2013 for example will strip text-decoration:none from anchor tags when sending HTML emails. Try sending your emails from an alternative client and see if you still have issues with the tags being stripped.
Try using the real color code. Not sure if the closing semicolon makes a difference also... This always works for me (in Gmail at least)
click here
On a side note, Gmail is known to break #FFFFFF and #000000 (pure black or white). In that case I use #FFFFF9 and #000001 instead.
Try this:
<a href="link" target="_blank" style="text-decoration:none;">
<span style="color:red;">link</span>
</a>
<td width="110" align="center" valign="top" style="color:#000000;">
<a href="https://example.com" target="_blank"
style="color:#000000; text-decoration:none;">BOOK NOW
</a>
</td>
I used this code to make a link in my HTML email. In browsers and Outlook it's working nicely, but in GMail, Hotmail, and ymail it shows links underlined.
Can anyone help me to get rid of this?
BOOK NOW
Outlook will strip out the style with !important tag leaving the regular style, thus no underline. The !important tag will over rule the web based email clients' default style, thus leaving no underline.
I see this has been answered; however, I feel this link provides appropriate information for what formatting is supported in various email clients.
http://www.campaignmonitor.com/css/
It's worth noting that GMail and Outlook are two of the pickiest to format HTML email for.
After half a day looking into this (and 2 years since this question was opened) I believe I have found a comprehensive answer to this.
<font color="#000000"><span style='text-decoration:none;text-underline:none'>Link</span></font>
(You need the text-underline property on the span inside the link and the font tag to edit the colour)
Use !important in the text decoration rule.
BOOK NOW
Windows Mail seemed to outright ignore inline text-decoration tag but what fixed it for me was by adding this to the head:
<!--[if (mso)|(mso 16)]>
<style type="text/css">
body, table, td, a, span { font-family: Arial, Helvetica, sans-serif !important; }
a {text-decoration: none;}
</style>
<![endif]-->
Another way to fool Gmail (for phone numbers): use a
~ instead of a
-
404-835-9421 --> 404~835~9421
It'll save you (or less savvy users ;-) the trip down html lane.
I found another way to remove links in outlook that i tested so far. if you create a blank class for example in your css say .blank {} and then do the following to your links for example:
<span class="blank" style="text-decoration:none !important;">Search</span>
this worked for me hopefully it will help someone who is still having trouble taking out the underline of links in outlook. If anyone has a workaround for gmail please could you help me tried everything in this thread nothing is working.
Thanks
I think that if you put a span style after the <a> tag with text-decoration:none it will work in the majority of the browsers / email clients.
As in:
<a href="" style="text-decoration:underline">
<span style="color:#0b92ce; text-decoration:none">BANANA</span>
</a>
I added both declarations on the a href which worked in outlook and gmail apps. outlook ignores the !important and gmail needs it. Web versions of email work with both/either.
text-decoration: none !important; text-decoration: none;
To completely "hide" underline for <a> in both mail application and web browser, can do the following tricky way.
<a href="..."><div style="background-color:red;">
<span style="color:red; text-decoration:underline;"><span style="color:white;">BUTTON</span></span>
</div></a>
Color in 1st <span> is the one you don't need, MUST set as same as your background color. (red in here)
Color in 2nd <span> is the one for your button text. (white in here)
Text decoration none was not working for me, then i found an email in outlook that did not have the line and checked the code:
<span style='font-size: 12px; font-family: "Arial","Verdana", "sans-serif"; color: black; text-decoration-line: none;'>
<a href="http://www.test.com" style='font-size: 9.0pt; color: #C69E29; text-decoration: none;'><span>www.test.com</span></a>
</span>
This one is working for me.
I used a combination of not showing links in google, adding links for mso (outlook) and the shy tag, to keep the looks and feels for my company. Some code may be redundant (for my company the looks where more important then the be clickable part. (it felt like a jigsaw, as every change brakes something else)
<td style="color:rgb(69, 54, 53)">
<!--[if gte mso 9]>
<a href="http://www.immothekerfinotheker.be" style="text-decoration:none;">
<span style="text-decoration:none;">
<![endif]-->
www.immothekerfinotheker.be
<!--[if gte mso 9]>
</a>
</span>
<![endif]-->
</td>
Hope this helps someone
All email clients adjust the HTML and the CSS code you provide by
their own rules:
e.g.: gmail removes everything but the inner HTML of the body tag.
1. for most other clients you can have a style-tag in your header
<style type="text/css">
a {text-decoration: none !important;}
</style>
note: don't use CSS comments as YAHOO!Mail might cause trouble.
2. to be on the save side add the same code inline into the A tag as you did and an extra span tag as well (the style rules in a tags get often removed)
<a href="" style="text-decoration: none !important;">
<span style="text-decoration: none !important;">
text
</span>
</a>
It wholly depends on the email client whether it wants to display the underline under the link or not. As of now, the styles in the body are only supported by:
Outlook 2007/10/13 +
Outlook 2000/03
Apple iPhone/iPad
Outlook.com
Apple Mail 4
Yahoo! Mail Beta
http://www.campaignmonitor.com/css/
Use text-decoration:none !important; instead of text-decoration:none; to make sure you "lose" the underline.
Here in http://www.campaignmonitor.com/css/, a nice explanation to say this is restricted! And a pretty nice guide to know all limitations of CSS in email clients.
You can do "redundant styling" and that should fix the issue. You use the same styling you have on the but add it to a that is within the .
Example:
<td width="110" align="center" valign="top" style="color:#000000;">
<a href="https://example.com" target="_blank"
style="color:#000000; text-decoration:none;"><span style="color:#000000; text-decoration:none;">BOOK NOW</span></a>
</td>
While viewing the html email try inspecting the element on that link and see what is overwriting it. Use that class and define it that style again in your head style and define the text-decoration: none !important;
In my case these are the classes that are overwriting my inline style so declared this on the head of my html email and defined the style that I want implemented.
It worked for me, hope it will work on your one too.
.ii a[href]{
text-decoration: none !important;
}
#yiv8915438996 a:link, #yiv8915438996 span.yiv8915438996MsoHyperlink{
text-decoration: none !important;
}
#yiv8915438996 a:visited, #yiv8915438996 span.yiv8915438996MsoHyperlinkFollowed{
text-decoration: none !important;
}
Code like the lines below worked for me in Gmail Web client. A non-underlined black link showed up in the email. I didn't use the nested span tag.
<table>
<tbody>
<tr>
<td>
Peter Blog
</td>
</tr>
</tbody>
</table>
Note: Gmail will strip off any incorrect inline styles. E.g. code like the line below will have its inline styles all stripped off.
Peter Blog
I copied my html page and pasted to word.
Edited the signature in word deleting the spaces where the underline is placed and make my own "padding" presssing space bar.
Copied again and pasted to Outlook 2013.
Worked fine for me.
In Windows 10 Mail, you might need to add these in your html head:
<!--[if (mso)|(mso 16)]>
<style type="text/css">
body, table, td, a, span { font-family: Arial, Helvetica, sans-serif !important; }
a {text-decoration: none;}
</style>
<![endif]-->
The 'a {text-decoration: none;}' fixed the underline problems :)
In my case, I configured the signature (copy and paste in gmail) using Safari. I tried every code you putted here, but those didn´t worked. After you paste the signature using Safari, you can come back to Chrome and the underline is gone.
Using text-decoration: unset; inside the style of the element works for GMAIL
All you have to do is:
<a href="" style="text-decoration:#none; letter-spacing: -999px;">
place your "a href" tag without any styling before div / span of text.
then make your styling in the div/span tag.
for the most restricted styling email client.
<div><a href=""><span style="text-decoration:none">title</span><a/></div>
You should write something like this.
BOOK NOW