IE 9 Едет меню

[Dolce]

Здравствуйте. Верстал шаблон и решил глянуть как это все смотрится в ие, в хроме и фаерфоксе нормально, а тут вот такая штука

вот ксс:

.navs li a{
border:1px solid red;
position:relative;
font-size: 12px;
text-decoration:none;
line-height: 30px;
color: #4C4C4C;
font-weight: bold;
cursor: pointer;
float: left;
display: inline;
padding: 0 15px;
height: 30px;
background: none;
}

Флоат в ИЕ начинает срабатывать после того как задается размер шрифта font-size: 12px; Если не вписывать его то обтекании не происходит, пункты идут в столбик, в других браузерах размер шрифта задавать не обязательно, обтекание срабатывает.

Вот HTML:

<div class="navs">
<ul><li><a href="http://electroinstrument-online.loc/" title="О нас" >О нас</a></li>
<li><a href="/novosti.html" title="Новости" >Новости</a></li>
<li><a href="/kak-zakazat.html" title="Как заказать?" >Как заказать?</a></li>
<li class="last"><a href="/dostavka.html" title="Доставка" >Доставка</a></li>
</ul>
    </div>

Может кто подскажет из-за чего в ИЕ такая лесенка выходит?

Edited August 14, 2012 by Dolce

[wwt]

http://jsfiddle.net/gYdxa/

Эх забыл еще добавте ul {list-style: none outside none;}

Edited August 14, 2012 by wwt

[cyklop77]

а почему float не у <li> , а у <a> ? мне кажется, в этом проблема

Edited August 14, 2012 by cyklop77

[Dolce]

а почему float не у <li> , а у <a> ? мне кажется, в этом проблема

Вы правы, помогло, большое спасибо