Código que falla en Internet Explorer

JavierB · #1 (**permalink**) 16/08/2006, 01:59

Hola a todos.

Tengo el siguiente código:

Código PHP:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"  
   "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
 
<html> 
<head> 
<style type="text/css"> 
#menu { 
  float:left; 
    width:20%; 
  padding:1% 0 1% 3%; /********/ 
} 
#menu ul {padding:0; margin:0; list-style:none; } 
#menu li {display:inline; } 
#menu a {display:block; float:left; width:100%; border:1px solid black; } 
#menu a:hover { 
  background: #DFBA76; /********/ 
} 
</style> 
</head> 
<body> 
<div id="menu"> 
<ul> 
  <li><a href="pagina1.html">Página 1</a></li> 
  <li><a href="pagina2.html">Página 2</a></li>  
</ul> 
</div> 
</body> 
</html>

En Firefox no da problemas, pero en IE al poner el cursor del ratón encima del menú, se desplaza hacia la izquierda. Parece que hay algún problema con las líneas que he puesto con asteriscos, porque si quito una de las dos funciona bien.

¿alguna idea de como solucionarlo?

Gracias por adelantado. Saludos,

KarQ · #2 (**permalink**) 16/08/2006, 06:03

Tan facil como no usar asteriscos, usa algo como /* -------- */ o algo asi, puede que si usas asteriscos IE interprete que el comentario se cierra antes de la cuenta y por eso te falla. Pruebalo y me comentas. Un saludo.

SiR.CARAJ0DIDA · #3 (**permalink**) 16/08/2006, 16:32

No se puede poner un elemento de bloque dentro de uno en linea, ahi lo que deberia flotar son los <li>

angelseron · #4 (**permalink**) 16/08/2006, 17:07

Que hace exactamente el display:block; y en que casos se utiliza?.

gracias.

KarQ · #5 (**permalink**) 16/08/2006, 17:21

El "display:block;" hace que un elemento de linea se comporte como un elemento de bloque, por ejemplo si queremos que las imagenes se posicionen una debajo de otra en lugar de una a continuación de otra podemos meter cada una dentro de una etiqueta <p> (que son elementos de bloque) o bien dar al tag img la propiedad CSS "display:block" para que se comporten como tales.

Un saludo

JavierB · #6 (**permalink**) 17/08/2006, 00:51

KarQ: los asteriscos los he puesto para indicar donde creo que puede estar el problema. Aunque los quites sigue sin funcionar bien en IE

SiR.CARAJ0DIDA: si pongo float:left a la etiqueta <li> en Firefox, el menú sale en horizontal y yo quiero que salga en vertical.

De todas formas gracias a los dos por vuestro interés. Saludos,

SiR.CARAJ0DIDA · #7 (**permalink**) 17/08/2006, 15:31

? si estas poniendo un <li> en linea se supone que va uno al lado del otro...

webosiris · #8 (**permalink**) 17/08/2006, 15:44

Cita:

Iniciado por SiR.CARAJ0DIDA

? si estas poniendo un <li> en linea se supone que va uno al lado del otro...

Para que se entienda a lo que hace referencia Sir Carajodida:

Cita:

#menu li {display:inline; }

¿si lo querés uno debajo del otro para que ponés inline?

JavierB · #9 (**permalink**) 01/09/2006, 02:10

Hola de nuevo.

Retomo este mensaje.

Cita:

Iniciado por webosiris

¿si lo querés uno debajo del otro para que ponés inline?

Si quito la línea #menu li {display:inline; } en Firefox me queda así de horrible:

y, logicamente, quiero que queda de esta forma:

Gracias. Saludos,

KarQ · #10 (**permalink**) 01/09/2006, 03:16

Si quieres que se quede así en teoría no deberías ponerle nada, revisa que no haya otros estilos influyendo ya que en una lista los elementos quedan uno bajo el otro por defecto.

JavierB · #11 (**permalink**) 01/09/2006, 08:30

Hola KarQ

Gracias por contestar.

Los únicos estilos que estoy utilizando para probar son los que puse en mi primer mensaje.

Saludos,

SiR.CARAJ0DIDA · #12 (**permalink**) 01/09/2006, 09:06

sacale el float:left y width:100% a los links,tambien podes sacarle el display:block.

KarQ · #13 (**permalink**) 01/09/2006, 09:30

Vale, según yo veo en IE se desplaza al poner el cursor sobre la lista. Una solucion rápida al problema es no utilizar las medidas del padding de #menu en porcentaje, si lo usas en pixeles el problema desaparece, lo que me gustaría saber es porqué IE hace esto, supongo que el ser un navegador pésimo le hace liarse con las medidas en porcentaje 1ª

.

De todas formas no consigo encontrar la explicación exacta ya que el fallo está provocado de alguna forma por la propiedad background, si la sustituyes por ejemplo por un text-decoration no sucede nada raro al igual que si le aplicas el background al hover del <li> en lugar de al del <a>, pero esto último solo funciona en Mozilla 2ª

Por otro lado veo que asignas display:block a los enlaces para asi poder darles un width, esto en Mozilla funciona perfectamente pero explorer a mi me ha pasado que al asignarles height sigue basandose en el tamaño de la fuente para dar el alto, ha sido una suposicion, pero al comprobarlo he visto que nada tiene que ver con tu fallo pero es interesante comentarlo ya que es otra cosa de las muchisimas a tener en cuenta para optimizar una web para este navegador.

Son posibles soluciones pero a pesar de ello no sabría explicarte porqué 3ª

Espero haberte ayudado. Un saludo.

JavierB · #14 (**permalink**) 01/09/2006, 09:31

Hola SiR.CARAJ0DIDA

Quitando float:left puedo quitar también #menu li {display:inline; } aunque en el puñetero IE sigue moviendose el menú a la izquierda cuando pongo el ratón encima.

width:100% y display:block creo que tengo que dejarlos, porque si los quito los links no quedan al ancho del contenedor (#menu)

Gracias por tu colaboración. Saludos,

JavierB · #15 (**permalink**) 01/09/2006, 09:39

Hola KarQ

Veo que has contestdo mientra yo respondía a SiR.CARAJ0DIDA. Bonito choque de mensajes

Lo de poner el padding en pixels ni se me había ocurrido, pero ciertamente funciona. Lo que ocurre es que estoy con la cabezonería de, en lo posible, no utilizar medidas absolutas. De todas formas me lo anoto para el futuro.

Para mí también es un misterio que tiene que ver un padding en porcentaje con un background

A ver si alguien más inspirado nos saca de la duda.

Gracias de nuevo. Saludos,

SiR.CARAJ0DIDA · #16 (**permalink**) 01/09/2006, 09:57

http://www.eye-speak.com.ar/Herramientas/test.htm

el problema parece que es poner el padding en %, y nunca olvides usar el holly hack en IE. lo mas simple es poner esto arriba de todo:

* html * {zoom:1; }

no valida pero arregla muchos bugs.

JavierB · #17 (**permalink**) 01/09/2006, 10:41

Hola SiR.CARAJ0DIDA

He visto el ejemplo que has puesto y funciona bien. Lastima que no sea código estandar

Lastima que el IE sea un tocape...

Muchas gracias a todos por vuestra ayuda. Saludos,