Foros del Web » Creando para Internet » CSS »

Código que falla en Internet Explorer

Estas en el tema de Código que falla en Internet Explorer en el foro de CSS en Foros del Web. 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" ...
  #1 (permalink)  
Antiguo 16/08/2006, 02:59
Avatar de JavierB
Colaborador
 
Fecha de Ingreso: febrero-2002
Ubicación: Madrid
Mensajes: 25.052
Antigüedad: 15 años, 10 meses
Puntos: 771
Código que falla en Internet Explorer

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:10 13%; /********/
}
#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,
  #2 (permalink)  
Antiguo 16/08/2006, 07:03
Avatar de KarQ  
Fecha de Ingreso: septiembre-2005
Mensajes: 88
Antigüedad: 12 años, 3 meses
Puntos: 1
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.
__________________
KarQ - xC
mi weblog en: http://www.monochromatic.es
  #3 (permalink)  
Antiguo 16/08/2006, 17:32
Avatar de SiR.CARAJ0DIDA  
Fecha de Ingreso: junio-2004
Ubicación: Acá
Mensajes: 1.166
Antigüedad: 13 años, 5 meses
Puntos: 4
No se puede poner un elemento de bloque dentro de uno en linea, ahi lo que deberia flotar son los <li>
__________________
Internet Explorer SuckS
Download FireFox
  #4 (permalink)  
Antiguo 16/08/2006, 18:07
 
Fecha de Ingreso: abril-2005
Mensajes: 247
Antigüedad: 12 años, 8 meses
Puntos: 1
Que hace exactamente el display:block; y en que casos se utiliza?.

gracias.
  #5 (permalink)  
Antiguo 16/08/2006, 18:21
Avatar de KarQ  
Fecha de Ingreso: septiembre-2005
Mensajes: 88
Antigüedad: 12 años, 3 meses
Puntos: 1
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
__________________
KarQ - xC
mi weblog en: http://www.monochromatic.es
  #6 (permalink)  
Antiguo 17/08/2006, 01:51
Avatar de JavierB
Colaborador
 
Fecha de Ingreso: febrero-2002
Ubicación: Madrid
Mensajes: 25.052
Antigüedad: 15 años, 10 meses
Puntos: 771
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,
  #7 (permalink)  
Antiguo 17/08/2006, 16:31
Avatar de SiR.CARAJ0DIDA  
Fecha de Ingreso: junio-2004
Ubicación: Acá
Mensajes: 1.166
Antigüedad: 13 años, 5 meses
Puntos: 4
? si estas poniendo un <li> en linea se supone que va uno al lado del otro...
__________________
Internet Explorer SuckS
Download FireFox
  #8 (permalink)  
Antiguo 17/08/2006, 16:44
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
Cita:
Iniciado por SiR.CARAJ0DIDA Ver Mensaje
? 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?
__________________
Pasamos tus PSD a HTML

Pobre del que lo sabe todo, porque no tiene nada más que aprender ni razón para vivir. -
  #9 (permalink)  
Antiguo 01/09/2006, 03:10
Avatar de JavierB
Colaborador
 
Fecha de Ingreso: febrero-2002
Ubicación: Madrid
Mensajes: 25.052
Antigüedad: 15 años, 10 meses
Puntos: 771
Hola de nuevo.

Retomo este mensaje.

Cita:
Iniciado por webosiris Ver Mensaje
¿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,
  #10 (permalink)  
Antiguo 01/09/2006, 04:16
Avatar de KarQ  
Fecha de Ingreso: septiembre-2005
Mensajes: 88
Antigüedad: 12 años, 3 meses
Puntos: 1
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.
__________________
KarQ - xC
mi weblog en: http://www.monochromatic.es
  #11 (permalink)  
Antiguo 01/09/2006, 09:30
Avatar de JavierB
Colaborador
 
Fecha de Ingreso: febrero-2002
Ubicación: Madrid
Mensajes: 25.052
Antigüedad: 15 años, 10 meses
Puntos: 771
Hola KarQ

Gracias por contestar.

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

Saludos,

Última edición por JavierB; 30/01/2009 a las 11:20
  #12 (permalink)  
Antiguo 01/09/2006, 10:06
Avatar de SiR.CARAJ0DIDA  
Fecha de Ingreso: junio-2004
Ubicación: Acá
Mensajes: 1.166
Antigüedad: 13 años, 5 meses
Puntos: 4
sacale el float:left y width:100% a los links,tambien podes sacarle el display:block.
__________________
Internet Explorer SuckS
Download FireFox
  #13 (permalink)  
Antiguo 01/09/2006, 10:30
Avatar de KarQ  
Fecha de Ingreso: septiembre-2005
Mensajes: 88
Antigüedad: 12 años, 3 meses
Puntos: 1
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.
__________________
KarQ - xC
mi weblog en: http://www.monochromatic.es
  #14 (permalink)  
Antiguo 01/09/2006, 10:31
Avatar de JavierB
Colaborador
 
Fecha de Ingreso: febrero-2002
Ubicación: Madrid
Mensajes: 25.052
Antigüedad: 15 años, 10 meses
Puntos: 771
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,
  #15 (permalink)  
Antiguo 01/09/2006, 10:39
Avatar de JavierB
Colaborador
 
Fecha de Ingreso: febrero-2002
Ubicación: Madrid
Mensajes: 25.052
Antigüedad: 15 años, 10 meses
Puntos: 771
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,
  #16 (permalink)  
Antiguo 01/09/2006, 10:57
Avatar de SiR.CARAJ0DIDA  
Fecha de Ingreso: junio-2004
Ubicación: Acá
Mensajes: 1.166
Antigüedad: 13 años, 5 meses
Puntos: 4
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.
__________________
Internet Explorer SuckS
Download FireFox
  #17 (permalink)  
Antiguo 01/09/2006, 11:41
Avatar de JavierB
Colaborador
 
Fecha de Ingreso: febrero-2002
Ubicación: Madrid
Mensajes: 25.052
Antigüedad: 15 años, 10 meses
Puntos: 771
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,
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 04:06.