I am trying to create a list within a list which in FF looks perfect but when I look in IE7 its not aligned correctly.

I have no idea at all why or how to fix this. I have cut the page down to just the minimum to see if it was another problem with some code but no it still fails.


Code:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
.uldate {
list-style:none;
background-color:#666666;
float:left;
height:50px;
width:45px;
}

.uldate li.day {
color:#fff;
font: bold 16px "Verdana", Helvetica, Sans-serif;
text-align:center;
padding-top: 5px;
}

.uldate li.month {
color:#67A779;
font: 17px "Verdana", Helvetica, Sans-serif;
text-align: center;
}


.ulpostings {
list-style:none;
width: 580px;
padding: 10px;
margin:0px;
padding:0px;
}

.ulpostings li
{
margin: 0px;
padding:0px;
font: 17px "Verdana", Helvetica, Sans-serif;
color: #000000;
}

</style>
</head>

<body>

<ul class="ulpostings">
<li>
<ul class="uldate">
<li class="month">Jun</li>
<li class="day">11</li>
</ul>
</li>
<li class="ulpostingstop">First Post</li>
<li>the post</li>
</ul>

</body>
</html>