Myopic Outlook

By John Cooper On July 30, 2010 · 2 Comments · In Web/Design

This problem came up yesterday about which I could find nothing on the internet, and it was just whacky enough to deserve some mention…well that, and the fact that we came up with a solution.

So the context is a HTML marketing email we developed for a regular multi-product promotion. As you can see, the rendering in Outlook 2007 on a PC shows the default purple as the visited link color. This was not desired, nor was it described by either the CSS or the HTML.

Visited links showing in default colors (contrary to the css styles).

As you can see, the HTML directs that the font color—in any case—should be white.

<tr valign="middle">
  <td style="padding: 5px 10px;"><a class="link3DS" href="http://link"
  target="_blank" style="color:#ffffff;">Alaska Cruises</a></td>
</tr>

The CSS says the same thing. The class on the above link is “link3DS” which as you can see below also directs the color to be white. (The entire body-embedded email style sheet here for reasons that will be explained later).

<body bgcolor="#1a2639" style="margin:0; padding:0;">
<style type="text/css">
<!--
img {display: block;}
a.orangeLink:link {color: #e6bc50; text-decoration: underline;}
a.orangeLink:visited {color: #969696; text-decoration: underline;}
a.orangeLink:hover {color: #ffffff; text-decoration: none;}
a.grayLink:link {color: #bdbcbc; text-decoration: underline;}
a.grayLink:visited {color: #969696; text-decoration: underline;}
a.grayLink:hover {color: #e6bc50; text-decoration: none;}
a.navLink:link {color: #ffffff; text-decoration: none;}
a.navLink:visited {color: #ffffff; text-decoration: none;}
a.navLink:hover {color: #1d3666; text-decoration: underline;}
a.link3DS:link {color: #ffffff; text-decoration: none;}
a.link3DS:visited {color: #ffffff; text-decoration: none;}
a.link3DS:hover {color: #ffffff; text-decoration: underline;}
a.SO_link:link {color: #ffffff; text-decoration: none;}
a.SO_link:visited {color: #ffffff; text-decoration: none;}
a.SO_link:hover {color: #a43232; text-decoration: underline;}
-->
</style>

After banging heads on walls, my workmate, Kurt, noticed that if you put the long-deprecated VLINK attribute in the email’s body tag, the visited link would now display the desired color. “But why haven’t we had this problem in the past?” I queried. VLINK could not (will not!) be the solution!

Then I recalled that in designing this email, which embraced an entirely new template, I had stripped down the style sheet according to what was now relevant. In doing so, I had also stripped out the default pseudo-class styles as all the links in the new template were triggered be classes. So I popped these default styles back into this email, we tested it, and sure enough BINGO!, the visited links now rendered in their desired fashion.

So to the above style sheet, these default pseudo-class stylings were added to our anchor links:

a:link {color : #1d3666; text-decoration : underline;}
a:visited {color : #1d3666; text-decoration : underline;}
a:hover {color : #a43232; text-decoration : none;}

The moral of the story? Don’t forget to assign default pseudo-class styles to your anchor tag! Why? I haven’t the slightest idea. Perhaps some jocko working on the Outlook project at Microsoft can share some…well I won’t call it wisdom, but at least an explanation where none seems possible.