These tables look fine in IE7, but not in IE8. Can you help me? Thanks

<ul class="tableX">
        <li class="lt"><div><font color="#800000"><b>Number</font></div></li>
        <li class="rt"><div>Items</b></div></li>
        <li class="lt"><div>90</div></li>
        <li class="rt"><div>$5.00</div></li>
        <li class="lt"><div><font color="#800000"><b>Total</font></div></li>
        <li class="rt"><div>$5.00</b></div></li>
    </ul>
    <ul class="tableX">
         <li class="lt"><div><font color="#800000"><b>Number</font></div></li>
         <li class="rt"><div>Items</b></div></li>
         <li class="lt"><div>180</div></li>
         <li class="rt"><div>$10.00</div></li>
         <li class="lt"><div><font color="#800000"><b>Total</font></div></li>
         <li class="rt"><div>$10.00</b></div></li>
    </ul>
    <ul class="tableX">
         <li class="lt"><div><font color="#800000"><b>Number</font></div></li>
         <li class="rt"><div>Items</b></div></li>
         <li class="lt"><div>270</div></li>
         <li class="rt"><div>$15.00</div></li>
         <li class="lt"><div><font color="#800000"><b>Total</font></div></li>
         <li class="rt"><div>$15.00</b></div></li>
    </ul>
    <ul class="tableX">
         <li class="lt"><div><font color="#800000"><b>Number</font></div></li>
         <li class="rt"><div>Items</b></div></li>
         <li class="lt"><div>360</div></li>
         <li class="rt"><div>$20.00</div></li>
         <li class="lt"><div><font color="#800000"><b>Total</font></div></li>
         <li class="rt"><div>$20.00</b></div></li>
    </ul>
    <ul class="tableX">
         <li class="lt"><div><font color="#800000"><b>Number</font></div></li>
         <li class="rt"><div>Items</b></div></li>
         <li class="lt"><div>450</div></li>
         <li class="rt"><div>$25.00</div></li>
         <li class="lt"><div><font color="#800000"><b>Total</font></div></li>
         <li class="rt"><div>$25.00</b></div></li>
    </ul>

Css code:

ul.tableX {
    width:162px;
    float: left;
    margin:0 0 0px 5px;
    padding: 0;
    list-style: none;
    border: solid #000;
    border-width: 0 1px 1px 0;
}
.tableX li.lt {
    float:left;
    border: solid #000;
    border-width: 1px 0 0 1px;
}
.tableX li.rt {
    float:right;
    border: solid #000;
    border-width: 1px 0 0 1px;
}
.tableX li div {
    width: 80px;
    text-align: center;
    color: #000;
    font-size: 12px;
    padding: .4em 0;
}

It's TABULAR data, USE A TABLE.

Can you give me an example of using a table that would replace this code?
Thanks

It's just a three column table

<table>
<tr>
<th width="50%">Number</th>
<th width="25%">Items</th>
<th width="25%">Total</th>
</tr>
<tr>
<td>nn</td>
<td>n</td>
<td>£n.nn</td>
</tr>
<tr>
<td>nn</td>
<td>n</td>
<td>£n.nn</td>
</tr>
</table>