{"id":182,"date":"2008-12-23T13:30:02","date_gmt":"2008-12-23T12:30:02","guid":{"rendered":"http:\/\/www.sortea2.com\/blog\/?p=182"},"modified":"2008-12-23T14:43:55","modified_gmt":"2008-12-23T13:43:55","slug":"problemas-css-en-internet-explorer","status":"publish","type":"post","link":"https:\/\/www.sortea2.com\/blog\/2008\/12\/problemas-css-en-internet-explorer\/","title":{"rendered":"Problemas CSS en Internet Explorer"},"content":{"rendered":"

Problemas de CSS en Internet Explorer<\/span> <\/p>\n

Internet Explorer tiene una manera de entender CSS muy \u201cpeculiar\u201d que\u00a0 hace que todos los dise\u00f1adores web tengan que dedicar gran parte de su tiempo en hacer que su proyecto funcione particularmente en Internet Explorer. Esto es una gran p\u00e9rdida de tiempo y puede que de dinero, pero que no hay m\u00e1s remedio que afrontar, por esto:<\/p>\n

\"estadisticas_navegadores.jpg\"<\/a><\/p>\n

Hay que preocuparse por el volumen de visitas que van a llegar al website por parte de Internet Explorer, porque es tal que no se puede despreciar.<\/p>\n

Caso particular<\/span> <\/p>\n

Particularmente, en Sortea2, nuestra p\u00e1gina de sorteos<\/a>, tambi\u00e9n tuvimos que lidiar con estos problemas, tuvimos que tomar medidas porque la p\u00e1gina, que se visualizaba correctamente en firefox<\/a>, opera<\/a>, etc., era impresentable en Explorer<\/a>, las cosas normalmente se montaban unas encima de otras y tal.<\/p>\n

Qu\u00e9 cosas dan problemas<\/span> <\/p>\n

Tras haber terminado el dise\u00f1o de Sortea2, he llegado a la conclusi\u00f3n de que estas cosas son las que dan problemas:<\/p>\n

    \n
  1. Listas.<\/li>\n
  2. M\u00e1rgenes negativos para posicionar.<\/li>\n
  3. Posicionamiento normal.<\/li>\n
  4. Desbordamiento de divs.<\/li>\n
  5. Im\u00e1genes de fondo.<\/li>\n<\/ol>\n

    1.\u00a0 Las listas es lo que habitualmente m\u00e1s problemas da, cuando quieres formatearlas con padding y margin suelen tratar las cosas de diferente manera que los navegadores normales. Por ejemplo, no puedes variar el valor de margin-left en las listas para que est\u00e9n alineadas a la izquierda con tan solo poner: \u201cmargin-left:0px;\u201d.
    Tambi\u00e9n suelen dar problemas las listas que se colocan a lo ancho (float:left;), hay que ir probando con qu\u00e9 valores funcionan bien. Por ejemplo, en nuestro men\u00fa horizontal, el valor float:left; hab\u00eda que ponerlo en #menu_horizontal li a {} para que funcionase, mientras que en otros lugares se pod\u00eda colocar directamente en #menu_horizontal li {}.<\/p>\n

    2. Los m\u00e1rgenes negativos no s\u00e9 exactamente por qu\u00e9 dan tantos problemas. A veces funcionan, otras veces no, y otras veces hay que poner valores distintos a lo habitual para que se coloque en el lugar que se desea. El mejor ejemplo es en la parte de arriba de sortea2, en la que se ve una diferencia de colocaci\u00f3n entre cualquier navegador y Internet Explorer, esto es debido a que a veces los m\u00e1rgenes negativos no funcionaban y tuvimos que intentar colocar las cosas con otros valores.<\/p>\n

    3. El posicionamiento normal, con \u201cposition:relative y absolute\u201d no suele dar muchos quebraderos de cabeza, simplemente algunas veces hay que cambiar los valores un poco para que las cosas cuadren.<\/p>\n

    4. El desbordamiento de divs tiene su \u201cparticularidades\u201d en Internet Explorer cuando se quiere hacer \u201coverflow\u201d. Normalmente al desbordarlo suele tener despu\u00e9s un tama\u00f1o extra\u00f1o que cuesta colocar. Esto nos pas\u00f3 con el div #resultado, que se despliega en la pantalla de sorteos simples<\/a> al hacer un sorteo, en firefox funciona perfectamente, pero en internet explorer se ve como se contrae un poco cuando la lista de ganadores es demasiado grande y hace que salga el scroll en el div.<\/p>\n

    5. Las im\u00e1genes de fondo se suelen colocar correctamente y tal, el problema es el orden en que se cargan. Por ejemplo, al principio, en las pesta\u00f1as que se utilizan cuando se utiliza el buscador o en la pantalla de Mis Sorteos, utiliz\u00e1bamos un hover que consist\u00eda en otra imagen, Bien, pues firefox y opera cargaban esa imagen antes de que terminara de cargar la p\u00e1gina, por lo que el efecto se hac\u00eda correctamente; el problema lo daba Internet Explorer, porque se cargaba la imagen en el momento en que se hac\u00eda el hover, con lo que hab\u00eda que esperar un tiempo para ver el efecto. Fue tan desastroso el resultado que optamos por subrayar esos links al pasar por encima y listo, de camino lo dejamos igual para ambos navegadores.<\/p>\n

    Soluciones<\/span> <\/p>\n

    La soluci\u00f3n por la que optamos nosotros fue: <\/p>\n