I am developing custom email signatures for a client of mine, I am now at testing stage for GMail, Hotmail, Brinkster and so on.
I'm having a hard time trying to remove the underline the anchor is displaying, I do have " text-decoration: none;" on the anchor itself and nothing is working for either client however, Outlook renders fine.
Can anyone help? :-)
I think your issue may be that certain clients move anchor styles and text into a span and apply the style definitions to that instead.
hello, world!
becomes
<span style="color:black;">hello, world!</span>
Not 100% sure why they do this, but it's annoying. Sometimes changing to something like this works:
<span style="color:black;">hello, world!</span>
But it's still a mixed bag and changing all the time. Unfortunately the only way to confirm that things always look right is to use an image.
You could also try adding !important to the style:
text-decoration: none !important;
link text
won't have an underline unless there is a higher priority css rule somewhere else.
Related
I've tried everything I can think of, but no matter what I do, MailChimp demands any <a> with an href has color: inherit !important; text-decoration: inherit !important and, because Outlook is absolute garbage, means all my links are coming up blue and underlined.
In this example, I can put in a link, and it'll just turn blue:
<td style="color:#27646a;font-family:Georgia, serif;font-size:16px;font-weight:bold;" mc:edit="button">
READ MORE
</td>
In this example, if I put in a link, it'll just ignore my <a> and add another one adjacent:
<td style="color:#27646a;font-family:Georgia, serif;font-size:16px;font-weight:bold;">
<a mc:edit="button" style="color: #27646a; text-decoration: none;">
READ MORE
</a>
</td>
I can put this in my CSS, but obviously MailChimp decides to ignore it:
td a {
color: #27646a !important;
text-decoration: none !important;
}
I don't really know what my other options are, and I swear I don't remember MailChimp arbitrarily deciding everything must look like crap in Outlook - is there something I'm missing?
In case others are finding this, it is possible to set hyperlink colours in Mailchimp templates that will be respected by Outlook without styling each link inline.
I'm using a custom HTML template in Mailchimp, using the classic builder.
It does seem like it's necessary to specify the link styling for each type of content block that you have in your template. In my case, my editable content blocks are always div tags. In my template code, within the body tag:
<style type="text/css">
div a{
color:#000000 !important;
text-decoration:underline !important;
}
</style>
The style would need to also be defined for all tables, p, or whatever else you are using to contain text. I've tested the result in Outlook 365 and it works.
I remember reading somewhere that mailchimp won't allow hyperlinks to be too similar to the background colour (because the unsubscribe link must remain visible) so that's a possible issue as well.
I have used two methods for generating emails in MailChimp: 1) Foundation For Emails and 2) a MailChimp drag and drop email template.
In Foundation, it takes my source CSS code:
.item-link {
color:#0C3C80;
font-family:Helvetica;
font-size:16px;
text-decoration:underline;
}
and generates the inline style like this for links with class "item-link":
<span style="font-size:12px">View this email in your browser</span>
This produces the correct color in Outlook.
In the drag and drop template, I use the "Design" tab -> "Body" -> "Body Link" of the editor to assign the link color. It also appears correctly in Outlook.
The difference may be that in two of your examples you assign the color in the td tag style, and in the third, you designate it as a button to the MailChimp editor, so the style for the button is probably overriding the style you want.
I hope this helps.
You should be explicitly declaring colours and text-decoration:none/underline on every single <a> tag. Mailchimp will then avoid adding these fallback styles.
I've always declared mc:edit on the table cell wrapping the <a> tag as that is the foolproof way of editing the url and keeping the styles.
Here is the code I use. There are a tonne of other styles added and that is simply because I use the border technique of building buttons, but the issue is the same. I have mc-edit on this tag and have made sure to declare text-decoration and colour and my client uses this every week without issue.
<td align="center" valign="middle" style="padding:14px 20px;" mc:edit="button">
Button
</td>
Try that. Hoping that will work out for you
I've created a Mail-Template for a Sharepoint WebPart which includes a div element with inline style display: none. Like this:
<div style="display: none"> This Text should NOT be visible</div>
If I send the Mail-Template to a mail-address, then all will work correctly, that means, div above is not visible. But if I forward or reply the mail, then Outlook overwrites the inline-style and the div above is visible.
I've already tried to set "display: none !important" and "mso-hide: all" but that doesn't work for me.
I hope somebody have an idea to solve my problem.
I was struggling with the same thing, and I think the only answer is: There is no reliable solution. Even if someone manages to find a solution that works in all current Outlook versions, it might break with the next one.
I have tried opacity: 0, visibility: hidden, mso-hide: all, font-size: 0, etc. None of these work because they are stripped out by Outlook.
Hiding the text using conditional comments results in the text getting deleted when you are forwarding the email.
<!--[if !mso]><!-->
Hidden content
<!-- <![endif]-->
So, if your goal is to store metadata for email processing, I'd recommend to just add it to the bottom of the email with a smaller text size, and in a human readable format (something like Reference Nr.: 123456). This will not get deleted by Outlook and it would also survive a conversion to plain text in Outlook.
Instead of using display:none, Try to use font-size:0px or height:0px.
I've run out of options with this particular issue I'm having.
I'm using entypo font to display a few icons but their dimensions all seem out of whack and I can't seem to control or modify them enough to get the desired result.
All I want is:
Email Icon : Email me
email#email.com
I've tried normal inline elements, then I placed them in divs to try and force them and then I resorted to putting them in a table(exasperation) but still no joy.
Would someone mind have a look this this fiddle and seeing if they can see what the fix might be?
Links must be accompanied by code?
http://jsfiddle.net/KafdH/
Many thanks!
Apologis for some of the css, it may seem illogical, I was trying all sorts of wild wacky things. It's almost as though the icon has a large invisible space above it.
I'm not sure if the fiddle will save, but: http://jsfiddle.net/KafdH/2/ seems to bring it up for me. Your "h4" was forcing too much white space, I think. I tried bold, instead, and the font looked the same. I also had to put the entire line in the span, though I hope with more real estate that won't be necessary.
<span id="entypoFont" class="mail icon"> <b> Email me:</b>
blah#bla.co.uk</span>
<span id="entypoFont" class="mail icon">
<b> Email me:</b>
yadda#bla.co.uk</span>
I know that I can do the following if I want to turn an image into a click-able link:
<img src="icons/twitter.png" />
But I would prefer to use a CSS background image so that I can have a hover state:
<a class="twitter" href="http://twitter.com/username"></a>
# css
.twitter{display:block; width:16px; height:16px; background:url("twitter.png")}
This works fine except I'm not sure it's entirely valid to have an anchor link that contains nothing. Chrome renders it fine, as does FF, but I'm not sure if others are the same.
I realise I could just put some text inside the link, and hide it with text-indent: -9999px, but I've never liked that approach, for various reasons. Is my code above cross-browser compatible?
It's valid, but it's best if you did put something in there and used something like
font-size: 0;
to hide it away. This way, if someone does not have CSS (screen readers for example), he would still be able to tell approximately what the link is about.
Here's a great article on the subject
It is not OK at all, since it breaks fundamental accessibility principles. There is no way to specify alternative text for a background image, the same way you can and should specify it using an alt attribute in an img tag for a content image. See WCAG 2.0 Guideline 1.1.
If you wish to change an image on mouseover, there are CSS and JavaScript techniques for that.
It is perfectly valid, but if you want, you can put a blank space inside:
Use as the text, and you are good.
Over at Markup.tips we recently did some accessibility testing in iOS 8 and discovered that VoiceOver will not navigation to empty links. There must at least be a non-breaking space. Whether this should be considered an iOS bug or not we are not sure.
This is a simple question that I'm having lots of trouble finding the answer to. I'm setting the color of links like so:
<a style="color:#3067b3;text-decoration:none;" href="#">colored link</a>
But when I click the link it turns white for no reason, and I have not been able to change it back. Does anybody know why this is?
NOTE: I am designing an email that is meant to look correct across different email clients. Otherwise I would be specifying styles in a CSS file.
Stephen's solution did work for me. I can't comment yet, so here's the necessary code Rajneesh asked for:
<a href="http://www.example.org" style="text-decoration: none; color: #EC7405;">
<strong style="text-decoration: none; color: #EC7405;">Example Link</strong>
</a>
Make sure to use <strong>, I tried it with a <span> first, but that didn't work, it needed to be a <strong> tag for some reason. Also make sure to add at least the "text-decoration: none" style to the <a>, otherwise there might appear an underline after the link was clicked. I used the sure solution and added the full style to both the <a> and the <strong>, better safe than sorry ;)
I was having the same issue and found that adding a strong tag around the link text prevents it from turning purple on click. If you dont want the link to be bold just add font-weight:normal to the strong tag
The best way from my experience is using standard body link and vlink, it does work in outlook
<body link="#DD0000" vlink="#DD0000">
Here
</body>
Most Email clients will completely ignore any CSS thats not inline, so external stylesheets are not the way to go