Foros del Web » Creando para Internet » CSS »

Lista horizontal

Estas en el tema de Lista horizontal en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 13/11/2004, 19:57
 
Fecha de Ingreso: diciembre-2003
Mensajes: 1.583
Antigüedad: 14 años
Puntos: 13
Lista horizontal

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
__________________
El conocimiento es libre: Movimiento por la Devolución
  #2 (permalink)  
Antiguo 14/11/2004, 04:13
Avatar de JavierB
Colaborador
 
Fecha de Ingreso: febrero-2002
Ubicación: Madrid
Mensajes: 25.052
Antigüedad: 15 años, 9 meses
Puntos: 771
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,
  #3 (permalink)  
Antiguo 14/11/2004, 10:32
 
Fecha de Ingreso: diciembre-2003
Mensajes: 1.583
Antigüedad: 14 años
Puntos: 13
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>
__________________
El conocimiento es libre: Movimiento por la Devolución
  #4 (permalink)  
Antiguo 14/11/2004, 12:50
Avatar de JavierB
Colaborador
 
Fecha de Ingreso: febrero-2002
Ubicación: Madrid
Mensajes: 25.052
Antigüedad: 15 años, 9 meses
Puntos: 771
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,
  #5 (permalink)  
Antiguo 14/11/2004, 13:16
 
Fecha de Ingreso: diciembre-2003
Mensajes: 1.583
Antigüedad: 14 años
Puntos: 13
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
__________________
El conocimiento es libre: Movimiento por la Devolución
  #6 (permalink)  
Antiguo 14/11/2004, 13:58
 
Fecha de Ingreso: agosto-2004
Mensajes: 6
Antigüedad: 13 años, 3 meses
Puntos: 0
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:

<!--[if IE lt 5.5]>
<link rel="stylesheet" type="text/css" href="ie-5.0.css" />
<![endif]-->

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
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 09:26.