Hi,

I am trying to send an HTML email. The HTML uses unordered lists. When I view the html in the browser, the list appear horizontal, but when i embed the HTML in an email, the lists elements are displayed vertically. Does anyone know what could be causing this. Here is the HTML I am using:



<!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 id="Head1"><title>
OptimalBlue
</title>

<style type="text/css">
ul{
margin: 0 auto;
}
ul.horizontal_list li{
text-align: left;
float: left;
list-style: none;
padding: 3px 10px 3px 10px;
margin: 5px;
border: 1px solid #CCC;

}
ul.formBlock1THead{ background-color:#eeeeee; height:16px; margin:0; cursorointer;list-style:none; text-align: center; padding:0; }
ul.formBlock1THead li{font:11px Tahoma, Verdana, Arial, serif; color:#343434; float:left; width:56px;overflow:hidden; display:inline;}

ul.formBlock1TLine{ background: none; height:13px; margin:0 1px; cursorointer;list-style:none; text-align: center; padding:0;}
ul.formBlock1TLine li{font:11px Tahoma, Verdana, Arial, serif; color:#666666; float:left; width:54px; overflow:hidden; text-align:right;}
ul.formBlock1TLine li.float3{width:40px; padding-right:14px; text-align:right;}
ul.formBlock1TLine li.int0{width:34px; padding-right:20px; text-align:right;}
ul.formBlock1TLine li.currency2{width:52px; padding-right:2px; text-align:right;}
ul.formBlock1TLine li.pointer{ float:left; width:2px; height:13px; padding-right:0px;}


</style>

</head>

<body>
<form name="form1" method="post" action="TeaserTest.aspx" id="form1">


<ul class="formBlock1THead">
<li>Rate</li>
<li>Points</li>
<li>APR</li>
</ul>

<ul class="formBlock1TLine">
<li class="float3">6.342</li>
<li class="pointer" />
<li class="int0">87</li>
<li class="pointer" />
<li class="float3">7.934</li>
</ul>


</form>
</body>
</html>


Any help will be appreciated.

Thanks