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.
También puede interesarte:
Google vuelve a su antiguo diseño. Google vuelve a su antiguo diseño....
WordPress Themes: Sculpt. Nuevo tema para WordPress en el repositorio...-
Firefox 2.0 Beta 2 lista para descargar. Hoy ha salido la segunda beta de Firefox...
Firefox Facts, el blog. Hoy he descubierto que existe un interesante...
25 respuestas a “Diseñar en CSS para Firefox, IE6 e IE7”
Deja un comentario
RSS La Brújula Verde
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.
[...] enlaces a los que me refería al principio, además del imprescindible post Diseñar en CSS para Firefox, IE6 e IE7 de Guillermo Carvajal, son los [...]
[...] hace algunos meses les hablábamos de cómo diseñar en CSS para Firefox, IE6 e IE7, ahora nos encontramos con que desde Webdesigner Wall nos proponen hacer todo lo contrario, es [...]
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?!
Hola Amigo! buenas noches
Muchas gracias por la informacion, en este preciso momento me encontre con este problema del IE6 que al momento de dividir la anchura de un div que es el head,en #head #logo y #head #titulo pongo las medidas exactas pero IE6 lo toma como si me pasara de la anchura total y me pone el #head #titulo una linea abajo , cosa que no sucede en los otros navegadores (firefox y opera), pero con el codigo que nos presentas el problema esta solucionado, muchas gracias nuevamente.
Seria bueno, que hubiese algun link en donde poder ver como seria el codigo final con algun ejemplo simple, para gente como yo que no logra entender como aplicar la solucion que detallan. Gracias
Hola, he leido el el tutoria y esta muy bueno..ahora lo que me esta pasando a mi es con una galeria de fotos, en donde tengo las fotos chiquitas y al clickearlas en IE (cualquiera de todos) no me las agranda, mientras que en Firefox si…me pueden ayudar??? Gracias..Espero respuesta
Muy interesante tu aporte, me va a ayudar a solucionar que tengo problemas en algunos sitios con respecto a que me lee mal los sitios.
Excelente este dato…..muchas gracias!!!
Gracias!!!!… existen muchas opcioness para solucionarlo pero esta es la primera que si la valida W3C
Excelente!!!!!, cuantos dolores de cabeza me han ahorrado. Funciona de mil maravillas Simplemente I-C-R-E-I-B-L-E. Muchísimas gracias!!!!!