Outlook 2007, inline styles, and links
I recently discovered yet another weird Outlook 2007 bug with email newsletters. Every web designer has probably gone through the nightmare of Internet Explorer and then tried to explain to non-web people why it just plain sucks. Outlook 2007 raises the bar to a whole new level of awfulness, but enough with the ranting.
If you have been making email newsletters that work in the majority of email clients out there you already know this; if you want your work to display the way you intended in web based and stand alone email clients then you have to use inline styles and tables, and a lot of them. You would also be wise to ignore any modern CSS, because most of it won’t work. Inline styles work well for email clients that strip out all the embedded styles like Hotmail (also a Microsoft product). Hotmail has come a long way over the past 4 years, but unfortunately Outlook took several steps back when someone came up with the brilliant idea of using Word as the email render engine. Previous versions of Outlook are much easier to support.
I’ve done everything right, why are my links turning purple when clicked!
So you have your inline styles set up everywhere including on your links, but when you send out your deployment the links turn purple when clicked in Outlook 2007. This is Outlook ignoring your inline styles and applying the default link colour for visited links. If you have an embedded style at the top of the page, it will respect those. I had stopped using embedded styles all together since inline styles were much more reliable. The fix for this is to add your link styles back in the embedded style at the top of the page inside the head of your markup.
<style media="all" type="text/css"> a:link, a:visited { color:#64698c; text-decoration:none; } .sideBar a:link, .sideBar a:visited { color:#893d00; text-decoration:underline; } </style>
In this example all link styles are set to a specific colour and the second style sets a different set of colours for links within a sidebar class. All you really need to fix your Outlook link woes is the a:visited declaration, but it can’t hurt to add the links in there too.
Inline styles are still king with email
Remember, dont’ get rid of your inline styles. One of the reasons I got rid of my embedded styles is because I could not tell when I was missing an inline style. This is a real pain for links, because using this fix will show your links as the right colour while working on the email. If you or others use editors to work on your HTML they will not add inline styles, so you must always remember to add them after. Again, the down side with this fix is now you cannot see which links you have missed. At the time of writing Gmail still strips out the embedded link styles and I’m sure a few other clients still do this too.
laisunshine November 25, 2009 at 4:35 pm
I tried this and I still couldn’t get it to work. I am using iContact to send out my emails. All of my emails look great in every other email app except Outlook. I am so stumped.
Ian Hoar November 25, 2009 at 5:58 pm
Well, it’s a fairly minor bug, but make sure you are not overriding your style somewhere else. If you specify an “a” tag for example you might override your a:visited style.
rahul January 14, 2010 at 8:18 am
Hi,
I am not having this type of problem. But my problem is different……. when i forward the email the underline of the link turns to blue instead of the color i mentioned inline style.
murphyhg August 10, 2010 at 7:44 pm
I am using icontact and I am using your solution however it does not work in Outlook 2007. Here are my style decorations.
.first a:link, .first a:visited {
color:#FFFFFF;
text-decoration:none;
}
.second a:link, .second a:visited {
color:#6879a7;
text-decoration:none;
}
.third a:link, .third a:visited {
color:#000000;
text-decoration:none;
}
I am not using any other embedded styles only inline styles and I am declaring my my anchor color inline.
murphyhg August 10, 2010 at 7:57 pm
The fix I found is to use the class in the outer element in my case that is a td cell.
JvD September 30, 2010 at 4:20 am
After upgrading to office 2007 from 2003, people are having a minor problem with link colors. After clicking the link it turns purple the way it should, but when you go to another mail and back to the former the link is back to blue, as if it has not been clicked………
Is this also inline related? How to solve that?
Ian Hoar September 30, 2010 at 9:04 am
Hi JvD, I don’t think there is any way to solve this. Outlook 2007 does not use a browser and is mostly likely not keeping track of your clicks once you leave the email. The rendering engine is MS word.
check October 20, 2011 at 7:06 pm
Try this instead, don´t use “a:link”, etc, use instead “a.link” instead.
For example:
a.link, a.visited {
color:#000000;
text-decoration: none;
}
Ana February 3, 2012 at 8:47 am
“vlink” attribute in the “body” tag works for MS Outlook 2007 😉