Lista horizontal

frijolerou · #1 (**permalink**) 13/11/2004, 19:57

He estado haciendo una lista (ul) de forma horizontal, pero me ha surgido un pequeño problema con IE(el 5 por lo menos, en otros no he probado)

Esto es lo que tengo:

*CSS
div#caja ul{
margin:0px;
padding:0px;
}
div#caja li{
list-style-type:none;
padding-left:15px;
}

*HTML
<div ="caja">
<ul>
<li>menu</li>
<li>menu2</li>
<li>menu3</li>
</ul>
</div>

En firefox y opera no tengo problemas, ya que la lista aparece horizontal, y cada elemento de la lista separado por 15px (padding-left)

El problemilla es en internet explorer 5 (no he probado en otras versiones), porque los elementos de la lista no toman el padding-left de 15px y aparecen juntitos, uno al lado del otro.

¿hay alguna forma en que los elementos de la llista esten mas separados uno del otro?

En firefox y opera (las caritas representan espacios en blanco):
menu1menu2 menu3

En IE:
menu1menu2menu3

JavierB · #2 (**permalink**) 14/11/2004, 04:13

Hola frijolerou.

Creo que te falta algo:

div#caja li{
display:inline;
list-style-type:none;
padding-left:15px;
}

Te dejo un enlace que te puede resultar interesante:

http://css.maxdesign.com.au/

Saludos,

frijolerou · #3 (**permalink**) 14/11/2004, 10:32

Bah sorry se me fue esa jajajaja... pero sólo olvidé colocar display:inline al momento de postear.

Y sí, vi y probé todos los ejemplos de maxdesign, pero en todos ocurre lo mismo.

este es el codigo completo que uso (un ejemplo nomá):

<html>
<head>
<style type="text/css">
div#caja ul{
margin:0px;
padding:0px;
list-style-type;
}
div#caja li{
display:inline;
padding-left:15px;
}
</style>
</head>
<body>
<div id="caja">
<ul>
<li>menu</li>
<li>menu2</li>
<li>menu3</li>
</ul>
</div>
</body>
</html>

JavierB · #4 (**permalink**) 14/11/2004, 12:50

Hola de nuevo.

Me parece que la primera vez no entendí bien tu duda, a ver si ahora... Añade a div#caja li

margin-left:15px;

Espero que te funcione. Saludos,

frijolerou · #5 (**permalink**) 14/11/2004, 13:16

Probe con margin-left y padding-left, pero IE no consideraba ninguno de los dos.

La unica solucion que he encontrado hasta el momento es, mediante un hack que solo leera IE, asignarle un "ancho" relativo a cada elemento (<li>) de la lista, de esa manera consegui una mayor separacion entre ellos (no se si e sla solucion ideal pero algo es algo jejejej):

div#caja li{
display:inline;
padding-left:15px;
}

* html div#caja li{
width:4em;
}

Gracias por tu tiempo :D

alvaromg · #6 (**permalink**) 14/11/2004, 13:58

Hola frijolerou, IE5.0 (o 5.1, algo así, no recuerdo) no pesca esos atributos que le estás tratando de dar, a diferencia de IE5.5 e IE6, que sí los computa (y por supuesto el resto de los navegadores que cumplen estándares). El hack que mencionas es al parecer la única solución. Ojo, que también lo ve IE5.5. En ese sentido, hay una manera mejor de indicar solo a IE5.0 que lea una CSS. Haces una hoja de estilo, separada, que se llame por ejemplo "ie-5.0.css", con los atributos justos que necesitas, por ejemplo el hack que mencionas, y después en la sección <head> de tu HTML pones:



Ese código solo pueden leerlo los IE's, y en este caso está indicando "si IE es menor que 5.5, compute 'ie-5.0.css'". Esta es una muy buena manera de indicar CSS específicas para que IE los lea (ya que son siempre los más problemáticos), y puedes tener varias de estas declaraciones, pudiendo especificar CSS para cada versión de IE, si necesitas, o para todos, y sin recurrir a hacks (que por lo demás no son CSS válido). Más info:

http://www.virtuelvis.com/archives/158.html

Personalmente, me he estado empezando a despreocupar de IE5.0 (o 5.1), ya que es muy desgastador tratar que todo se vea perfecto en ese navegador, y está usándose cada vez menos. Generalmente IE6 tiene un procesamiento de las CSS bastante apegado a estándares (si se pone la DTD al principio del html), salvo algunos inconvenientes, y por lo tanto lo único que va quedándome para sudar es el IE5.5.

Ojalá te ayude,
Alvaro Medina