Corregir errores de diseño en Internet Explorer

Si alguna vez te has puesto a diseñar un sitio web con CSS seguramente habrás notado que principalmente en Internet Explorer 6 (lamentablemente uno de los navegadores más usados) nada se ve igual a los demás navegadores.

Por prolemas con los estándares es que esto ocurre, pero hay una manera de corregir los problemas que se nos presenta y así armonizar la visualización de nuestro diseño en todos los navegadores.

Actualmente, por lo general los diseñadores comienzan a realizar sus diseños visualizando los resultados en Firefox y una vez terminado y habiendo dejado todo se quería pasa a probar como se visualiza en IE (Internet Explorer) y allí se encuentra con los problemas.

Hay una pequeña opción, facilitada por un "error" de IE que nos permite corregir los problemas que se nos presentan, sin modificar el resultado que habíamos obtenido en los demás navegadores, es decir, hacer los retoques necesarios sólo para IE.

Lo que vamos a utilizar es una doble barra // , la cual se utiliza en CSS para dejar comentarios. Lo que está después de esas barras IE no lo toma como un comentario sinó como parte del texto. Así que podemos utilizar esto para anteceder las propiedades que sólo querramos que se apliquen a IE. Veamos un ejemplo:

Notamos que en IE nuestro sidebar se encuentra 10 más a la derecha de lo que debería estar, sin embargo en los demás navegadores se encuentra en su lugar correcto. Para que el sidebar se mueva 10px hacia la izquierda solamente en IE, aplicamos los siguiente al CSS:

#sidebar {
width: 250px;
background: #ccc;
//margin-right: 10px;
}

Aplicamos //margin-left: 10px; lo cual sólo será reconocido por Internet Explorer y los demás navegadores no lo imprimirán en el sitio.

Así de esta manera podremos ir solucionando algunos de los problemas que se nos presentan en la visualización de IE. El problema que esto presenta es que no valida el CSS, pero si lo que realmente buscamos el que se vea bien en todos los navegadores sin tener que rehacer gran parte del sitio nuevamente puede sernos de gran ayuda.

Podemos utilizar esto para detectar navegadores y por ejemplo cuando se ingresa al sitio con IE que se muestre un mensaje ("Estas utilizando Internet Exporer, te recomiendo probar Firefox", por ejemplo). Esto lo hacemos de la siguiente manera:

Creamos en el archivo HTML el div ifie

Estas utilizando Internet Exporer, te recomiendo probar Firefox

Y le damos las propiedades en el CSS

.ifie {
display: none;
//display: block;
}

Lo que va a ocurrir es que en cualquiera navegador que no sea IE se tomará solamente el display: none;, es decir, que NO se mostrará. Sin embargo, en IE se tomarán las dos propiedades, pero imprimiendo la última que aparece si es que se repiten, es decir aplicando block y mostrándose.