Problema IE - Firefox extraño. Incluyo código y fotos.

[darkgaze]

Hola.

Ved, ante todo, estas dos imágenes:

en firefox:
http://www.thehiddenfactory.com/fox.bmp

en IE:
http://www.thehiddenfactory.com/ie.bmp


Véis el problema supongo. En IE sale mal. Esto siempre pasa, esta vez no se como arreglarlo!

yo me refiero a la linea de abajo. El de arriba sale bien. Algún problema con los anchos. Al final incluyo lo que opino.

Aquí tenéis el código CSS:

Código:

#indice_inferior {
	text-align: center;
	font-weight: bold;
	width: 516px;
	padding-left: 220px; 
	font-size: 14px;
	}

#indice_inferior ul{
	list-style-type: none;
	}

#indice_inferior ul li {
	margin-left: 5px;
	float: left;
	height: 15px; width: auto;
	}

Aquí tenéis el código de la lista:

Código HTML:

 <ul>

	<li><a href='index.php'>
	Inicio
	</a></li>
	
	<li>|</li>

	<li><a href='busqueda.php?sm'>
	Buscar casa
	</a></li>

	<li>|</li>
	
	<li><a href='listado.php'>
	Ver todas
	</a></li>
	
	<li>|</li>
	
	<li><a href='nuevo_alojamiento.php'>
	A&ntilde;adir casa
	</a></li>

	<li>|</li>
	
	<li><a href='construccion.php'>
	Turismo en &Aacute;vila
	</a></li>

	</ul> 

Bien. ahora he probado a poner
width: auto;
width: un tamaño, con lo que daba problema porque los "|" también son elementos de la lista.

De verdad. No se por qué demonios hace eso el explorer, si tiene sitio de sobra!.
Ojalá hubiera unas web developer tools como en Mozilla para poder ver qué espacio ocupa cada elemento y comprobar.



Vuestra ayuda es esencial. Se os ocurre algo?