Ok, so you are not actually creating it in Outlook, Outlook is just a
receiving client.
To be fair, your code looks absolutely horrible. You declare a style at the
top and then overrule or append it by each element that you use in the body.
Why not either define all the styles at the top (recommended) or in de body?
Just a quick cleanup of the text part of the message can be found below. I
leave the rest up to you. Additionally see the following document to find
out which elements are supported and not supported in Outlook 2007 (for
instance "float" is not supported). Why you use that single "float" element
is a bit of a mystery to me as well as the entire design of your template is
based on a table. You actually defined the colspan before just so you could
use the float element. As I said; a bit of a mess.
With the code below, the font should be displayed correctly in Outlook.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"
http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta content="text/html;
charset=iso-8859-1" http-equiv="Content-Type">
<title>American Press Institute</title>
<style type="text/css">
<!--
p {
padding: 0px 0px 5px 0px;
margin: 0px 0px 5px 0px;
}
a {
color: #335CAC;
}
#sidebar a {
color: #CC9;
text-decoration: none;
}
#main p, h1, h2, h4, h5 {
font-family: Arial, Helvetica, sans-serif;
}
#main p{
font-size:80%
}
#main h1{
font-size: 20px;
line-height: 20px;
font-weight: bold;
color: #FFF;
margin: 0px;
}
#main h2{
font-size: 14px;
line-height: 14px;
font-weight: bold;
color: #FFF;
margin: 10px 0px 0px 0px;
padding: 0px;
}
#main h4{
font-style:italic
}
#main h4, h5 {
color: #5D8D38;
font-weight: bold;
font-size: 1.1em;
padding: 0px 0px 5px 0px;
margin: 0px 0px 5px 0px;
}
-->
</style>
</head>
<body>
<div id="main">
<table cellpadding="0" cellspacing="0" style="border: 2px solid #996; width:
520px">
<tr>
<td style="padding: 10px">
<img
src="
http://www.americanpressinstitute.org/images/postcards/2008_api_weblogo.gif"
alt="picture2" width="156px" height="68px" style="padding: 5px;">
</td>
<td style="padding: 10px">
<img
src="
http://www.americanpressinstitute.org/images/postcards/build_new_audiences.gif"
alt="picture1" width="216px" height="57px">
</td>
</tr>
<tr>
<!-- BEGIN EDITING BANNER COLOR HERE -->
<!-- EDIT THE LINE
IMMEDIATELY FOLLOWING THESE COMMENTED LINES WITH THE COLORS LISTED BELOW -->
<!--
PURPLE
#8A5AA1 BLUE #006CA1 GREEEN #5D8D38
ORANGE #DD4A3A YELLOW #ECA72D RED #971C1B -->
<td style="padding: 10px; background-color: #5D8D38; color: #FFF;
border-top: 2px solid #966; border-bottom: 2px solid #996;">
<!-- CHANGE THE 'background-color:'
HEXIDECIMAL NUMBER TO ONE OF THE COLORS LISTED ABOVE -->
<!-- END EDITING
BANNER COLOR HERE -->
<h1>%%seminarname%%</h1>
<h2>%%seminardate%%<br>%%seminarlocation%%</h2>
</td>
<td style="width: 162px; border-top: 2px solid #996; border-left: 2px solid
#996;
border-bottom: 2px solid #996;">
<img
src="
http://www.americanpressinstitute.org/images/postcards/apiexterior.gif"
alt="picture3"></td>
</tr>
<tr>
<td style="width: 360px; vertical-align: top; padding: 10px;">
<h4>%%introparagraph%%</h4>
<p>%%content%%</p>
<p></p>
<h5>DETAILS:</h5>
<p>Location: Reston, Va. (Located 20 miles west of Washington, D.C.)<br>
Tuition: Take advantage of early-bird registration and save 10% on tuition.
Your investment is only $XXX for paid registration received by the
early-bird
discount deadline of XXXX. (Group meals are included in seminar
tuition.)<br>
Hotel and meals: The hotel package at the Hyatt Regency Reston Town
Center, API’s conference hotel, is $xxx. This charge is in addition
to the tuition fee, and is paid directly to the hotel by the seminar
member upon checkout.<br><br>Click here for more information and to
register.<br>Want personal advice on whether this seminar is right for
you? Please contact seminar moderator and API associate director XXX
with any questions. </p>
</td>
<td style="width: 162px; vertical-align: top;">
<div id="sidebar" style="background-color: #58635B; padding: 10px;">
<p style="font-size: 1.3em; color: #FFF;">2008 Tools for Transformation</p>
<p style="font-size: 1.1em; color: #FFF;">
<a href="
http://www.americanpressinstitute.org/seminars/" target="_blank">
See the full seminar list here.</a></p>
</div>
<div style="background-color: #D0D4D3; padding: 10px; font-size: 90%;">
<p><strong>Upcoming Seminars</strong></p>
<p>%%upcominseminars%%</p>
</div>
<div style="padding: 10px; font-size: 9px;">
<img
src="
http://www.americanpressinstitute.org/images/postcards/2008_api_weblogo.gif"
alt="picture3" style="padding: 10px 0px 10px 0px;">
<p>11690 Sunrise Valley Drive<br>Reston, VA 20191-1498</p>
<p>
<a href="
http://www.americanpressinstitute.org" target="_blank">
www.americanpressinstitute.org</a></p>
</div>
</td>
</tr>
</table>
</div>
</body>
</html>
