While implementing the HTML alert i have faced an issue where the outlook client (2003/2007/2010) are not shown in the correct format. If you can use the following embedded style class into you alert then it will work fine. I have used the different style will be used for the outlook client and the other web client.
Note : Embedded style dose not work with the GMail client.
<style type="text/css">
<!--[if mso]>
.e-dumm
{color:#0C74C1}
a.e-link
{color:#0C74C1}
.e-heading
{font-size:20px;
color:#0C74C1;
margin:5px 0}
.e-subheading
{font-size:16px;
color:#A9A9A9;
margin:0 0 10px 0}
.e-signature
{margin-top:25px;
font-family:Arial,sans-serif;
font-size:14px;
line-height: 5px;
color:#777777;
}
.e-signature p
{
margin:0px;
}
.e-footer
{margin-top:50px;
}
.e-copyright
{margin-top:5px;
font-family:Arial,sans-serif;
font-size:11px;
color:#777777;
}
.e-copyright p{
margin:0px;
}
.e-b-body{margin:10px 0px;
font-family:Arial,sans-serif;
font-size:14px;
color:#777777}
<![endif]-->
<!--[if !mso]>
.e-dumm
{color:#0C74C1}
a.e-link
{color:#0C74C1}
.e-heading
{font-size:20px;
color:#0C74C1;
margin:5px 0}
.e-subheading
{font-size:16px;
color:#A9A9A9;
margin:0 0 10px 0}
.e-signature
{margin-top:25px;
font-family:Arial,sans-serif;
font-size:14px;
line-height:5px;
color:#777777;
}
.e-footer
{margin-top:50px;
}
.e-copyright
{margin-top:5px;
font-family:Arial,sans-serif;
font-size:11px;
line-height:5px;
color:#777777;
}
.e-b-body
{margin:10px 0px;
font-family:Arial,sans-serif !important;
font-size:14px !important;
color:#777777 !important}
<![endif]-->
</style>