comparte el articulo 

Soluciones a los problemas de visualización en Internet Explorer

Actualizado el 05/10/2013 < > 28 Cometarios

Resumen: Damos un repaso a las técnicas más usadas para lidiar con la tarea de conseguir que nuestra web se vea bien en todos los navegadores, poniendo especial atención a Internet Explorer, puesto que es el que más problemas causa.

Si estás creando una página web y te encuentras ya en la fase de maquetación web, entonces estás en la fase en la que llega la hora de convertir tu diseño en realidad. Se trata de plasmar aquello que tenías pensado en HTML y CSS. Esto puede resultar emocionante, pero muchas otras veces, y más si se cuenta con poca experiencia, puede llegar a ser desesperante.

El problema de la visualización en Internet Explorer

Conforme se avanza en este proceso de maquetación, uno se da cuenta que no es suficiente con maquetar intentando que se vea bien en TÚ navegador, hay que intentar que todo usuario que entre a tu web desde cualquier otro navegador, pueda verla tan bien como tú. Intuitivamente cabría pensar que esto sucede así por defecto, que sin que tengamos que hacer nada la página se va a ver siempre tal y como la estamos viendo nosotros en nuestro navegador.

Nada más lejos de la realidad, cada navegador es un mundo, o mejor dicho tiene una forma ligeramente distinta de renderizar el HTML y el CSS. En el caso de Internet Explorer, cada una de sus versiones (ie6, ie7, ie8…) tiene una forma MUY distinta de interpretar el código que tú estás escribiendo. Como resultado tenemos un gran problema, un usuario que entre a tu web desde Internet Explorer 6 muy probablemente no va a ver lo mismo que está viendo un usuario que entra desde Firefox, o incluso desde Internet Explorer 7 u 8.

La solución puede resultar complicada, sobre todo sin experiencia, puesto que conforme arreglas los estropicios de un navegador, con frecuencia algo se estropea en otro.

Internet Explorer 6 y 7, un duro reto para los diseñadores

Por mi experiencia de los años que llevo trabajando como diseñadora web, si el código que estás construyendo está bien hecho y si el CSS es correcto, tu web debería verse bien en todos los navegadores comunes, salvo en Internet Explorer 6 y a veces en ie7. Los navegadores más comunes, que suponen un 99% de la cuota de mercado, son estos: Internet Explorer 6+, Firefox 3+, Chrome, Safari yOpera 9+.

Como decía, si tu web está bien hecha, los problemas de visualización los vas a tener con Internet Explorer 7 y 6. El uso de Internet Explorer 6, un navegador que tiene más de 10 años, tiende a desaparecer aunque a veces parezca lo contrario, pero aún lo usa un % de usuarios importante, por lo que no hay que perderlo de vista en nuestros diseños.

Parece mentira que todavía tengamos estos problemas los diseñadores web. Vamos a ver muy pronto la implantación universal de lenguajes tan avanzados como HTML5 o CSS3, tenemos frameworks de JavaScript como jQuery, que hace efectos increíbles en las páginas web… pero todavía no somos capaces de librarnos de Internet Explorer 6.

Entonces, ¿qué hacemos con Internet Explorer?

Si estás familiarizado con el diseño de páginas web y más en concreto con el uso de CSS, sabrás lo que son los hacks (y seguramente los habrás aplicado más de una vez). Para quien no lo sepa, los hacks son trucos que usamos los diseñadores para conseguir que las páginas web se vean igual en todos los navegadores, jugamos con los errores de los navegadores para conseguir una correcta visualización.

Como profesional, no recomiendo su uso. Los hacks son trucos, trampitas que hemos tenido la suerte de descubrir, pero que al fin y al cabo tienen un comportamiento extraño y no habitual, por lo que no podemos estar seguros de que sigan comportándose así en un futuro. Si maquetas tu web usando un hack y éste deja de ser útil dentro de un año, ten por seguro que tu web se verá mal nuevamente.

Hay otras técnicas más recomendables para conseguir que se vea bien tu web en distintos navegadores. Las vemos a continuación.

Usar un reset para CSS

Los navegadores tienen por defecto un estilo básico para el código HTML. Por ejemplo los encabezados (H1, H2, etc.) se visualizan por defecto a mayor tamaño y en negrita, los enlaces en azul y subrayados, se dan márgenes y paddings a ciertos elementos, etc. Esto puede provocar comportamientos extraños de las propiedades CSS a la hora de diseñar nuestras páginas web, y la mayoría de los problemas de compatibilidad entre navegadores pueden venir de ahí sin saber nosotros porqué. Lo mejor es empezar una hoja en blanco de verdad, y para eso tenemos que resetearla. Yo suelo usar el reset de Eric Meyer, pero hay otros, como el de Yahoo!.

A parte de usar un reset prefabricado, como estos que os presento, lo ideal es adaptarlo a cada diseño en el que trabajemos para lograr una mayor flexibilidad y no escribir código innecesariamente.

Usar una hoja de estilos distinta para Internet Explorer

Aquí viene la parte más importante de este artículo, donde aprenderemos como hacer una hoja de estilos para Internet Explorer o incluso para una versión concreta del mismo. Para lograr esto se usan los comentarios condicionales, que son etiquetas que Internet Explorer interpreta, mientras que el resto de navegadores las toman como simples comentarios y las ignoran. Por tanto, todo lo que vaya dentro de esas etiquetas sólo será leído por Internet Explorer. Esa es toda la magia, ¿bonito no?.

Para usar los comentarios condicionales en Internet Explorer, tenemos que escribir en el código fuente de nuestra web, dentro de las etiquetas <head> y </head>, las siguientes líneas:

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

Con esto básicamente estamos proporcionado a Internet Explorer una hoja de estilos (ie.css) que el resto de navegadores no pueden leer. Como veis colocaremos ENCIMA la hoja de estilos común a todos los navegadores (general.css), y debajo los comentarios condicionales con la hoja de estilos para Internet Explorer, donde pondremos todas las correcciones necesarias.

Un ejemplo, si te encuentras haciendo la maquetación de una web y tienes un problema con los márgenes del id #header, por ejemplo, puedes darle un margen en el CSS común (que leerán todos los navegadores, incluido Internet Explorer) y darle un margen distinto en el CSS para Explorer (que sólo leerá Explorer, y sobrescribirá el valor del CSS común).

Usar una hoja de estilos para una versión concreta de Internet Explorer

Esto también es posible, y lo haremos igualmente por medio de los comentarios condicionales. En el código anterior, tendremos que sustituir estas líneas:

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

Por alguna de las siguientes, dependiendo de a qué versión de Explorer queramos apuntar:

Comentarios condicionales para todos los navegadores menos IE

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

Comentarios condicionales sólo para IE 7

<!--[if IE 7]>
	<link rel="stylesheet" type="text/css" href="ie7.css">
<![endif]-->

Comentarios condicionales sólo para IE 6

<!--[if IE 6]>
	<link rel="stylesheet" type="text/css" href="ie6.css" />
<![endif]-->

Comentarios condicionales sólo para IE 5

<!--[if IE 5]>
	<link rel="stylesheet" type="text/css" href="ie5.css" />
<![endif]-->

Comentarios condicionales sólo para IE 5.5

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

Comentarios condicionales para IE 6 y versiones más antiguas

<!--[if lt IE 7]>
	<link rel="stylesheet" type="text/css" href="ie6-old.css" />
<![endif]-->
<!--[if lte IE 6]>
	<link rel="stylesheet" type="text/css" href="ie6-old.css" />
<![endif]-->

Comentarios condicionales para IE 7 y versiones más antiguas

<!--[if lt IE 8]>
	<link rel="stylesheet" type="text/css" href="ie7-old.css" />
<![endif]-->
<!--[if lte IE 7]>
	<link rel="stylesheet" type="text/css" href="ie7-old.css" />
<![endif]-->

Comentarios condicionales para IE 8 y versiones más antiguas

<!--[if lt IE 9]>
	<link rel="stylesheet" type="text/css" href="ie8-old.css" />
<![endif]-->
<!--[if lte IE 8]>
	<link rel="stylesheet" type="text/css" href="ie8-old.css" />
<![endif]-->

Comentarios condicionales para IE 6 y versiones más modernas

<!--[if gt IE 5.5]>
	<link rel="stylesheet" type="text/css" href="ie6-up.css" />
<![endif]-->
<!--[if gte IE 6]>
	<link rel="stylesheet" type="text/css" href="ie6-up.css" />
<![endif]-->

Comentarios condicionales para IE 7 y versiones más modernas

<!--[if gt IE 6]>
	<link rel="stylesheet" type="text/css" href="ie7-up.css" />
<![endif]-->
<!--[if gte IE 7]>
	<link rel="stylesheet" type="text/css" href="ie7-up.css" />
<![endif]-->

Comentarios condicionales para IE 8 y versiones más modernas

<!--[if gt IE 7]>
	<link rel="stylesheet" type="text/css" href="ie8-up.css" />
<![endif]-->
<!--[if gte IE 8]>
	<link rel="stylesheet" type="text/css" href="ie8-up.css" />
<![endif]-->

Otras alternativas: Universal IE 6 CSS

Diseñar una página web y conseguir que una web se vea bien en Internet Explorer 6 es una tarea muy complicada. Muchas empresas y profesionales están dejando poco a poco de dar soporte a este navegador, ignorándolo en sus diseños. Esto es debido principalmente a que su uso se está reduciendo con el paso del tiempo en beneficio del uso de navegadores más modernos y seguros. Y no nos engañemos, también se debe a que resulta muchas veces una pesadilla lidiar con este navegador.

En lugar de ignorar por completo a sus usuarios, y permitir que una web se vea rematadamente mal en ie6, podemos optar por una solución alternativa que no deje fuera al porcentaje de usuarios nada despreciable que aún siguen utilizándolo.

Para ello, la gente de for a beautiful web ha creado un proyecto interesante, universal IE 6 CSS. Básicamente lo que han hecho es crear una hoja de estilos muy básica que permite que nuestra web se visualice correctamente en Internet Explorer 6. Este es el código que hay que poner:

<!--[if !IE 6]>
  <link rel="stylesheet" type="text/css" media="screen, projection" href="css-comun.css" />
<!--<![endif]-->

<!--[if gte IE 7]>
  <link rel="stylesheet" type="text/css" media="screen, projection" href="css-ie.css" />
<![endif]-->

<!--[if lte IE 6]>
  <link rel="stylesheet" type="text/css" media="screen, projection" href="http://universal-ie6-css.googlecode.com/files/ie6.0.3.css" />
<![endif]-->

Ahora sí, con el uso de estas técnicas, estaremos en mejores condiciones de hacer páginas web que puedan ser visualizadas y navegadas del mismo modo (en la manera de lo posible) en todos los navegadores.

Publicado el 09/09/2010, última actualización 05/10/2013.

Licencia: Eres libre de distribuir este artículo bajo los términos de la licencia creative commons, siempre que pongas claramente el siguiente texto en la página que publica el artículo (enlaces activos incluidos) y conserves los enlaces dentro del texto:

Autor: Verónica Milán

URL: Soluciones a los problemas de visualización de las web en Internet Explorer

Añadir Comentario (Subir al texto)

28 Cometarios

  1. beleita

    Yo sigo prefiriendo usar una sóla CSS para todos los navegadores (se puede hacer compatible para todos), porque si luego hay que actualizar el site o hacer cambios es menos complicado. Sobre todo para webs grandes.

    Jueves, 9 de septiembre 2010

  2. Verónica Milán

    Cuestión de preferencias de organización supongo, a mí me es más fácil separar de esa manera y cuando tengo que retocar código busco más rápidamente. Lo que sí es cierto es que con los años la hoja de estilos para Internet Explorer se hace cada vez más pequeña ;)

    Viernes, 10 de septiembre 2010

  3. Ana

    Verónica, los comentarios condicionales ¿se ubican “dentro de las etiquetas” significa dentro del Head?
    Se pueden pegar tal cual los ponéis aquí, “y ya está”? Y luego proceder normalmente?
    Gracias y un saludo cordial.

    Sábado, 18 de septiembre 2010

  4. Verónica Milán

    Ana,

    Sí, van dentro de las etiquetas <head> y </head> como la hoja de estilos normal (voy a modificar el artículo porque me comí esa parte), y el código es tal cual, acordándote de poner la ruta donde se encuentra tu archivo css… después, todo lo que especifiques en esa hoja de estilos sólo será leído por Internet Explorer.

    Suerte! ;)

    Sábado, 18 de septiembre 2010

  5. Ana

    Muchas gracias!

    Martes, 21 de septiembre 2010

  6. Ana

    Ups, creo que estoy algo confusa… El “reset” se coloca en el documento html o en la css?
    Y los comentarios especiales para IE se colocan en una css especial para IE, o en el html? Aghhh :)

    Martes, 21 de septiembre 2010

  7. Ana

    Una pregunta más, Verónica. Por lo que voy entendiendo, p.e. si en el id header en IE 7 (por ejemplo) se vé mal, dices que entonces se cree una css especial para ese navegador. ¿Quieres decir que se haga “a pelo” según se vea en uno u otro? es decir, suponiendo que en IE 7 se vea muy estrecho, crear una css especial para el IE 7 haciéndolo más amplio “a pelo” (con un href concreto para él), y si (por ejemplo) en IE 6 se vé más amplio, crear otra css especial para el IE 8 haciéndolo más estrecho “a pelo” (con otro href concreto para ese), y así sucesivamente?
    Espero perdones mi analfabetismo pero recién empiezo y he de entregar algo! Un abrazo.

    Martes, 21 de septiembre 2010

  8. Verónica Milán

    :) jeje no te preocupes Ana, al principio cuesta aclararse. Por partes:

    El reset se coloca en el css, y va lo primero de todo, antes de empezar a declarar propiedades de la página.

    Los comentarios condicionales van en el html, la idea es enlazar a una hoja de estilos externa, como se hace normalmente dentro del html, pero meter esa hoja de estilos dentro de los comentarios condicionales para que sólo acceda a ella Internet Explorer.

    La idea de los comentarios condicionales es más o menos como dices, “a pelo”, pero claro, no te lies tampoco a poner hojas de estilo para cada explorador… si está bien maquetado posiblemente sólo te haga falta tocar cosas para ie6, y tal vez algo para ie7, pero no abuses de esto porque tampoco es el sentido. La idea es recurrir a ello cuando no hay manera de lograr crossbrowsing con la hoja de estilos general.

    Saludos.

    Martes, 21 de septiembre 2010

  9. Ana

    Ahora aclarado. Muchas gracias de nuevo!

    Miércoles, 22 de septiembre 2010

  10. Antonio

    No lo consigo :(
    Pongo el comentario entre el head, pero no me lee el css que he creado…sólo hace caso al normal…
    De todas formas, muchísimas gracias por poner esto, por que me estaba desesperando, imagino que cuando lo consiga, será algo bastante fácil :)

    Miércoles, 10 de noviembre 2010

  11. Antonio

    Verónica, he conseguido hacer que me lea la hoja alternativa pero… ahora ya no me lee la otra para firefox :(

    he puesto esto:

    y ahora genial, tengo el explorer bien, pero el firefox mal… cómo se hace porfiii, no será por no intentarlo…

    Miércoles, 10 de noviembre 2010

  12. Verónica Milán

    Antonio, la hoja para Internet Explorer va ANTES que la hoja normal para el resto de navegadores. Puede ser eso.

    Jueves, 11 de noviembre 2010

  13. jamape

    Hola! Muy interesante el artículo, me va a ser de gran utilidad!

    Es muy necesario/recomendable realizar el reset? Cuales son los mayores problemas de no utilizarlo?

    Gracias de antemano.

    Miércoles, 15 de diciembre 2010

  14. Verónica Milán

    Te recomiendo que lo uses por costumbre en cada web que hagas. El reset te permite poner a cero todos los estilos que vienen por defecto de los navegadores, porque incluso cuando todavía no has dado estilos a nada, cada navegador tiene por defecto estilos predeterminados para cosas como los encabezados, márgenes, etc.

    Con el reset eliminas problemas de compatibilidad entre navegadores, si no lo usas vas a tener más problemas de los necesarios para hacer que tu web se vea bien en los distintos navegadores. Así que sí, en mi opinión es necesario.

    Viernes, 7 de enero 2011

  15. Laura

    Encontré tu artículo buscando una solución a esto de IE, ya probé poniendo los comentarios condicionales, pero IE no me reconoce la hoja de estilos que le asigno :( Lo pongo tal cual aquí los explicas (claro cambiando la ruta de mi hoja de estilos) pero nada.

    No tengo ningún problema con Firefox, Chrome, Safari u Opera, el problema viene con IE9 que no reconoce ni la hoja de estilos gral y mucho menos la que le asigno con el método que brindas.

    ¿Con este comentario no importa que versión de IE sea?

    Lo curioso es que tengo una web que construí hace unos meses y aún no usaba mucho las hojas de estilo, así que todos los estilos están asignados dentro de cada html y solo así explorer reconoce los estilos. Con las hojas de estilo reconoce fondo, fuente, etc, pero me ignora sobre todo losvalores de margenes y otras pocas cosas.

    No sé si tenga que ver el programa que uso (dreamweaver) o que soy usuario mac, pero es una tontería, me desquicia IE :(

    Muchas gracias, espero me puedas ayudar un poco.

    Martes, 5 de julio 2011

  16. Laura

    ups! no sale el comentario, pero es el primero de todos el que dice: if IE

    Probé poniendole IE 9 pero tampoco :(

    Martes, 5 de julio 2011

  17. Verónica Milán

    Es así como funciona Laura, revisa la ruta de la hoja de estilos, el nombre del archivo, etc.

    Jueves, 7 de julio 2011

  18. Diego Asturias

    Excelente post! Es cierto que es muy triste que a estas alturas los diseñadores web tengamos que seguir sufriendo la incompetencia el explorer. Puede que los condicionales sean lo mas practico para solicionar errores en versiones diferentes del ie.

    Jueves, 27 de octubre 2011

  19. Xan

    Hola Verónica, hace mucho tiempo que escribiste este post, pero yo lo encontré hoy y SOLUCIONÉ mis problemas con la web. Ahora se ve de maravilla en todos los exploradores. Eres mi heroina!!!. Fue tan sencillo como subir la hoja para IE ANTES de la normal. La tenía más abajo. MUCHAS GRACIAS.

    Miércoles, 12 de septiembre 2012

  20. Emerre

    Hola Verónica. No conseguía solucionar que mi página se viese ni medio bien con Explorer, y gracias a tu post lo he conseguido. Estoy flipando de lo fácil que me ha resultado.
    Muchas gracias por tus explicaciones, es fabuloso que haya gente como tú.
    Un saludo.

    Miércoles, 3 de octubre 2012

  21. JACKIE

    Impecable y super claros todos los datos y soluciones Gracias

    Martes, 23 de octubre 2012

  22. EDER

    Saludos Vero:

    Tengo un problema con la visualización de un menu. Hice un CSS especial para IE7 y el General para los demás exploradores. Todo esta bien pero me he dado cuenta que el CSS general esta afectado al que hice para IE7. Principalmente en la visualización de un menu que hace que aparezca encimado. Lo curioso es cuando le quito el CSS general y dejo solo el de IE7 se ve perfecto.

    ¿Porque el CSS general esta afectando a la visualización del menu en IE7? Puse el comentario para IE7 tal y como viene explicado aqui, antes del CSS general, etc

    Espero me ayudes. gracias

    Jueves, 11 de julio 2013

  23. Alex

    Excelente post muchas gracias Verónica es info muy muy útil.

    Martes, 27 de agosto 2013

  24. Jesus

    amigo lo que dices es cierto. Yo no me complique solo pongo un mensaje de que es recomendable visitarnos de otro explorador.

    Martes, 17 de diciembre 2013

  25. josep

    dentro del ie7.css que va el codigo del reset

    Lunes, 23 de diciembre 2013

  26. andres.tilo

    yo tengo este estilo y me funciona muy bien con mozzilla chorme opera pero explorer 10 no como hago para que sea compatible, les agradezco
    Nota: el funciona bn en el index pero cuando abro una frame no pailas.
    .menu
    {
    width: 100%;
    margin: 0;
    padding: 2px 0 0 0;
    list-style: none;
    background-color: #014187;
    background: -moz-linear-gradient(#5085E7, #014187);
    background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #014187),color-stop(1, #5085E7));
    background: -webkit-linear-gradient(#5085E7, #0159BA);
    background: -o-linear-gradient(#5085E7, #014187);
    background: -ms-linear-gradient(#5085E7, #014187);
    background: linear-gradient(#5085E7, #014187);
    /*-moz-border-radius: 50px;
    border-radius: 50px; */
    -moz-box-shadow: 0 2px 1px #9c9c9c;
    -webkit-box-shadow: 0 2px 1px #9c9c9c;
    box-shadow: 0 2px 1px #9c9c9c;
    }

    .menu li
    {
    float: left;
    padding: 0 0 10px 0;
    position: relative;
    line-height: 0;
    }

    .menu a
    {
    float: left;
    height: 25px;
    padding: 0 20px;
    color: #fff;
    text-transform: uppercase;
    font: bold 12px/25px Arial, Helvetica;
    text-decoration: none;
    text-shadow: 0 1px 0 #000;
    }

    .menu li:hover > a
    {
    color: #fafafa;
    }

    *html .menu li a:hover /* IE6 */
    {
    color: #fafafa;
    }

    .menu li:hover > ul
    {
    display: block;
    }

    /* Sub-menu */

    .menu ul
    {
    list-style: none;
    margin: 0;
    padding: 0;
    display: none;
    position: absolute;
    top: 35px;
    left: 0;
    z-index: 99999;
    background: #5085E7;
    background: -moz-linear-gradient(#5085E7, #014187);
    background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #5085E7));
    background: -webkit-linear-gradient(#5085E7, #014187);
    background: -o-linear-gradient(#5085E7, #014187);
    background: -ms-linear-gradient(#5085E7, #014187);
    background: linear-gradient(#5085E7, #014187);
    -moz-box-shadow: 0 0 2px rgba(255,255,255,.5);
    -webkit-box-shadow: 0 0 2px rgba(255,255,255,.5);
    box-shadow: 0 0 2px rgba(255,255,255,.5);
    -moz-border-radius: 5px;
    border-radius: 5px;
    }

    /*agregada*/
    .menu ul ul
    {
    top: 0;
    left: 100%;
    }

    .menu ul li
    {
    float: none;
    margin: 0;
    padding: 0;
    display: block;
    -moz-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
    -webkit-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
    box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
    }

    .menu ul li:last-child
    {
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    }

    .menu ul a
    {
    padding: 10px;
    /*height: 10px;*/ /*agregada*/
    height: auto;
    /*width: 130px;*/ /*agregada*/
    line-height: 1;
    display: block;
    white-space: nowrap;
    float: none;
    text-transform: none;
    }

    *html .menu ul a /* IE6 */
    {
    height: 10px;
    /*width: 150px;*/
    }

    *:first-child+html .menu ul a /* IE7 */
    {
    height: 10px;
    /*width: 150px;*/
    }

    .menu ul a:hover
    {
    background: #0186ba;
    background: -moz-linear-gradient(#04acec, #0186ba);
    background: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));
    background: -webkit-linear-gradient(#04acec, #0186ba);
    background: -o-linear-gradient(#04acec, #0186ba);
    background: -ms-linear-gradient(#04acec, #0186ba);
    background: linear-gradient(#04acec, #0186ba);
    }

    .menu ul li:first-child > a
    {
    -moz-border-radius: 5px 5px 0 0;
    border-radius: 5px 5px 0 0;
    }

    .menu ul li:first-child > a:after
    {
    content: ”;
    position: absolute;
    left: 30px;
    top: -8px;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 8px solid #fff;
    }

    /* agregada */
    .menu ul ul li:first-child a:after
    {
    left: -8px;
    top: 12px;
    width: 0;
    height: 0;
    border-left: 0;
    border-bottom: 5px solid transparent;
    border-top: 5px solid transparent;
    border-right: 8px solid #fff;
    }

    .menu ul li:first-child a:hover:after
    {
    border-bottom-color: #04acec;
    }

    .menu ul ul li:first-child a:hover:after
    {
    border-right-color: #04acec;
    border-bottom-color: transparent;
    }

    .menu ul li:last-child > a
    {
    -moz-border-radius: 0 0 5px 5px;
    border-radius: 0 0 5px 5px;
    }

    /* Clear floated elements */
    .menu:after
    {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: ” “;
    clear: both;
    height: 0;
    }

    *html .menu { zoom: 1; } /* IE6 */
    *:first-child+html .menu { zoom: 1; } /* IE7 */

    #encabezado
    {
    width:100%;
    height:78px;
    }

    Martes, 3 de junio 2014

  27. cristhian

    veronika podria explicar unh poco mas al detalle el punto de los condicionales … gracias

    Martes, 30 de septiembre 2014

  28. Daniel

    Buenas tardes, se que el artículo fue publicado mucho antes que que yo decidiera estudiar programación, ahora la cuestión es la siguiente, siendo que internet explorer ya va en la versión 11 tengo problemas de vista de algunos estilos, no se cual puede ser la causa si se supone que para ie 10 y 11 no iba a tener problemas por ende necesito ayuda porque tengo problemas con la página de la empresa y me tienen colgado. Agradezco una pronta pero muy pronta ayuda. Gracias

    Jueves, 2 de octubre 2014

(Subir al texto)

Añadir Comentario

* Campos obligatorios

Meneame Bitacoras