Por qué en IE se ve “bien” y en Firefox se ve “mal”
Permalink | Archivado en: CSS, Destacados, Diseño y Desarrollo Web, XHTML
El otro día una amiga me comentó que una compañera suya estaba haciendo una web, y que “en el Explorer se ve bien y en Firefox mal”, y me preguntó que a qué podría ser debido. Le di una respuesta deprisa y corriendo y creo que no expresé bien, así que aquí va la full version. La comparto con vosotros porque seguramente nos esperen muchas más preguntas de este estilo.
La clave para entenderlo bien es darle la vuelta a la tortilla. La realidad es que en IE se ve “mal”, y en el resto de los navegadores (no sólo Firefox) se ve “bien”. Pongo “bien” y “mal” porque son apreciaciones que hacemos los humanos, subjetivas.
Los navegadores no son adivinos con bolas de cristal que se conectan a la mente del maquetador web e interpretan su voluntad. El maquetador tiene que dejar escrito, detalladamente, el contenido y apariencia de la página web: esto se consigue con los lenguajes (X)HTML y CSS.
Estos lenguajes se encuentran bien definidos cómo estándar, en el WWW Consortium (viene a ser algo así como la RAE). Este organismo se encarga de describir con precisión cómo deben interpretar el (X)HTML y el CSS los navegadores.
Ahora bien, los navegadores no siempre cumplen a pies juntillas lo que dice el W3C. Es más, cierto navegador no hace ni puto caso.
Pongamos un ejemplo ficticio: Imaginemos que el Explorer “confunde” los colores rojo y blanco, y los intercambia, debido a un error de programación (no entraremos a valorar si por descuido o deliberadamente). Es decir, que donde pone #FFFFFF IE lo interpreta como #FF0000, y viceversa. En este ejemplo supondremos que el resto de los navegadores interpretan los colores correctamente.
¿Qué pasaría si queremos hacer una página web con fondo blanco? En nuestro código HTML, pondríamos <body bgcolor="#FF0000"> que en IE se mostraría blanco. Entonces cuando vamos alegremente a mirar la web con otros navegadores, vemos que se muestra de color rojo fosforito. “En Firefox se ve mal”. Pues no. Por mucho que se empeñe el Explorer en hacer creer a los desarrolladores web, el número #FF0000 significa rojo, y prou.
Lo que ha pasado es que una página se ha desarrollado mal (a menudo inconscientemente) para forzar a que se vea “bien” en IE. Lo que obtenemos es que en IE la página se visualiza incorrectamente, pero por casualidades místicas esa visualización coincide con los deseos del diseñador.
Un ejemplo real y muy gráfico de cómo IE visualiza de mal las páginas lo podemos encontrar en el Acid Test. Es un ejemplo de página web que construye mediante código estándar y válido un dibujito de una cara sonriente. Según lo bien programado que esté el navegador, veremos este dibujo más o menos bien. Los únicos navegadores “mayoritarios” que lo muestran correctamente son Safari (Mac), Konqueror (GNU/Linux) y Opera (multiplataforma). Firefox se queda a medio camino, pero lo de Internet Explorer clama al cielo.
En resumen, lo más fácil para que una web se vea más o menos bien en todos los navegadores es hacerla primero para Firefox o cualquier otro navegador, y luego “apañarla” como buenamente podamos para Internet Explorer.
53 comentarios »
Si quieres hacer un trackback, usa esta TrackBack URI
Escribe un comentario
Los párrafos y saltos de línea se ponen de forma automática. La dirección de e-mail no se mostrará nunca. Se permiten las siguientes etiquetas XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>
Pero diseñar primero para Firefox tampoco es bueno, porque a veces lo que se ve bien en Firefox no se ve bien en el resto de los navegadores (Curioso no?). Así que no es 100% estandar.
En esto Opera gana, Safari/Konqueror también gana.
Comentario de td0 — 05-06-06 11:55 am
Usando este test puedes saber si tu página cumple o no el estándar.
Por cierto, muy bueno el artículo
Comentario de N3rud — 05-06-06 1:13 pm
Excelente artículo muy bien explicado. Respecto a lo que comenta td0, creo recordar que Opera/Safari/Konqueror tampoco siguen el estándar al 100%.
Lo ideal es ir diseñando y comprobando el código en el validador w3c y Examinator, muy bueno este último.
Comentario de Manz — 05-06-06 1:37 pm
Lo que más gracia me hace de este asunto es que cuando fui a las charlas del W3C en Valencia, el del W3C español excusaba a Microsoft y en cierto modo se quejaba de que la gente exigiese páginas válidas según los estándares.
Eso es algo que me tocó mucho la moral…
Comentario de GNU/Hydrus — 05-06-06 4:24 pm
Un pregunta Benko, que navegador usas tu?
Comentario de Oliver — 05-06-06 6:53 pm
Oliver, normalmente uso Konqueror, que es un navegador maravilloso. Pero cuando me toca estar en Windows, me pongo el Firefox.
Comentario de BenKo — 05-06-06 6:56 pm
Sí konqueror va muy bien, el único defecto es que necesite tener instalado kde
gnome rulez!!
PD:Es broma, no soy fanático.
Comentario de Adama — 05-06-06 7:28 pm
Safari y Konqueror fueron los primeros en pasar el Acid2. Firefox creo que lo pasa con ayuda de Greasemonkey
Opera lo pasa, aunque en la beta 9.0
Saludos a tod@s
Comentario de td0 — 05-06-06 11:58 pm
que casualidad cari, el otro dia le estuve explicando a damaramu este mismo tema XDDD… le dire quese pase por tu blog para que lo entienda mejor xD
Comentario de vhea — 06-06-06 2:44 am
Toda tu explicacion esta bien pero yo creo que cierto navegador se merece mas bien llamarse El-que-no-debe-ser-nombrado… Por eso de pertenecer al maligno y demas xDDD
Lo que yo hago es tener Firefox y Konkeror abierto, ademas del validador, e ir comprobando triplemente…
Me voy a dormir -_-
Comentario de Allyenna — 06-06-06 4:04 am
Por cierto, sere nazi, pero quien a estas alturas, siga utilizando IE es que es que es gilipollas y si no ve bien una web, que se joda. Durante años hemos tenido que aguantar la leyenda en casi todas las webs de “Optimizado para Internet Explorer” y ya es hora de que cambien las cosas.
Por mi parte me estoy pensando bloquear el acceso a todos los IE a mi blog, como ya ha hecho th1nk… A ver si aprenden ¬¬
Comentario de Allyenna — 06-06-06 4:07 am
Por qué en IE se ve "bien" y en Firefox se ve "mal"
Buena explicación de por qué los diseños en CSS se ven bien en algunos exploradores y en otros se ven mal. No es culpa del diseñador, sino de los exploradores que no siguen las normativas.
Trackback de meneame.net — 06-06-06 8:48 am
Creo que lo mejor es diseñar primero en Firefox y luego hacer a como dé lugar que se vea igual en los demás navegadores, ya sea con hacks o con condicionales, a fin de cuentas hay que trabajar doble si se quiere que se visualice bien en cualquier navegador.
Lo mejor pués es probar tus diseños en todos los navegadores, aunque te signifique más trabajo. :S
Comentario de LA100RRA — 06-06-06 10:48 am
Una apreciación, Firefox no cumple ni mucho menos el estandar de CSS. Lo cumple un poquito (pero muy poquito) más que IE. Esto viene de lejos, cuando Netscape luchaba con Micro$oft por la supremacía de los navegadores, cada uno se implementaba a su puñetera bola, intentado atraer la atención de desarrolladores y usuarios.
Comentario de BTO — 06-06-06 10:55 am
[...] Por qué en IE se ve “bien” y en Firefox se ve “mal” (via Meneame) [...]
Pingback de aNieto2K » Blog Archive » Por qué en IE se ve “bien” y en Firefox se ve “mal” — 06-06-06 11:16 am
Buen articulo, lo que me deprime es leer un comentario como el de BTO lleno de FUD, obviamente Firefox tiene un excelente soporte de CSS, negarlo es no tener idea de CSS.
Comentario de pascal — 06-06-06 11:27 am
[...] jaime: me gustaria que… « Compras y mas compras No hay mas mensajes » Por que no se ve bien con IE? Categorias: IESucks 06/06/2006 – 14:30 Tras cambiar el CMS, se me paso por alto volver a bloquear el acceso al IE. Ahora me encuentro con comentarios muy divertidos de gente que usa el IE, por lo que le estoy dando algun tiempo de margen xDD Sin embargo, el diseo del CMS se ve del culo en el IE. No tengo muy claro porque se ve tan mal (bueno si.. porque es malo de narices, y la gente es tan tonta que lo sigue usando xD). Para los pardillos que usan esa basura y se/me preguntan porque el blog tiene tan mal aspecto (en IE), mejor que lean la explicacin de BenKo. Permalink [...]
Pingback de znBlog v3.0 ~ Hielo en la Red — 06-06-06 1:34 pm
Que me vas a contar a mi. Me vi negro para implementar las transparencias con png en el explorer. Al final tuve que hacer dos css una para firefox, opera y demás y otra para el IE.
Comentario de tazair — 06-06-06 2:46 pm
[...] Leer artículo. Vía mnm. [...]
Pingback de ¿Porqué en Firefox se ve mal?, Navegadores.org — 06-06-06 3:17 pm
Estoy totalmente de acuerdo, IE es una KK. Por cierto, se me ha hecho interesante que yo tengo un sitio llamado http://www.sincafeina.com y tu todo lo contrario. jejeje.
Comentario de ivanzavala — 06-06-06 5:23 pm
Pregunta, algunos temas de postnuke del tipo xanthia se ven con IE pero con Mozilla Firefox sale la pantalla totalmente en blanco, tambien es problema de como se entienden los css, lo que m aturde es que no sale nada de nada
Comentario de Manuel — 06-06-06 5:44 pm
A #14:
A ver si nos informamos un poquito más, hombre que no cuesta nada:
http://nanobox.chipx86.com/browser_support.php
Defineme ahora “poquito”
Comentario de Nukeador — 06-06-06 6:40 pm
[...] Copia Textual de : demasiada Cafeina En: Firefox, Curioso, Microsoft — June 6, 2006 [...]
Pingback de » Mermelada de Nopal » » Por qué en IE se ve “bien” y en Firefox se ve “mal” — 06-06-06 11:25 pm
[...] No se como encontré este artículo (ya que abro tantas pestañas que se arma un despelote…) en el cual se expone un "visión" de porqué en IE se ven "bien" las páginas y en Firefox (de paso se los recomiendo para que lo instalen) se ven "mal" (que en realidad es al revés). Comparte el artículo:Estos íconos enlazan con webs de marcadores sociales que permiten a los lectores compartir y descubrir nuevas webs. [...]
Pingback de PowerGeek » Blog Archive » Por qué en IE se ve “bien” y en Firefox se ve “mal” — 07-06-06 1:14 am
La clave esta en resetear los estilos que IE malinerpreta, yo aprendí a hacerlo leyendo un articulo en otro blog como este que se lee acá http://defmay.com/2006/05/10/css-keep-it-simple y me sirvió muchisimo para entender como funciona el sistema de dibujado de los navegadores y eso de las propiedades preseteadas.
No creo que sea tanto como dices que confunda os colores, sino que por ahi los ve mas oscuros.
Saludos y muy lindo tu sitio.
Comentario de Juan Pablo — 07-06-06 2:35 am
El ejemplo que has puesto del color de fondo es brillante. Buen trabajo.
Comentario de Kids — 07-06-06 3:27 pm
Perdón por el error. Falta de actualización. De hecho me reconforta saber que ya se soporta CSS decentemente. Pascal, me has hecho buscar en la Wikipedia que es un FUD. Ni mucho menos pretendo eso, simplemente perdí la esperanza hace tiempo al ver que ambos navegadores iban a por la pasta (IE y Netscape). Por cierto, me has ofendido.
Comentario de BTO — 08-06-06 1:07 pm
Siguiendo tu ejemplo, como el IE “confunde los colores” si programamos para Firefox primero, la página se vera mal en el IE ¿cierto o falso?
Ni un ateo (relativista) había logrado confundirme tanto con esto del bien y del mal. jajajaja.
En cualquier caso nada como IETab en Firefox, mientras tanto y sin mucho drama.
Comentario de 123enter — 09-06-06 5:31 am
a pesar de mis pocos conocimientos me has aclarado mucho las cosas, yo me volví loca cambiando las plantillas del blog y comparando firefox con ie…
Comentario de maripilix — 09-06-06 8:42 am
123enter:
Siguiendo con el ejemplo de los colores, si yo a una web le indico que la quiero con el fondo BLANCO introduciendo el número hexadecimal correspondiente al color BLANCO) y el Explorer la muestra con el fondo ROJO, Internet Explorer la muestra mal, no los otros navegadores.
Comentario de BenKo — 09-06-06 8:55 am
La verdad es que nos van a volver locos a todos los desarrolladores web con tanta pollez de incompatibilidades de los navegadores.
Sí, podríamos mandar el explorer a tomar por culo pero si trabajas en una empresa (vease consultoras) debes de saber que el 90% de la gente usa explorer, cosa que nos hace casi imposible el desarrollar en firefox primero y luego apañar la web para ie.
Además, imaginaos que con ie7 todo se arregla y tal… pues seguro que llegará el típico cliente/usuario que aún posee ie 5 o ie 6 y te dice que no entiende pq la web no sale bien en su navegador.
Yo personalmente estoy hasta las narices de marrones de este tipo.
Hasta ahora, y por la causa que acabo de comentar, siempre he utilizado ie, pero con la llegada de la web 2.0 y la semántica web (vease XHTML) estoy empezando a decir barbaridades de lo malo que es el ie6.
Lanzo un grito de impotencia: ¡PARA CUANDO TODOS LOS NAVEGADORES SERÁN COMPATIBLES UNOS CON OTROS CON LOS ESTÁNDARES DEL W3C!???
En fin, tendremos que esperar y rompernos la cabeza cada día.
Saludos a todos los sufridores/as.
Comentario de Marcos — 13-06-06 4:26 pm
¿Será todo una cuestión de intereses empresariales?
Hay ciertas cosas que no se pueden privatizar,que IE ejerza su competencia en juegos más limpios, y que gane el mejor…
Comentario de Una adicta — 30-06-06 2:31 am
A mi me dieron este truco, pero solo es para la utilización de las capas, utilizando estilos de cascadas (CSS). Ahi va, a ver si os sirve.
aplíquese en etiqueta de estilo.
*{-moz-box-sizing: border-box;box-sizing: border-box}
p{margin-top:0px;margin-bottom:1em}
form{margin:0px}
input{padding:1px}
SALU2
Comentario de strike — 26-09-06 5:21 pm
Hola!!
diseñar para la web es complicado y mas si diseñas y desarrollas para personas con limitación visual… algunas veces si, es cierto, no se ven bien los elementos ni en IE ni en Mozilla, pero existe un problema aun mas grave, los menus desplegables, algunos se ven pero el programa lector de pantalla (JAWS que solo funciona en WINDOWS) no los interpreta, y es necesario utilizar JavaScrip… Pero por q es tan complicado!!
Comentario de Valen — 24-11-06 3:11 pm
¿Y porqué marcas esto como acronym? <acronym title=”El-Que-Tú-Ya-Sabes”>cierto navegador</acronym>
Comentario de Fernando — 29-11-06 3:22 pm
muy buen post, pero algo interesante, el Amaya de la w3c no paso el Acid Test, entonces en q quedamos????
Comentario de george — 15-12-06 7:45 pm
Hola
Antes te felicito con tu artículo, me parece muy bueno que trates estos temas, que a mi punto de vista no son de códificación, ya que cada uno de nosotros (me incluyo por que me dedico a esto a manera de hobbie) programa de acuerdo al equipo que tengamos y casi no pensamos el equipo que tengan los demas (tengo un ordenador viejisimo, 256 MB de Ram, apenas 800 por 600 de resolucion, pentium 3 y 40 GB de disco) pero pienso que con esto hago maravillas (si, adivinaste tiene XP).
La verdad es que ni en IE ni FireFox logras que una pagina se vea tal cual como se programó, opera les lleva mucho camino pero falla en unas cuestiones de javaScript, php y css que fireFox si tiene. Safari es el unico (a mi humilde gusto y no tengo la dicha de tener una Mac propia) que cumple con el estándar, pero seamos honestos EL 85% DE LOS ORDENADORES TIENE O XP O Me O 2003 Server u otra madre de MSoft y a esto le añades que sale el Vista, olvidate se van por lo mas bonito y dejan lo funcional de lado, eso es una relidad.
IE no se va a ir y tiene planeado seguir empeorando más aunque nos duela.
Saludos
Comentario de Daniel Ortega — 21-12-06 10:09 am
[...] Que parece que por culpa de una ü, esta web no se veia en Internet Explorer, y no es que yo quiera discriminar a nadie, pero hasta que me he dado cuenta han pasado un par de meses. Siendo el problema la diéresis de la palabra pingüino lo que provocaba la defectuosa carga de la web. Y el problema realmente no es de esta web sino del propio Internet Explorer que no interpreta como toca las webs. Como bien podeis leer en demasiadaCafeina habla sobre este tema, y como se hace una web como toca, y después toca adaptarla al susodicho IE, pudiendose ver mal a veces en Firefox y perdiendo así gran cantidad de visitantes. Normal que después metan mensajes biblicos en Firefox. Así que visto lo visto getFirefox. Internet Explorer muere lentamenteImagen de la esquina derechaEl uso de Firefox sigue en aumento imparableChuck Norris 2.0¡ No Puede Ser ! [...]
Pingback de .oO bloguras Oo. » Demasiado guapo para Internet Explorer — 19-01-07 1:47 am
Ke pasa cuando el 95% de nuestros usuarios (Clientes) usan IE y solo un puñado de ellos tiene plataformas MAC y usaa otros tipos de navegadores, entoncer tendriamos ke diseñar primero para IE ya ke eso 5% para mi concepto no representa economicamente nada.
Comentario de Carlitox — 29-05-07 8:02 pm
¡ojo! esto “-moz-box-sizing: border-box;” no pasa la validacion CSS3, aunque si soluciona las diferencias en el modelo de cajas, para los que tenemos que respetarlas es una pena que FF aun use “-moz” ¿para que se haran las normativas?
Comentario de yago — 13-06-07 4:43 pm
Señores… Tengo más de 10 años haciendo páginas web y la verdad es que NUNCA he conseguido a nadie que programe pensando en el navegador, porque es imposible hacerlo. Navegadores como OPERA y MOZILLA muestran las páginas “MAL” porque no tienen la compatibilidad necesaria con JavaScript, VBScript y otros lengiajes, Las ventajas del uso de INTENET EXPLORER como navegador son las de que sin importar si el diseñador de la página sigue los estandares suele mostrarse bien… Señores los que es del Cura va para la iglesia, así que aunque no les guste IE es lo MAXIMOOOO!!!!!!
Comentario de Alexander — 13-07-07 1:38 am
Pues yo, como maestro orador de Linux y paladín del ZorroDeFuego (firefox para los plebeyos) que soy, opino que tener un enlace de descarga a “El MALIGNO!!!” al principio de la página es una inmunda blasfemia contra todo tonto que se respete. Viva el ZorroDeFuego!!!! UAAAAAAAA
P.D.: dispara?¿ vamos, no me jodas
Comentario de Linuxero_gilipolla — 23-10-07 3:44 pm
Yo estoi deacuerdo con linuxero_gilipolla. Nada de enlaces al MAL.
Comentario de Alberto — 23-10-07 11:34 pm
che…
le copiaste este post a otro chico
yo ya lo habia leido antes.
eso NO se haceeee
Comentario de sofia — 19-12-07 4:39 pm
#44: Sofía, este post es original mío. Si lo has visto en otro sitio sin que me citen, es que del otro sitio me han copiado a mí. Te agradecería que me pasases la dirección.
Comentario de BenKo — 19-12-07 6:53 pm
el otro ie llamado safari
Comentario de elena — 10-02-08 2:39 am
No teneis ni puta idea. Esta claro que IE a todas luces que no solo es más cómodo, sino que funciona mejor y no toca tanto los cojones. IE le da tantas patadas a la mierda del resto de navegadores que hasta siento lastima de carabandurrias como vosotros.Todos sabemos que hay una multitud de paginas que solo carga explorer. Simplemente aceptarlo, es lo que hay.
Por cierto linuxero_gilipolla me parece un buen tio.
Comentario de Guillermo Puertas — 06-04-08 12:31 am
Me gusta que quede gente como linuxero_gilipolla y guillermo el Puertas.
Tienen muy claras sus ideas y las defenderan hasta el final. Bravo!!
Comentario de Pedro — 06-04-08 12:34 am
Yo soy un “gilipollas” “tonto” “pardillo” de esos que usan IE (gracias por los piropos). Se quiera o no estamos en una ley de mercado y si el Sr. Gates ha sabido meternor a la inmensa mayoría windows y IE ole sus webs.
A lo mejor los señores de la W3C deberían mirar más la red y menos su ombligo.
En fin tendré que seguir jorobándome para que mis sitios sean compatibles con Mozilla, etc (solo porque queda bien tener el icono de compatibilidad y por si alguno del 5% entra en mis páginas con sus navegadores estándar.
Por cierto, gracioso lo de bloquear IE jaja es como cerrar la puerta de tu tienda a los que no midan 1.80 y pesen 75kg y encima decir “¡que se jodan!” jajaja.
Comentario de Alberto — 21-04-08 8:02 pm
[...] Aunque se supone que todos los navegadores deben basarse en ciertos estándares de programación web, hay algunos que dedican muy poco esfuerzo en adoptar las reglas necesarias para el perfecto funcionamiento en la visualización de algunos sitios.- [Leer artículo completo...] [...]
Pingback de Imágenes, Firefox, Internet Explorer, Navegadores | Fotos — 25-03-09 9:46 am
Hola, te enlace a mi blog, espero ser un aporte al debate, disculpa el poco ingenio al momento de citarte, leí tu tutorial “aprende de una maldita vez CSS/XHTML” y quede muy a gusto con tu forma de escribir, me considero incapaz de agregar sabor a tus palabras.
Gracias.
http://quarzoliquido.bligoo.com/content/view/488829/w3c-Porque-en-IE-las-webs-se-ven-distintas-a-Mozilla-Firefox.html
Comentario de cuarzoliquido — 16-04-09 8:00 pm
Que se le puede hacer? no quiero llenar de hacks ni validadores de navegador mi código, además me doy cuenta de que no solo cambia la forma de como se ve la pagina dependiendo de la versión de IE sino también de la versión de el Windows, en la oficina tengo el 2003 y cambia mucho de como se visualiza en un XP aun teniendo la misma versión de Explorer.
Creo que esto que pondré va en contra de los principios de un buen maqueteador y diseñador web, pero tendré que mandar al culo a todos los hack y con ellos a los usuarios que naveguen con IE, (aun que sean mas de la mitad de los usuarios) si a los señores de Microsoft no les interesa arreglar su navegador, pues a mi me interesa menos arreglar sus chingaderas.
(si estoy molesto)
Comentario de emerz — 30-06-09 5:55 pm
Sere ignorante… pero no se cual es el navegador innombrable… jaja alguien podria al menos insinuar su nombre??
Comentario de pablo — 11-11-09 7:22 am