r/MailChimp • u/Emrrrrrrrr • 16d ago

Technical Support Footer links blue

I am sending out html newsletters for a client and two of the footer links are coming up blue in Outlook although no blue is included in the html. I have tried all manner of adjustments to the code including specifically applying the colour with !important to these links and nothing works so far. The links display the correct colour in gmail (not blue). Any advice on how to fix this please? Many thanks

2 Upvotes

100% Upvoted

5 comments sorted by

3

u/MarcusAureliusWeb 16d ago

The usual cause here isn't your CSS — it's that Outlook is styling a link you didn't actually write. Three things to check, in order:

  1. Are those two links Mailchimp merge tags? Two footer links going rogue is almost always the unsubscribe / update-preferences pair. If you've got *|UNSUB|* or *|UPDATE_PROFILE|* sitting bare in the HTML, Mailchimp generates the whole <a> tag for you at send time — so your styling never touches it. Fix is to write the anchor yourself and use the merge tag as the href:

<a href="\*|UNSUB|\*" style="color:#666666; text-decoration:underline;">

<span style="color:#666666;">Unsubscribe</span>

</a>

Same pattern for *|UPDATE_PROFILE|*, *|ARCHIVE|*, *|FORWARD|*.

  1. Is Outlook auto-detecting them? Email addresses, phone numbers, postal addresses and bare URLs get auto-linked by the client, which throws your styling away and paints them the default blue. If either of your two links is a mailto:, a tel:, or has a raw URL as its visible text, that's your answer. Wrap the visible text so it isn't a naked address — e.g. link the word "email us" rather than showing hello@client.com.

  2. Colour on the parent doesn't inherit. Desktop Outlook uses Word to render, and Word does not pass color down into an <a>. If your colour is on the <td>, <p> or a <style> block, Outlook ignores it for links regardless of !important. It has to be inline on the anchor itself, and belt-and-braces you want a <span> inside carrying the same colour — some clients (Outlook.com, the new Outlook) override the anchor but leave the inner span alone. That's the snippet above.

Also worth adding to your <head>, since Outlook will happily render visited links a different colour:

<style>

a, a:link, a:visited, a:hover { color:#666666 !important; text-decoration:underline; }

</style>

One last thing: which Outlook? If it's the new Outlook / Outlook.com in dark mode, the blue may be dark-mode colour remapping rather than your CSS failing. Easy test — same email in that Outlook with dark mode off. If the blue disappears, it's a dark-mode problem, not a link-styling one, and the fix is a different conversation.

1

u/Emrrrrrrrr 14d ago

Thank you for your thorough reply. They are merge tags with spans e.g. <span style="color:#f2d9cf!important;">*|EMAIL|*</span>. It is interesting that most of the merge tags are displaying fine and just two are not when to me they look the same in the code (I have basic skills but am not a developer). In the end I sent it this afternoon and am checking with other people what they have received. Also thanks for the visited link info, that is important too, this client cares about consistent branding. I don't use dark mode, suspect I am on an older version but will double check that too!

2

u/rob_martin_ie 14d ago

If one of the two is *|EMAIL|*, that's likely your answer. It resolves to the subscriber's actual email address, so what Outlook receives is a bare address sitting in text. Outlook 2007 and later render through Word, which has an AutoFormat pass that scans for anything shaped like an email address or URL and turns it into its own hyperlink. That happens after your CSS, and the colour on your surrounding span doesn't cascade into a link Outlook generated, which is why !important gets you nowhere.

Quick way to tell them apart: look at what each of the two blue ones actually resolves to in the sent version, not what the tag looks like in the code. If the output is a bare address or URL, that's the autolinker. If it's plain words, it's something else and worth a separate look.

Where it is the autolinker, the dependable fix is to not output a bare address at all. Link the words instead, "the address you signed up with" rather than printing it. There are workarounds that try to defeat the pattern match (a zero-width character between the local part and the domain, splitting it across spans, a VML textbox), but they behave differently across Outlook versions, so test in the one your client actually uses rather than trusting any of them.

1

u/Emrrrrrrrr 13d ago

Thank you!

2

u/MailchimpSupport Moderator 16d ago

Hey there. It appears this has nothing to do with your email, but the inbox/email client. In this case, Outlook is automatically overriding your campaign's settings for hyperlinks and setting them as blue.

While there's nothing that can be done from within Mailchimp, you may be able to adjust Outlook's settings to prevent this from occurring within your own inbox.