I having some issues with a client of mine. I’ve built (not designed) an email template for them to use with Create/Send. I’ve used the design testing service from Create/Send and all is looking as intended. However, when the client views the email in Outlook 2003 the text formatting is missing (see screen grabs).
There is very little CSS in the head of the document and certainly nothing that should have this affect as much of the styling is done inline.
Does anyone have any ideas?
As intended
alt text http://citywest.bangtest.co.uk/stackoverflow/okay.png
OutLook 2003
alt text http://citywest.bangtest.co.uk/stackoverflow/bad.png
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
City West e-Bulletin
<style type="text/css" media="screen">
* { font-family: Arial, san-serif; }
a {color:#000000;}
a img {border:none;}
h3 a { color: #BD2C16; }
.topbannercopy a {color:#ffffff;}
.unsub a {color: #555555; text-decoration:none;}
.unsub a:hover {text-decoration:underline;}
</style>
</head>
<body style="text-align: left;">
<table border="0" bgcolor="#ffffff" cellspacing="0" cellpadding="0" width="591" align="center" style="font-family: Arial, san-serif;">
<tr bgcolor="#e95c55">
<td colspan="4"><img src="img/top-trust.gif" alt="City West Housing Trust. e-Bulletin for Staff" width="591" height="195"></td>
</tr>
<tr bgcolor="#e95c55">
<td style="color: #ffffff; font-size: 11px; padding-left: 10px; padding-bottom: 5px;" colspan="4"><$description default=''$></td>
</tr>
<tr>
<td bgcolor="#e95c55" colspan="4">
<img src="<$imagesrc link='true'$>" alt="read more" width="591">
</td>
</tr>
<tr bgcolor="#e95c55" valign="top" style="padding: 10px;">
<td colspan="1" style="color: #BD2C16; padding-left: 10px;">
<h3 style="font-size: 15px;"><$title link='true'$></h3>
</td>
<td colspan="3" style="color: #ffffff; font-size: 12px; padding-left: 20px;"><span class="topbannercopy"><$description default=''$></span></td>
</tr>
<tr valign="top" style="font-size: 10px;">
<td width="133" style="padding-top: 10px;">
<img src="<$imagesrc link='true'$>" alt="read more" width="133" height="118">
<h3 style="color: #BD2C16; margin-bottom: 5px;"><$title link='true'$></h3>
</td>
<td width="133" style="padding-top: 10px; padding-left: 20px; padding-right: 9px;">
<img src="<$imagesrc link='true'$>" alt="read more" width="133" height="118">
<h3 style="color: #BD2C16; margin-bottom: 5px;"><$title link='true'$></h3>
</td>
<td width="133" style="padding-top: 10px; padding-left: 9px; padding-right: 20px;">
<img src="<$imagesrc link='true'$>" alt="read more" width="133" height="118">
<h3 style="color: #BD2C16; margin-bottom: 5px;"><$title link='true'$></h3>
</td>
<td width="133" style="padding-top: 10px;">
<img src="<$imagesrc link='true'$>" alt="read more" width="133" height="118">
<h3 style="color: #BD2C16; margin-bottom: 5px;"><$title link='true'$></h3>
</td>
</tr>
<tr valign="top" style="font-wieght: bold; padding-bottom: 10px; font-size: 12px;">
<td width="133">
<p><$description default=''$></p>
</td>
<td width="133" style="font-wieght: bold; padding-left: 20px; padding-right: 9px;">
<p><$description default=''$></p>
</td>
<td width="133" style="font-wieght: bold; padding-left: 9px; padding-right: 20px;">
<p><$description default=''$></p>
</td>
<td width="133">
<p><$description default=''$></p>
</td>
</tr>
<tr>
<td rowspan="2" colspan="1" valign="top"><img src="img/slash-left.gif" width="133" height="50" alt=""></td>
<td rowspan="1" colspan="3" valign="top"><img src="img/slash-right.gif" width="458" height="42" alt=""></td>
</tr>
<tr align="right">
<td colspan="3" style="font-size: 10px;"> </td>
</tr>
<tr align="right">
<td colspan="4" style="font-size: 10px;">City West, the City West Logo and all other City West product or service names are<br>trade marks of City West. All Rights Reserved. <unsubscribe>Unsubscribe</unsubscribe>.</td>
</tr>
</table>
</body>
I’ve since found out that the version of Outlook that the client has uses the rendering engine from whatever version of IE is installed. In this instance it’s IE6! I’ve since tested and made amends to the template and all is now good.
Thank you everyone for you help.