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?

[juaniquillo]

que extraño, no tienes un ancho específicos en los <li>. ¿Puede ser el hecho de que tienes unos | entre los <li>?

[cleft]

Si lo que deseas es nada mas tener esa lista de enlaces horizontalmente, suficiente con un display: inline para el <li>

Código:

#indice_inferior ul li {
	margin-left: 5px;
	display: inline;
	}

Por otra parte, cuando mencionaste que al darle un ancho te afecta los "|", lo que podrias hacer es definirle una clase a los <li> que contienen esas separaciones, y via CSS darle un ancho menor a esa clase.

Iniciado por darkgaze

Ojalá hubiera unas web developer tools como en Mozilla para poder ver qué espacio ocupa cada elemento y comprobar.

No se si esto se acerca a lo que deseas para IE:
Internet Explorer Developer Toolbar

[Mikmoro]

Hola, darkgaze.

Creo que la cosa es que simplemente no te cabe.
Quítale el width: 516px; a tu selector #indice_inferior, y el width: auto a #indice_inferior ul li, y resuelto.

El width auto no lo necesitan porque al estar flotados a la izquierda, ocuparán lo que ocupe su contenido; y el width de su contenedor tampoco lo necesitas porque medira en total lo que necesite por su contenido, ni más ni menos, a no ser que lo quieras limitar por algo,y claro, ocurre lo que te estaba pasando, debido a la interpretación de algunas medidas de Explorer.

Mikel.

[darkgaze]

Ostras que sistema
MUCHAS GRACIAS.

y gracias por el developer.

Ahora está más claro.

Lo del tamaño de los | no me importa. así creo que funcionará bien. Si le defino un ancho no se adaptará a la gente que quiera un txto más grande o pequeño.


Un saludo