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, 5 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

Join 200,000 companies around the world that use Campaign Monitor to run email marketing campaigns that deliver results for their business.

Get started for free
1-888-533-8098