Text Color for Date not correct in Outlook

I am having trouble controlling the text color in Outlook (2003-2010) on the date. When you see the code, I am probably going overkill with the nested span tags and !important modifiers. But it is still rendering the text for the date as black in Outlook.

I had this problem with the <$description> tag as well but I solved it because I realized that the Template was adding the description in <p> tags inside my code so I added a CSS rule for:

h6 span p { color: #ffffff; }

And it works now. I assume that the code that autoamtically pulls the correct date is doing something similar but I can't figure out what. When I use Firebug it shows the code as just:

<h6 style="color:#ffffff !important;" align="right"><span style="color:#ffffff !important;">April 4, 2011</span></h6>

So I don't see why it would render any differently than as white text. What am I missing?

The relevant code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Anderson Hanson Blanton</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<style type="text/css" media="screen">
body { background-color: white; margin: 0; padding: 0; font-family:'Lucida Sans','Lucida Grande',Lucida,Arial,sans-serif; }
a img { border: none; }
img { border: none; display: block; }

h1 { margin: 0; padding: 0; font-size: 40px; line-height: 52px; font-weight: normal; }
h2 { margin: 0; padding: 0; font-size: 14px; line-height: 18px; font-weight: normal; text-transform: uppercase; }
h3 { margin: 0; padding: 0; font-size: 14px; line-height: 18px; font-weight: bold; color: #111111; font-family: "Palatino Linotype", Palatino, "URW Palladio L", Times, serif; }
h4 { margin: 0; padding: 0; font-size: 16px; line-height: 18px; font-weight: bold; color: #fdfcfc; font-family: "Palatino Linotype", Palatino, "URW Palladio L", Times, serif; }
h5 { margin: 0; padding: 0; font-size: 11px; line-height: 18px; font-weight: none; text-transform: uppercase; color: #fdfcfc; }
h6 { font-family: "Lucida Sans", "Lucida Grande", Lucida, Arial, sans-serif; margin: 0; padding: 0; font-size: 10px; line-height: 18px; font-weight: normal; }
p { font-family: "Lucida Sans", "Lucida Grande", Lucida, Arial, sans-serif; margin: 0; padding: 0; font-size: 10px; line-height: 18px; font-weight: normal; }
ul, li, ul li { font-family: "Lucida Sans", "Lucida Grande", Lucida, Arial, sans-serif; font-size: 10px; line-height: 18px; color: #111111; font-weight: normal; color: #111111; }

h6 span p { color: #ffffff; }

a {color: #4176aa;text-decoration: underline;}
a:hover {text-decoration: none;}
.linkcolor a {color: #ffffff; text-decoration: underline;}
.linkcolor a:hover {color: #ffffff; text-decoration: none;}
</style>

</style>
</head>
<body bgcolor="#ffffff">

---------------------------------------------------------- Skipped irrelevant code ----------------------------------------------

<td width="204" align="left" class="linkcolor">
<h6 style="color:#ffffff !important;" align="right"><span style="color:#ffffff !important;"><$currentmonthname$> <$currentday$>, <$currentyear$></span></h6>
<img src="images/spacer5h.gif" style="border:none;display:block;" alt="" />
<h2 style="color:#c8e3ff;"><span style="color:#c8e3ff !important;"><$title$></span></h2>
<img src="images/spacer5h.gif" style="border:none;display:block;" alt="" />
<h4 style="color:#fdfcfc !important;"><span style="color:#fdfcfc !important;"><$title$></span></h4>
<img src="images/spacer5h.gif" style="border:none;display:block;" alt="" />
<h6 style="color:#ffffff !important;" align="left"><span style="color:#ffffff !important;"><$description$></span></h6>
<img src="images/spacer5h.gif" style="border:none;display:block;" alt="" />
</td>
Diana Diana, 6 years ago

Hey,

Just from a cursory review, it's the !importants , try adding in the colors and such a second time, but not !important or skip it in the span. Those work great for fixing things like the green text issue in Hotmail, but then cause problems in Outlook.


~*~~*~~*~~*~
D. Potter
Campaign Monitor

See why 200,000 companies worldwide love Campaign Monitor.

From Australia to Zimbabwe, and everywhere in between, companies count on Campaign Monitor for email campaigns that boost the bottom line.

Get started for free