Foros del Web » Creando para Internet » CSS »

Extraño comportamiento de Internet Explorer con listas y CSS

Estas en el tema de Extraño comportamiento de Internet Explorer con listas y CSS en el foro de CSS en Foros del Web. Buenas, Estoy haciendo un menu utilizando listas de objetos y CSS. En Mozilla consigo el aspecto que quiero, pero Internet Explorer lo renderiza de otra ...
  #1 (permalink)  
Antiguo 22/03/2005, 17:46
Avatar de Tximis  
Fecha de Ingreso: junio-2004
Ubicación: Bilbao
Mensajes: 328
Antigüedad: 13 años, 6 meses
Puntos: 2
Extraño comportamiento de Internet Explorer con listas y CSS

Buenas,

Estoy haciendo un menu utilizando listas de objetos y CSS. En Mozilla consigo el aspecto que quiero, pero Internet Explorer lo renderiza de otra forma.

El código HTML es el siguiente, una lista de enlaces dentro del DIV "menu":

Código:
<div id="menu">
<ul>
	<li><a href="http://www.example.com">Item 1</a></li>
	<li><a href="http://www.example.com">Item 2</a></li>
	<li><a href="http://www.example.com">Item 3</a></li>
	<li><a href="http://www.example.com">Item 4</a></li>
</ul>
</div>
La hoja de estilos contiene el siguiente código:

Código:
body {
	background: black;
}

li {
	list-style: none;
	list-style-image: url(b1.gif);
	color: white;
}

li:hover {
	list-style-image: url(b2.gif);
}

li a:hover {
	list-style-image: url(b2.gif);
}

#menu {
	width: 10em;
	margin-left: 10px;
	margin-top: 100px;
	font: 13px Verdana, 'Bitstream Vera Sans', Tahoma, Arial, Helvetica, sans-serif;
}

#menu a {
	text-decoration: none;
}

#menu a:hover {
	color: #000000;
	background-color: #999999;
}
Hasta aquí en Internet Explorer y Mozilla se muestra de la misma forma, si quereis podeis comprobarlo vosotros mismos: Prueba 1.

El siguiente paso es añadir "display: block" a los enlaces del DIV "menu" para que cuando pase el ratón por encima el fondo de estos ocupe todo el menu.

Primer problema: En Mozilla se ve correctamente, pero el Explorer mete una separación entre los elementos del menu, este no es el comportamiento que esperaba. ¿Por qué pasa esto? Podeis comprobarlo en: Prueba 2. Pongo un pequeño pantallazo con los dos renders:



Por casualidad pruebo a añadir "width: 10em" a los enlaces del DIV "menu". En Mozilla sigue mostrandose correctamente y en el Explorer parece que se ha solucionado las separaciones entre los elementos del menu, lo teneis en Prueba 3. ¡Pero sorpresa!

Segundo problema: En el Explorer al pasar por encima de los enlaces la imagen de la biñeta cambia pero no está animada, se queda estática. ¿Por qué puede pasar esto, un fallo? ¿Solución?

Muchas gracias por adelantado, Saludos.
  #2 (permalink)  
Antiguo 22/03/2005, 17:53
 
Fecha de Ingreso: febrero-2005
Ubicación: En un BLINK
Mensajes: 184
Antigüedad: 12 años, 10 meses
Puntos: 0
Sobre el problema 1, la opcion 1: Borrar los espacios en blanco entre las etiquetas.
En lugar de
Código:
<li>
<a></a>
</li>
pones todos los elementos de la lista en una misma linea
Código:
<li><a>...</a></li><li><a>...</a></li><li><a>...</a></li><li><a>...</a></li>
La otra es agregar
Código:
 li {_display:inline;}
Sí, el guión bajo es obligatorio.
Bienvenido al mágico mundo de los bugs de Internet Explorer.

Por cierto
Código:
li a:hover {
list-style-image: url(b2.gif);
}
A no acepta la propiedad list-style-image.

Última edición por Remo:Erdosain; 22/03/2005 a las 17:58
  #3 (permalink)  
Antiguo 22/03/2005, 18:41
Avatar de Tximis  
Fecha de Ingreso: junio-2004
Ubicación: Bilbao
Mensajes: 328
Antigüedad: 13 años, 6 meses
Puntos: 2
Gracias!!

Con el primer método no me funciona (li {_display:inline;}), desaparecen en Internet Explorer las biñetas ¿?. Con el segundo truco que propones si se soluciona, ya se vé igual en los dos navegadores, por si lo quereis ver:

http://tximis.net/misc/menu/menu4.html

Por otra parte, y siendo un poco mas "quisquilloso", en Mozilla la biñeta se encuentra alineada verticalmente con el texto, en cambio en Internet Explorer se muestra un poco por encima, ¿Se podría solucionar esto?

Saludos
  #4 (permalink)  
Antiguo 22/03/2005, 19:57
 
Fecha de Ingreso: febrero-2005
Ubicación: En un BLINK
Mensajes: 184
Antigüedad: 12 años, 10 meses
Puntos: 0
No tengo IE como para probar pero te puedo confirmar que Opera tiene un problema alineando la imagen que pones con list-style-image. Quizás IE también lo tiene. La única solución que se me ocurre es que uses una imagen de fondo.
Código:
li {background:#fff url(...) no-repeat center left;}
o como mejor se adapte a tu diseño.
  #5 (permalink)  
Antiguo 16/03/2009, 07:58
 
Fecha de Ingreso: septiembre-2006
Mensajes: 6
Antigüedad: 11 años, 2 meses
Puntos: 0
De acuerdo Respuesta: Extraño comportamiento de Internet Explorer con listas y CSS

hola amigo tube el mismo problema y hay otra forma de solucionarlo


a { zoom:1;}

con eso se corrgie el error q por cierto solo ocurre en IE5 e IE6 porq los demas tienen mejor control de ese error

saludos
  #6 (permalink)  
Antiguo 16/03/2009, 08:21
Avatar de punk567  
Fecha de Ingreso: octubre-2006
Ubicación: Montevideo
Mensajes: 265
Antigüedad: 11 años, 2 meses
Puntos: 5
Respuesta: Extraño comportamiento de Internet Explorer con listas y CSS

hola, creo qu es: #menu a {display:block }

saludos
  #7 (permalink)  
Antiguo 16/03/2009, 09:41
Avatar de webosiris
Moderador egiptólogo
 
Fecha de Ingreso: febrero-2002
Ubicación: Luxor, Egipto
Mensajes: 10.727
Antigüedad: 15 años, 10 meses
Puntos: 997
Respuesta: Extraño comportamiento de Internet Explorer con listas y CSS

por favor, miren la fecha de los mensajes, este mensaje es de hace 4 años.
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.
Tema Cerrado




La zona horaria es GMT -6. Ahora son las 18:51.