Icon List Menu not aligning properly in IE 7

Question

Hi All,

I have this alignment issue in css for IE7. I am trying to create this icon with text menu and it works fine in firefox and IE 8, but in IE7, the float is not happening. Why i chose this type of html code, is to have a hover effect when hovering the list, use image sprite instead of images. Can somebody please correct me where i am going wrong. The html and css code is as follows..

CSS Code:

<style type="text/css">
.designDetailLinks {
display:block; float:right;  position:relative;
}
.designDetailLinks li {
display:block; float:left; margin:0 0 0 0; font-size:92%; width:auto; 
}
.designDetailLinks .editCTO {
display:block;  padding:26px 0 0 0;color:#575656; width:40px; margin:0 auto; text-align:center; 
background:url(../images/icons.gif) no-repeat 0 -2229px;
}
.designDetailLinks .editCTO:hover {
display:block;  color:#1d8e3f; 
background:url(../images/icons.gif) no-repeat 0 -2270px;
}
.designDetailLinks .BOM {
display:block;  padding:26px 0 0 0; color:#575656; width:40px; margin:0 auto;  text-align:center; 
background:url(../images/icons.gif) no-repeat 0 -2313px;
}
.designDetailLinks .BOM:hover {
display:block;   color:#1d8e3f;
background:url(../images/icons.gif) no-repeat 0 -2313px;
}
.designDetailLinks strong {
display:block; text-align:center; clear:left;
}
</style>

HTML Code :

<div class="designDetailLinks">
<ul>
<li><a href="#" class="BOM"></a><strong>Edit BOM</strong></li>
<li><a href="#" class="editCTO"></a><strong>Edit CTO </strong></li>
</ul>
</div>