Меню списка значков не правильно выровнено в IE 7

Question

У меня проблема с выравниванием в css для IE7. Я пытаюсь создать этот значок с текстовым меню, и он отлично работает в Firefox и IE 8, но в IE7, float не происходит. Почему я выбрал этот тип html-кода, чтобы при наведении на него списка был эффект наведения, вместо изображений используйте спрайт изображений. Может кто-нибудь, пожалуйста, поправьте меня, где я иду не так. HTML и CSS код выглядит следующим образом.

Код CSS:

<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 код:

<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>

Answer 1

О каком плавании вы говорите, и почему вы плаваете направо и налево?

Как и в предыдущих комментариях, я был бы склонен упростить HTML и CSS - трудно понять, что происходит, учитывая все различные правила, некоторые из которых кажутся излишними.

Для HTML вы можете использовать что-то вроде этого (на самом деле классы здесь, вероятно, должны быть идентификаторами, поскольку они являются уникальными идентификаторами):

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

... или даже просто поместить элементы привязки в div (хотя это может нарушить пуристы списка).

Тогда CSS может выглядеть примерно так:

<style type="text/css">
.designDetailLinks li a {
background:url(../images/icons.gif) no-repeat; 
display:block; 
font-size:90%; /* sensible to stick with multiples of 5 */
font-weight: bold; 
padding: 26px 0 0 0; 
text-align: center; 
width: 40px; 
}
.designDetailLinks .editCTO {
background-position: 0 -2229px;
}
.designDetailLinks .editCTO:hover {
background-position: 0 -2270px;
}
.designDetailLinks .BOM {
background-position: 0 -2313px;
}
.designDetailLinks .BOM:hover {
background-position: 0 -2313px; /* BTW: is this pixel value wrong? */
}
</style>