Проблема с width:auto в IE7

[Avro]

Добрый день. Столкнулся с проблемой в IE7. Есть горизонтальное меню. У элементов списка стоит width:auto. Внутри списка стоит блок с картинкой, выровнянный по центру относительно элемента списка с помощью margin:0 auto. В IE7 верстка ломается из-за того, что он не может отталкиваться он резиновой ширины и выравнивает на 100%. Ниже привожу фрагмент кода:
html

<div id="menu_tp">
                        <ul>
                            <li><a href="#">first <span class="more"></span></a></li>
                            <li><a href="#">Мой аккаунт <span class="more"></span></a></li>
                            <li><a  href="#">Сервис <span class="more"></span></a></li>
                            <li><a href="#">Доставка</a> </li>
                            <li><a href="#">Оплата</a> </li>
                            <li class="none"><a href="#">Контакты</a></li>
                    	</ul>
                     </div>

CSS

#menu_tp
{
width:auto;	
height:37px;
float:right;
background:url(img/menu_back.png) repeat;
}

#menu_tp ul
{
float:left;
display:block;
}

#menu_tp li
{	
height:25px;	
float:left;
display:block;
background:url(img/bord.png) no-repeat right;
padding:10px 12px 0px;
line-height:14px;
list-style:none;
}

.none
{
background:none !important;	
}

#menu_tp a
{
font-size:15px;
color:#fff;
}

span.more
{
background:url(img/more.png) no-repeat bottom;
display: block;
position:relative;
width:10px;
height:6px;
top:2px;
margin:0 auto;
}

Есть какие-то мысли?

 

[Serg@NT]

Гугол поможет:

I'm about 99% sure it's because you don't have a doctype (DTD) in your html. This throws IE into quirks mode, which makes it, well, quirky.

На 99% - неправильно задан DOCTYPE. Это заставляет IE отображать страничку в режиме Quirks, что делает её "необычной".

 

[Avro]

Дело не в доктайпе, а в баге IE7, которому нужно задавать фиксированную ширину для выравнивания по центру. Как это можно обойти? Тем более валидатор здесь молчит

 

[Serg@NT]

задать в теге align="center". Валидатор, конечно, ругнётся, но зато будет работать.

 

[Avro]

нашел другой способ. Быдлокод конечно, но работает
html

<div id="tp">
                	<div id="clear">
                	</div>
                	<div id="menu_tp">
                        <ul>
                        	<!--Таблицы в меню для правильного отображения в IE7-->
                        	<table border="0">
                            	<tr>
                                	<td><li class="first"><a href="#">first <p class="more"></p></a></li></td>
                                	<td><li><a href="#" title="мой аккаунт">Мой аккаунт <span class="more"></span></a></li></td>
                                	<td><li><a  href="#" title="сервис">Сервис <span class="more"></span></a></li></td>
                                	<td><li><a href="#" title="доставка">Доставка</a> </li></td>
                                	<td><li><a href="#" title="оплата">Оплата</a> </li></td>
                                	<td> <li class="none" title="контакты"><a href="#">Контакты</a></li></td>
                              	</tr>
                            </table>
                    	</ul>
                    </div>

css

#tp
{
width:100%;
height:auto;
float:left;
}

#clear
{
width:260px;
height:1px;
margin-right:135px;
float:left;
}

#menu_tp
{
width:auto;
min-width:595px;	
height:37px;
float:right;
background:url(img/menu_back.png) repeat;
}


#menu_tp ul
{
float:left;
display:block;
}

#menu_tp li 
{	
height:25px;	
float:left;
display:block;
background:url(img/bord.png) no-repeat right;
padding:10px 12px 0px;
line-height:14px;
list-style:none;
}

#menu_tp a
{
font-size:15px;
color:#fff;
display:block;
height:17px;
padding:0 5px;	
}

#menu_tp a:hover 
{
width:auto;
background:#e8d933;
color:#000;	
}

.none
{
background:none !important;	
}

.more
{
background:url(img/more.png) no-repeat bottom;
display: block;
position:relative;
width:10px;
height:6px;
top:2px;
margin:0 auto;
}

Загнал список в таблицу, чтоб границы были более жесткие, Слева создал пустой див для того, чтобы список от него отталкивался и не расползался на 100% в IE
На это ушло 1.5 дня...

Весь головняк из-за span class="more"