Estaba realizando una página Web cuando tras realizar una modificación en el CSS de una capa y comprobar la página en ambos navegadores pude constatar que aún teniendo el mismo código, la cabecera salía diferente en uno que en otro.
En firefox se cargaba perfectamente pero por el contrario en el Explorer se cortaba a la mitad, evidentemente los valores estaban bien establecidos por lo que no entendía el fallo.
Buscando por Internet llegué a una página en donde ofrecían una solución un tanto drástica pero al menos funcional.
Forzar a Firefox a funcionar como el Explorer
Básicamente, como cada navegador hace sus cálculos, han pensado forzar a uno de los dos a adaptarse al otro, en este caso, vamos a hacer que firefox se comporte como Internet Explorer.
Para ello bastará con que añadamos estas sencillas líneas en nuestro archivo css o en el html.
*{-moz-box-sizing: border-box;box-sizing: border-box}
p{margin-top:0px;margin-bottom:1em}
form{margin:0px}
input{padding:1px}
Al menos ahora la cabecera me sale en los dos navegadores igual, esto para mi es una chapuza, pero en algunos casos no nos queda otro remedio que hacer una programación artesanal.
la verdad que la standarizacion del diseño en css es super facil.. hay dos soluciones crear un cod. para cada uno agregando // antes para IE funciona perfecto pero al validar tu css tendras problemas y lo otro mas práctico es trabajando con Posiciones Realitvas y Absolutas.. eso te lo recomiento si o si. y tendras tu diseño igualito para todos los navegadores.
Uff ya no recuerdo el código exacto pero si te puedo decir que la capa donde daba problemas eran 6 instrucciones de lo más sencillo y que yo era incapaz de determinar por qué.
A veces quieres realizar algunas cosas que te obligan a utilizar hacks para el explorer, por mucho que te propongas hacer un código perfecto y óptimo para ambos navegadores yo aún no lo he conseguido.
Ummm… según parece ese código fuerza a Firefox a implementar el modelo de caja de IE, que imagino será sobre 6.
En realidad, no necesitas hacer nada para que ambos, repito si es IE6, se comporten igual, al menos en ese sentido. Solo debes de servir tu (X)HTML en Modo Estándares (un Doctype adecuado, marcado válido y si es XHTML no incluir la especificación de documento xml) para que no se active el «Quircksmode» de IE, o lo que es lo mismo: «hago lo que me sale».
Eso, como digo, es lo que me parece viendo ese código ya que referencia sobre todo el modelo de caja al parecer.
Para el tema de HasLayout de IE y demás caprichos -que todos los navegadores los tienen, no nos equivoquemos-, aplica un reset que hay, hoy en día, cientos y cientos: el de Yahoo, el de Eric Meyer -el mejor y más simple en mi opinión-, Blueprint CSS (que incorpora varios)…
En fin, empezar con un reset te va a resolver la vida para siempre ^^!
Un saludo.
@Covi: Coño… me qeuivoqué en la Url… parecía Jesús Gil -digitiiiall- xDD
Bueno, pues eso, que ahora que me fijo, gg, eso precisamente que has puesto es un reset xD… sólo que lleva un par de reglas propietarias de mozilla ^^!
@Covi: Pues no, en mi caso fue para firefox 3 e Internet explorer 7. Yo ya no programo para el 6.. sería un gran dolor de cabeza y dado que en las últimas estadísticas (estadísticas de mis páginas) ha pasado de ser el navegador más usado a ser uno de los últimos.. con más razón.
Si, basicamente es un reset (light) pero he de confesar que a mi me funcionó a la perfección
Estuve tentado de hacer un reset completo, algo así es lo que tengo por ahí para usar.
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p,
blockquote, pre, a, abbr, acronym, address, big,
cite, code, del, dfn, em, font, img,
ins, kbd, q, s, samp, small, strike,
strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
center, u, b, i {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: normal;
font-style: normal;
font-size: 100%;
font-family: inherit;
vertical-align: baseline
}
body {
line-height: 1
}
:focus {
outline: 0
}
ol, ul {
list-style: none
}
table {
border-collapse: collapse;
border-spacing: 0
}
blockquote:before, blockquote:after, q:before, q:after {
content: “”
}
blockquote, q {
quotes: “” “”
}
input, textarea {
margin: 0;
padding: 0
}
hr {
margin: 0;
padding: 0;
border: 0;
color: #000;
background-color: #000;
height: 1px
}
Pero al final como con lo otro me sirvió.. me dí por satisfecho.
Supongo que tienes toda la razón, en teoría, si programas siguiendo estándares y con un doctype adecuado, no tendría que haber muchos problemas.
Muchas gracias por los consejos, me parecen muy útiles, por cierto, andaba mirando algún framework css para comenzar con él, he visto que has hablado de varios, entre ellos, el de Blueprint, ¿es el que me aconsejas?
Por cierto, interesante blog, aún no le había dado mucha importancia al css (http://foro.aesinformatica.com/css/) pero ya tenía ganas de empezar a “organizarme” con el asunto, espero que desde tu blog me ayudes
Pues, como ya he comentado en otra entrada, me ha gustado mucho este blog, te has currado unos tutoriales que paqué xDD, y eso es de agradecer en estos tiempos en que casi todo es «scrapping» de lo mismo (php.net -PHP-, ala -CSS-, especificaciones oficiales…)
Por mi parte será un placer echar un cable, es lo que intento desde siempre, lo que pasa que, como es lógico, poco a poco uno va adquiriendo conocimientos e incluso te da un poco de vergüenza navegar en entradas antiguas de tu blog ^^!
CSS:
Blueprint CSS me gustó mucho al principio, a primera vista, pero viendo de lo que iba ya vi que simplemente era una librería CSS… que no viene mal ¿eh?, pero yo lo veo, como digo, dirigida a complicarte poco la vida -si haces otra cosa y necesitas un diseño visual base rápido- con un diseño limpio y sólido.
Luego… ya empecé a ver que la mayoría de las cosas ya las implementaba yo desde hace tiempo.
Eso sin contar con que, a parte de sentirse más cómodo con algo que uno ha hecho y que conoce, si para algo no necesito un framework CSS es para layouts rígidos(fijos)… esa es la parte sencilla de CSS
Luego, me ha servido para la estructura de las hojas y tal, porque yo no las tenía del todo separadas. Así que sí, es útil, pero yo prefiero el mío propio que es más flexible y amplio en cuanto a la maquetación.
Yo uso unas 12 hojas para un diseño completo, pero si usas Minify… gg, se te queda perfectamente entre 3 y 4Kb… no es genial :mrgrren:
…Dios, pedazo comentario :S
Lo dicho, nos vemos
Muchas gracias por el consejo, desde ayer ya tienes un nuevo suscriptor a tu blog :p me han parecido muy interesantes tus artículos, espero que con el tiempo pueda también tener mi propio framework css
de momento, empezaré con Blueprint.