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>
Related
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 have a simple website, as I'm a beginner programmer. I inserted a <p> tag, which worked all fine and dandy. There was two words in the paragraph which I wanted to link to a different page on my website, and it decided it didn't want to work. I don't know why it didn't work, because I have <div> tags in the same document to the same page that were working fine.
Edit: To define what wasn't working: It wasn't clickable. It changed color, like a normal hyperlink tag should, but was just a piece of text. You just couldn't click it. Even tags with an invalid or nonexistent href should be clickable. Right? Maybe I'm wrong, again, I am a beginner.
The other strange thing was that in my CSS file, I had the text-decoration set to none, so it shouldn't have changed color in the first place.
CSS:
a{
text-decoration:none;
}
This is the HTML that I had an issue with:
<p id="p1">Ingsoc is the Newspeak word for English Socialism. (For more on Newspeak, see the Ministry of Truth page.)</p>
And here's an example of a link with the same destination that worked just fine:
<a href="TruthPage.html">
<div id="minitrue">Ministry of Truth</div>
</a>
Instead of
<a href="DifferentPage.html">
try
<a href="http://www.yoursite.com/folderpath/DifferentPage.html">
where 'yoursite.com' and 'folderpath' are changed to match your situation.
The code looks ok to me. You could try...
<p />
<div>This is just basic text that was doing what it was supposed to. This was the text that I wanted to link to a different page.
</div>
if it's working within a div tag
Your problem is that your href="DifferentPage.html" is not vailid. My suggestion is to open that other page on your site, then copy the location in the address bar.
So I recently found out that the email web app on Office 365 is not displaying my emails correctly. I have some hypertext links that I have an inline-style setting my text-decoration to none.
<a href="http://wwww.example.com" style="color:#ffffff; text-decoration:none;">
Click Me!
</a>
Outlook 365 seems to be getting rid off all my styles and ends up rapping my link in a font tag like:
<a target="_blank" href="//wwww.example.com">
<font color="white">
Click Me!
</font>
</a>
Does anyone know how to prevent Office 365 from doing so.
Don't know why it is doing it, but one way to hopefully overwrite this is using the !important css declaration in the header:
<style>
font, a {
text-decoration: none !important;
}
</style>
Surprised Outlook doesn't include a class in their imposed tags. Instead you'll have to add your own 'un-overwriting' class to all font and a tags you don't want this overwriting css to take affect on.
It is possible to make certain styles work with Office 365:
<a href="http://wwww.example.com" style="color:#ffffff;">
<span style="color:#ffffff;">Click Me!</span>
</a>
This example taken from this guide: http://blog.jmwhite.co.uk/2014/07/22/office-365-quirks-for-email-designers/
However, text-decoration:none; specifically appears to be broken in Office 365: https://www.campaignmonitor.com/forums/topic/7553/office365-web-client-quirks-thread/. After testing this significantly I was unable to get it working as well.
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>