Проблема с float в IE

[nazarlee]

Добрый день уважаемые форумчане. При верстке страницы возникла следующая проблема в браузере IE:

На странице имеется менюха, сверстанная следующий образом:

HTML

<ul id="steps_ul">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>

CSS

#steps_ul li {
	float:left;
}
#steps_ul li a {
	display:block;
	width:114px;
	height:99px;
	background-image:url(../images/general/steps_normal.png);
	background-repeat:no-repeat;

Под ней расположен div блок (смотреть картинку) фиксированного размера.

Насколько мне известно, когда элементу присваивается float, он становится блочным и вырывается из нормального потока. Следовательно все нижестоящие элементы должны занимать место плавающего. Так в принципе и происходит во всех браузерах, кроме IE. Взгляните пожалуйста на два прикрепленных jpg файла и вы всё поймете. Отсюдава вопрос: Как правильно выйти из этой ситуации? Как зделать так что бы, либо в IE нижестоящий блок занял место менюхи (как во второй картинке), либо может есть ещё варианты.

IE:

Другие браузеры:

Edited March 29, 2012 by nazarlee