Recently, AOL Mail started ignoring the coding I had been using to override their built-in link styling. The strange thing is that my coding still works for regular links, but not mailto links. Here is the workaround coding that had been working for AOL, Gmail, Outlook, and other mail services that like to insert their own styling for links:
<strong style="font-weight:normal;">fake#fakeURL.com</strong>
Has anyone had any success to fix this new problem with mailto links in AOL?
Try adding a class, like class="mail_link" to your tag and then inside the add a style targeting the tag:
.mail_link {
color: #428BCA !important;
text-decoration: none !important;
}
Related
Similar to this question, How do I remove the blue styling of telephone numbers on iPhone/iOS?
I tried the suggestion using following code but it does not work:
[href^="tel"]{
color:inherit;
}
My problem is I am copying a page from my website into an email (weekly newsletter), and gmail is converting it to a blue hyperlink. Even before adding a[href^="tel"], it did not show up as blue on my website. I'm thinking there is no fix since it is happening via google?
if this is happening on gmail app, you can use an anchor tag and give it a color without the href
<a style="color:#000001; text-decoration:none;">iOS Fix</a>
if this is happening on the generic email clients for iOS you can use a class in the header and assign the class to the td
<style>
.appleLinkFix a{color:#000000; text-decoration:none;}
</style>
next you can add the class to the td which iOS will create the link by itself.
<td class="appleLinkFix">48 Pirrama Rd, Pyrmont NSW 2009</td>
Hope that helps answer your question.
Add these styles
color: inherit;
text-decoration: none;
This is also very easy to Google.
I'm working on sending emails to various email clients(such as yahoo,hotmail,gmail,....).
I have a div with id OrderInfo inside that I have a variable which generates a dynamic table.
HTML
<div id="OrderInfo">
variable
</div>
The dynamic table generates headers(th) with lower case, so I want to change that to uppercase and few more styling. So I have written a selectors
CSS
#OrderInfo table tr th {
text-transform: uppercase;
background-color: #737373;
color: white;
}
This is working fine for yahoo, hotmail but not for gmail.
I came across that only inline styles work for gmail but how can I the styles of modify a dynamic one.
I have no control on the variable (I mentioned in the div) it generates a table with values which processes while sending to the client.
So I cannot keep a static table and cannot change the way it renders
gmail as well as some other web and desktop/mobile clients strips away css stylesheets either imported or embedded in a <style>...</style> node in the head
Put them inline:
<div id="OrderInfo">
<table>
<tr>
<td style="text-transform: uppercase; background-color: #737373; color: white;">
<!-- .......... -->
</td>
</tr>
</table>
</div>
As a more general advice: building email html is not trivial as final result may vary a lot depending on the recipent's mail client.
The general rule is to make the html as simple as possible, avoiding "modern" css features; use nested tables instead of divs when possible (some says build the html as if you were building a 15 years ago webpage).
The above is very general and may not be always true.
There are several resources online that gives advices and rules on how to make an html email or template.
Finally the only and one rule to always follow if you want to be sure of the result: test your messages with various client
UPDATE 2018
GMAIL now and from a while ago has been supporting embedded CSS, so you can use CSS inside tag <style> in head, it even allow/supports the use of media queries.
OLD ANSWER
Gmail doesn't support embedded CSS, you need to use inline styles, take a look at this
12 Things you MUST Know when Developing Emails for Gmail and Gmail Mobile Apps
Here is what you could do:
<th bgcolor="#737373" style="text-transform: uppercase; color:white></th>
Many email service provide not support to css included in email template. Instead use inline css.
Also, Email template should be formed using tables as it only support HTML3. You can use HTML4/5 elements withing td tags
Do check this link. It will help you to build email template.
Try with this styling making your link red with no special effect for the hover situation:
a:link{color: red}
a:visited{color: red}
a:hover{color: red}
a:active{color: red}
This works fine for me, but if anyone of the 4 statements are missing it will not work neither in a gmail client nor in Outlook. They must also appear in the order shown above.
I am putting a link in email templates and I donot want to underline the link. In Outlook it is working fine but NOT working in Yahoo and Gmail. Sample code is as followed
<p> My paragraph
<b>
<a style="color: #9B0D25; cursor:pointer; text-decoration: none;" href="abc.com">abc.com</a>
</b>
</p>
I tried text-decoration: none !important; but same result. Can any body help me?
Well ... I was forwarding email from outlook to yahoo. While sending mail from Outlook, it discards the property text-decoration: none;. So when I send email directly to Yahoo, it works !!
Do not use paragraphs in HTML email. Move the style attribute of your anchor tag, to after your href attribute. If this does not solve your problem you have a larger issue than can be seen from the code you've provided.
Adding the important tag will actually be less effective because Outlook will ignore any styling that is followed by !important
If you'd like a template to use, check this one out.
This is the code I'm using.
<pre style="cursor: default !important; pointer-events: none !important; font:700 21px Arial; color:#fff!important; margin:12px; text-decoration: none !important;">
info#royalsingapore.com | +65 6417 3059
</pre>
It is rendering as link when sent as an email newsletter from Madmimi.
I want it to be plain text. How to disable render as a link?
I could be wrong, but i believe the fact that is it rendering as a link is up to the website that the email is being viewed on. I bet that the website has a function running on the body of the message that turns anything that looks like a link into an anchored link.
Email systems such as google and specially apple on mobile recognize email addresses and phone numbers and make them clickable. you need to wrap it around in a anchor tag and give it a value of 000001 for example to make it black.
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>