Este blog colabora con 
En el diseño del futuro nuevo tema de este blog nos hemos encontrado con un problema, que imagino tienen todos los diseñadores: las páginas y estilos CSS no se muestran de igual forma en Firefox, Internet Explorer 6 e Internet Explorer 7. Lo que en Firefox queda como la seda suele aparecer bastante descolocado en Internet Explorer 6 y con algunas diferencias en Internet Explorer 7.
Buscando una solución nos hemos encontrado con un excelente artículo titulado Two CSS Hacks for identical pages on FF, IE6 & IE7. Hemos aplicado las soluciones propuestas en él y han funcionado perfectamente. No se si son la manera más ortodoxa de hacerlo, pero funcionan. Consisten en lo siguiente:
1. Realizar el diseño para Firefox
2. Comprobar los fallos que el diseño muestra en IE6. Identificar los selectores que presentan el problema y duplicarlos, anteponiendo a la copia el selector *html y aplicando los cambios requeridos, de la siguiente manera:
#MyDiv {margin: 10px 10px 10px 10px;}
/* IE6 Only */
* html #MyDiv {margin : 5px 5px 5px 5px;}
De ese modo, mientras Firefox leera el primer #MyDiv, IE6 sólo leerá el segundo.
3. Hacer lo mismo con IE7. Volver a duplicar los selectores en conflicto y añadir *:first-child+html a los duplicados:
#MyDiv {margin : 10px 10px 10px 10px;}
/* IE6 Only */
* html #MyDiv {margin : 5px 5px 5px 5px;}
/* IE7 Only */
*:first-child+html #MyDiv {margin : 2px 2px 2px 2px;}
Así, IE7 sólo leerá el último selector.
Con esta técnica podemos diseñar hojas de estilo únicas para los tres navegadores, sin complicarnos con otras técnicas más dificiles para los que no somos expertos en la materia.
[Posts relacionados:]
Minoic.net es un anillo de blogs impulsado desde enero de 2007 por Guillermo Carvajal, Antonio Cambronero, Manuel Almeida y José Luis Orihuela para experimentar nuevas formas de sinergia entre weblogs más allá de los blogs grupales y de las redes comerciales.
2 trackbacks/pingbacks
La Conversación {16 comentarios}
hola..
alfin encontre un documento
bueno para solucionar mi problema
donde aho ese cambio en el estilo o que.
por ayuda:::…
‘
Excelente recurso, me habeis quitado horas de sufrimiento.
Interesante, me va hacer de gran ayuda, tengo unos problemas con algunos atributos y selectores del css. Gracias. Saludos desde Cancún Mexico
Saludos, excelente!!! me estaba matando la cabeza haciendo modificaciones aqui y alla para que encajara todo en los 3 navegadores, casi todo funciona muy bien entre Firefox e IE7, pero lo que es IE6 si que es un dolor de cabeza y aun tiene muchisimos usuarios.
Y para Opera…
muy bueno execelente funciona de maravillas esta forma de trabajar y no tener problemas con los navegadores IE deberia desaparecer no cumple con los estandares de los browser…
esta muy bueno, ya lo probe y trabaja muy bien, gracias por publicar esta info y gracias por mencdionar la fuente de donde lo sacaste, saludos.
Gracias me ahorraste mucho tiempo, pase un día entero tratando de resolver este problema
Funciona bastante bien, pero el validador de CSS 2.1 de W3C lanza error, de esta manera, solo puede reconocer uno, o html o first-child+html. :S
Que equivocación! Creo que fue error de dedo, funciona de maravilla. Lo siento!
En realidad todo bien, aqui el “pero”, no me va bien con el overflow:hidden, para el IE6
div#wn {
position:absolute;
_position:relative; /*no me funciona en IE 6*/
left:300px;
_left:300px; /*Para IE 6*/
top:84px;
_top:84px; /*Para IE 6*/
bottom:0px;
width:100%; height:100%;
clip:rect(0px, 100%, 100%, 0px);
overflow:hidden;
_overflow:hidden; /*no me funciona en IE 6*/
z-index:1;
}
No tengo palabras para agradecer esta gran ayuda! Me ha sumamente salvado de mi problema hahaha!
es una gran razon por la que odio tanto IE6… creo deberia dejar de existir…o talvez yo deba dejar de ser tan vago pero bueno…
saludos y gracias!
una ayuda perfecta a este problema, pero la cosa es que los hacks no estan ni sirven para el validado de páginas W3C.
que hacemos pues?
Eriberto Correa, para que el overflow funcione en el maldito ie6 solo tienes que poner position:absolute o position:relative al div que contiene tu div #wn, o sea,tienes
div “contenedor”
div “wn”
/div
/div
Al que le tienes que asignar la position es al div “contenedor”, al que encierra tu div#wn
Oye, excelente! es muy sencillo de implementar y parece que funciona!
La única pega que tengo desde que instalé IE7 es que no puedo probar mis webs en IE6. Aunque la verdad… estoy un poco en “guerra” con ese navegador… estoy con la causa “muerte a IE6″.
La lástima es que de los usuarios de Windows que usan IE más o menos la mitad todavía usan IE6 !!!! :(((( me parece que hasta que no “muera” windows Xp no morirá IE6,que es el que se instala por defecto
en fin…
SERGI
Personalmente, no me esfuerzo en nada (hacks y demás) para que se vean bien mis páginas en IE6. Sin embargo, intento trabajar con css más o menos “estandar”, con la esperanza de que aún en IE6 se “vea” la página y sea mínimamente operativa. Si ya el usuario o visitante de la web no es capaz de tener actualizado su navegador… es cosa suya.
De hecho me imagino que ese tipo de usuarios deben ver desconfiguradas bastantes webs, no?!
Lo sentimos, los comentarios de esta entrada están cerrados.