CSS válido compatible con Internet Explorer y Firefox
Llevo años realizando nuestras webs por medio de CSS, pero antes era sencillo, casi todo el mundo usaba IE, y sólo cuatro se atrevían con navegadores alternativos. A día de hoy las cosas están cambiando, y ya no se puede despreciar a los usuarios de navegadores tan extendidos como Firefox.
Pero surge un problema: en cuanto hagamos ligeramente complejos nuestros diseños, y utilicemos atributos como padding y margin, veremos como la distinta intepretación que hace Internet Explorer y el resto de navegadores del modelo de caja nos jugará malas pasadas.
Esto nos hace necesario acudir a “hacks” que nos permita aprovechar diferencias de interpretación de los CSS de los navegadores realizar CSS compatibles con todos los navegadores.
Existen muchos sistemas distintos, pero no todos son acordes a los standar, por lo que no validarán. De hecho, a lo largo de estos años he usado varios que si bien funcionaban y mantenían la estética más o menos igual en todos los navegadores, no validaban los standar. No es algo fundamental, pero siempre te queda esa espina clavada de “un trabajo bien hecho”.
Hoy he probado un nuevo método, precisamente intentando solucionar este problema histórico, hasta que he encontrado este artículo de Sitepoint (que tantas veces me ha sacado de apuros), que como me decía Carlos Mantero en Twitter no sé si será el Santo Grial (que proporciona vida eterna), pero sí que me ha regalado algunos meses, eso seguro, porque era un tema que me estaba bloqueando.
La solución que he usado es sencilla:
1) creamos una regla adaptada a Internet Explorer
2) repetimos la regla (lo que sea común no es necesario, únicamente lo que cambie -tradicionalmente padding, margin, width o height-) anteponiéndole html>body.
Afortunadamente a este último IE no lo interpretará mientras que el resto de navegadores sí. Lo he probado en una web de estructura compleja (en concreto con el próximo diseño de Mundogamers) y se ve perfectamente en los navegadores testeados: Firefox, IE 6 e IE7, validando perfectamente, por fin.
Termino con un ejemplo práctico, para entenderlo mejor:
#header {margin-bottom:3em}
html>body #header {margin-bottom:1em}
Espero que le sea de ayuda a alguien. Supongo que muchos lo conocerían, pero seguro que alguien tiene problemas similares pendientes de resolver y le ayude a ver luz al final del camino.
Hola. Gracias por el código, me tocará utilizarlo…
Como sabes estoy diseñando una web (cutriweb para los amigos) y como todos, me he topado con este mismo problema.
Para diseñar la web utilizo Opera -mucho más “fino” que los otros dos-, y a este respecto creo que la cifra de usuarios que usan Opera puede ser bastante superior a la que se estima en las estadísticas de navegadores, ya que Opera permite configurarlo para mostrarse como otros navegadores.
De todos modos, al ver la web en Firefox, y todavía peor, en IE (6), la deformación, sobre todo de los line-height y los margin es increíble. Aunque no es mi mayor preocupación ahora, por ejemplo ya me he encargado de solucionar lo de los frames (ya no uso ninguno) y tengo cosas similares en mente por el momento, así que más adelante tendré que luchar contra las diferntes interpretaciones del código.
Yo todavía no estoy muy frustrado (falta de experiencia supongo) pero me imagino a quienes ya se hayan preguntado si no sería mejor utilizar todos el mismo navegador y acabar con estos quebraderos de cabeza…
El navegador, a poder ser, Opera ;)
Todo el dia llevo peleandome con la compatibilidad entre IE y Firefox. Mi gran error fue diseñar la última web para Firefox, cuando siempre lo hice sobre IE. Y al cambiar de navegador… ale, todo al aire.
Solución: en el CSS las propiedades con / se aplican a IE, el resto a Firefox.
Ejemplo:
width: 770px; para Firefox
/ width: 780px; para IE
Un saludo
Excelente aportacion Miguel me funciono de maravilla
Solución: en el CSS las propiedades con / se aplican a IE, el resto a Firefox.
Ejemplo:
width: 770px; para Firefox
/ width: 780px; para IE
\m/ >_< \m/
Hola,
bueno yo tambien me sumo a la lista de ESTRESADOS por causa de los benditos CSS bueno agradezco porque acabo de entrarme que el unico que no cumple con los reglamentos de W3C es el IE que por lo que he leido sus programadores no les dio la gana de cumplir con esas reglas el cual mucho ENOJO MOLESTIA ESTRESS nos ha causado (DIOSSSSSS PORQUE????)
Ahora bien la solucion total a nuestros problemas nos los ha dado Ud. Roberto y es:
1) creamos una regla adaptada a Internet Explorer
2) repetimos la regla (lo que sea común no es necesario, únicamente lo que cambie -tradicionalmente padding, margin, width o height-) anteponiéndole html>body.
Mas abajo nos da un ejemplo:
#header {margin-bottom:3em} (solo funciona en IE me imagino)
html>body #header {margin-bottom:1em} (aqui funciona pa Firefox no??)
Esa es la solucion nada mas DIOSSSSSSS gracias por publicarlo de verdad estoy agradecido llevo buscando una respuesta tan simple y general como la suya ya que lo unico que encontraba eran respuestas a temas concretos..
Saludos y de nuevo gracias…
Estuve leyendo sobre los hacks, la seccion de: …Termino con un ejemplo práctico, para entenderlo mejor:
#header {margin-bottom:3em}
html>body #header {margin-bottom:1em}… y me parecio excelente que haya solucion a este tipo de problemas que nos rompen la cabeza. Desafortunadamente, sigo rompiendomela porque trate de hacerlo y no me funciono en firefox. Por ejemplo, yo tengo lo siguiente:
#leftnav
{
width: 200px;
background-color: #81A7FE;
float:left;
margin-left:0px;
margin-top:0px;
}
y me funciono bien en IE7 pero luego hice lo siguiente:
html>body #leftnav
{
width: 200px;
background-color: #81A7FE;
float:left;
margin-left:-50px;
margin-top:0px;
}
y no me funciono en Firefox, la verdad no se si lo hice bien o esta malo.
Si me pudieran ayudar se los agradeceria.
Gracias
Saludos
si porfavor, yo tengo el mismo problema que carlos a donde se pone el codigo enotnces?
genial esa solucion!!! llevaba dias rompiendome la cabeza tratando de hallar una solucion para este problema, ami me funcione increiblemente
no funciona..
gracias!!!!!!!!
lo logramosssssssssss
Gracias por la ayuda!
No me funciono en Firefox
El sistema funciona perfectamente. El problema a quienes os sigue dando problemas es que probablemente no aplicáis el css de manera correcta para Firefox.
Solo una cosa, a mi no me funcionaba en firefox, hasta que me di cuenta de un error que parece tonto pero se deberia de puntualizar ya que nos puede pasar a cualquiera, y es que hay que dejar un espacio en blanco despues del “html>body ”
ej:
#contenidoCentral h2 {
padding:20px 10px 10px 10px;
}
html>body #contenidoCentral h2 {
padding:0 10px 10px 10px;
}
Me salvaste de una buena, gracias compadre, este será un POS-IT fijo de todo diseñador ;-)
#contenidoCentral h2 {
padding:20px 10px 10px 10px;
}
html>body #contenidoCentral h2 {
padding:0 10px 10px 10px;
}
disculpa, me confundi en el codigo de arriba
No funciona. Ni en Opera ni en Firefox.
Mi versión es IE 7.0 y si interpreta el CSS en ‘html>body’
Tampoco me funciona.
Mi versión es IE 7.0 y si es verdad que interpreta el html>body
Esta entrada fue realizada hace 7 meses, cuando IE 7 no estaba muy extendido (aún hoy no lo está demasiado). No obstante, IE7 realiza una interpretación mucho más próxima a Firefox, por eso se excluye.
¿Estáis incluyendo los doctype adecuados? El uso de uno u otro puede producir variaciones en la visualización.
yo optè por sacar un aviso de no compatibilidad con i.e. en la web, realmente no hay derecho a tantos trabajos por un navegador que se quedò corto y a quien no merece arrodillarse, me sumo a la campaña web de no màs i.e., les recomiendo flock para diseñar, que està super y màs ràpido que Mozilla pero con mejores caracteristicas, el ùnico pero es que està en inglès,
pueden descargarlo aquì ensayarlo :http://www.flock.com,gracias por permitirnos el desahogo.
Lo solucioné:
Primero lo ajusto a Firefox, y como IE no interpreta los comentarios y Firefox sí, después pongo el ajuste de IE. Así:
#contenidoCentral h2 { padding:20px 10px 10px 10px; } //Firefox
// #contenidoCentral h2 { padding:0 10px 10px 10px; } // IE
Pero poniendo las dos líneas en eon código.
Mano, no entiendo su solucion pero en IE7 o las versiones anteriores de IE , el style que pondre es reconocible, pero en FF no reconoce, es mas ni lo muestra. Si alguien sabe la solucion por fas es urgente:
#def
{
display:block;
position:absolute;
width:232px;
height:182px;
z-index:1;
left:145px;
top: 74px;
visibility: hidden;
}
MIGUEL!!!!! tu método fue el ke me funciono… lloré de emoción jajaja como me rompi el c… con mis amigos de mocosoft!!!
Utilicé este método para IE y FF y me funcó de 10!!! los otros no me funcionaron.
margin-left: 175px;
/ margin-left: 170px;
Hola, soy diseñador gráfico pero hace un par de años me metí en maquetación web aunque no tan intensamente como ahora y he de comentar que el uso de hacks, al que yo estaba acostumbrado, no es necesario. Todo se puede solucionar sin hacks, simplemente hay qe invertir un pco más d etiempo en averiguar cómo.
Hayq ue tratar al CSS como al Windows, indicándole todo desde cero, por ejemplo rápido, no vladría usar un padding así por las buenas, yo lo que hago es resetear a 0 su valor por defecto y le pongo el que me interesa posteriormente.
Siguiendo esta regla básica, un poquito d epaciencia y nada de lógica, he conseguido hacer diseños complicados en maquetaciones.
Espero que le sirva de ayuda a alguno, suerte ;)
que genial construir css valido a partir de esos trucos y que se vea bien en la mayoria de los navegadores…..pero a mi aun me queda el problema de validar el “filter”, cuando se usa png en los estilos……. :(
Gracias, me costado encontrar algo así y que valide los estándres
Hola, a mi no me funciona, internet explorer interpreta el estilo que esta despues de html>body sin problemas
Definitivamente la solución correcta es la de el pana Miguel!!!!!
Gracias =D
#2. Miguel, hace 1 año
Todo el dia llevo peleandome con la compatibilidad entre IE y Firefox. Mi gran error fue diseñar la última web para Firefox, cuando siempre lo hice sobre IE. Y al cambiar de navegador… ale, todo al aire.
Solución: en el CSS las propiedades con / se aplican a IE, el resto a Firefox.
Ejemplo:
width: 770px; para Firefox
/ width: 780px; para IE
Un saludo
hola, osea tb lo puedo aplicar para un padding o margin?? ej.
para firefox;
padding-right: 10px;
margin-bottom: 10px;
para IE:
/ padding-right: 8px;
/ margin-bottom: 8px;
no me fucniona aplicando el codigo expuesto
amigo gerardo que no te funciona?? el codigo.. a mi me funciono super.. eso si en EI7.
ahora lo mejor es hacer una buena estructura en css sin ningun float y ocupando Posicion absoluta y relativa.
Hola… Creo que me devolvere a la era de las cavernas, o mejor, a la de la tablas… volvere a diagramar con tablas hasta que IE fenesca bye bye…
el “hack” es con esto
* html #nameClass { atributos }
Muchas gracias por el consejo funciona perfectamente, me has ahorrado muchos meses de vida tambien :)
Bro, gracias, por fin la solucion a mis eternos problemas conlos diferentes navegadores
Saludos
Saludos,
En colaboración al post puedo definir que para una buena orquestación de la maqueta de la página, es preferible separar los CSS de IE y los demás navegadores. Para ello la propia Microsoft, estableció un método de lectura de su navegador que solo IE reconoce y que por medio de él podemos filtrar. Para un mejor entendimiento pongo un ejemplo sencillo:
**************
–link rel=”stylesheet” href=”templates/css/general.css” type=”text/css” />
–link rel=”stylesheet” href=”templates/css/template.css” type=”text/css” />
–!–[if IE]> ((Este sería el llamado que solo IE reconoce))
–![endif]–>
**************
En el CSS de IE pondría todo aquello que el Internet Explorer no reconoce.
Espero les haya servido,
Atte, Alexander Vizquel
PS. Disculpen que haya repetido el mensaje pero la respuesta no acepta el comienzo del codigo HTML. Recuerden esto por si van a copiar la solución y sustituir “–” por el simbolo menor que que comienza las etiquetas en html.
Esto que dice Alexander Vizquel
**********************************************
–link rel=”stylesheet” href=”templates/css/general.css” type=”text/css” />
–link rel=”stylesheet” href=”templates/css/template.css” type=”text/css” />
–!–[if IE]> ((Este sería el llamado que solo IE reconoce))
–![endif]–>
***********************************************
a mi no me ha funcionado asi mismo lo tengo en mi sitio y nada cuando voy a mi ie7 y navego por mi sitio desde luego se ve todo distorcionado y cuando le doy ver código fuente veo esas líneas pero salen de color verde como si fuera un comentario nose si será así. Alguna idea.
A mí también me funcionó el código de Miguel, los demás no.
Aún así sigo teniendo problemas con el en IE no me funciona el margin:0
¿Alguna idea?
Me fucionó perfecto.
line-height: 0; /* ff */
// line-height: 60px; /* ie */
Cuando no te funciona el margin: prueba con el left o el padding.
Sí, he tenido este problema muchas veces. Uso habitualmente Firefox para navegar, pero para testear mis webs lo hago con IE.
Nunca había probado lo que dices y funciona, siempre tengo problemas con el Padding y el Margin, gracias por esa simple, pero muy útil, ayuda ;-)
Más de un año después tu post sigue siendo vigente… ya probaron con el gchrome?
Un saludo
Tengo la cabeza hecha un bombo.
http://rogertm.bloggerscuba.com/tag/programando/
aquí un sitio para “dejar un mensaje en español (?) al navegante errante para que se actualice a una versión mas reciente o cambie a otro navegador”.
Intentaré un poco más, pero esto es una opción..
Solución rápida y elegante de casi todos vuestros problemas, sin necesidad de hacks y cosas raras…
*{margin:0;padding:0}
Solución menos rápida pero más profesional de casi todos vuestros problemas, usar un Reset CSS, os propongo el que yo mismo he diseñado:
http://blog.objetivocreativo.com/version-final-reset-css-v11/
Objetivo Creativo….
gracias! Qué buena página.
El problema esta en el iE no en el firefox. Hay que diseñar para el firefox y luego hacer los hack para el iE (por cierto iE6 se comporta distinto al iE7 y este al iE8) vamos que hay que tirarlo a la basura el iE.
Objetivo Creativo, con esa sola linea me arreglaste el diseño, el reset css ni hablar, buenísimo y de hecho fundamental para el diseño… felicitaciones por tu blog, está genial.
La solución propuesta no funciona en todas las versiones de IE debido a los caprichos de cada una:
html>body no es entendido por IE6, pero sí por IE7, en el cual también he tenido problemas con los márgenes.
Lo de los comentarios no lo he probado, pero si también los interpreta IE8 tampoco vale, porque esta versión sí que se comporta de manera más o menos estándar, por lo que no se deben aplicar los hacks necesarios para las otras versiones de IE.
En mi caso funcionó la solución propuesta en:
http://www.flashmania.es/recursos_web/diseno-web/recursos-web-disenar-para-varios-exploradores
La solución mejor que he probado es hacer hojas distintas para cada navegador. De esa forma el resultado coincide pixel a pixel con el diseño.
hola: gracias por la ayuda y aporte lo voy a poner en practica. Yo actualmente tengo este problema y espero solucionarlo.
saludos
yo pienso que esto es mas que todo un problema que tiene entre FF e IE con respecto a la distancia entre el contenido de una etiqueta y el borde yo en particular para solucionar este tipo de problemas solo coloco los padding con un valor 0 y el margin le coloco la distancia que le quiera dar algo asi:
#e1{
padding:0;
margin:0;
}
#e1 div{
padding:0;
margin:10px 10px 10px 10px
}
espero que les sirva de algo saludos
Hola!
Después de dedicar tres largos días al desarrollo de un portal para un colegio (tipo moodle, pero personalizado) descubro al testearlo, que firefox hace todo lo que he programado, que chrome también y que como siempre, explorer va a su bola.
Gracias por la explicación, porque me has resuelto varios quebraderos de cabeza.
Saludos
Pero hombre, lo enfocas desde la perspectiva incorrecta.. Hay que maquetar para los browsers serios, que respetan estandares, y luego adaptarlo (lamentablemente) al horrendo IE, no al reves. Ojala ese navegador malnacido desapareciera de la faz de la tierra, nos hace perder tanto tiempo y esfuerzo que podriamos utilizar para fines mas utiles..
Saludos,
Existe algun hack para que cuando muestro un pdf dentro d eun frame el Chrome muestre todo pequeño?
http://www.bilbaoelectronics.com/datasheet.html miren aqui lo que sucede con el Chrome
Gracias,
JC
señores gracias por sus aportes me han sido de gran ayuda para por fin terminar un diseño que ha matado la paciencia durante bastante tiempo
MIGUEL ES UN CRACK! funciona a la perfeccion!
GRACIAS POR EL APORTE DE DEFINIR PARAMETROS PARA IEXPLORER Y FIREFOX.
Buen dia, Roberto no me funciona lo que pusiste, no lo estare poniendo bien en el codigo? esta es mi web, http://www.tortasartesanalesvi.com.ar fijate qeu en fire se ve toda corrida y en IE no, tendra algo que ver x als formas en al que puse las imagenes, GRACia!s por tu ayuda!
Excelente solución, me ha ayudado mucho en la creación de una web en la que se me iba el menu en cada navegador a un sitio diferente con esta solución entra en todos los navegadores igual, acojonante. Un 10 a este post. Muchas gracias por la ayuda.
Estoy leyendo totos los post, voy a probar y dar a la razon a quien la tenga
saludos a todos…..
=D :) ;)
atte: jemp_intrepido