Uno de los mayores quebraderos de cabeza de cualquier maquetador o diseñador WEB es la dichosa presentación en pantalla que realizan los distintos navegadores, sobre todo cuando intentamos posicionar de manera absoluta las capas que forman parte de la página.
Resulta que el modo en que calculan el tamaño de las capas los navegadores más extendidos es completamente diferente y ello influye directamente en el aspecto final.
Una posible solución es forzar a FireFox a comportarse como IE, ya que este último realiza el cálculo de un modo más sensato aunque no sea el recomendado por el W3C.
Para ello basta utilizar la siguiente hoja de estilos y la coincidencia entre ambos navegadores será idéntica prácticamente a nivel de píxel.
<style type="text/css">
*{-moz-box-sizing: border-box;box-sizing: border-box}
p{margin-top:0px;margin-bottom:1em}
form{margin:0px}
input{padding:1px}
</style>
También funciona en NetScape y no se si en algun otro navegador.
20 Comentarios
Veo que ultimamente hablas mucho de temas relacionados con el diseño web, asi que leyendo tu curriculum de nuevo decidí visitar Michael Page.
Enhorabuena por la web Ric, toda una "profesionalidad" ;-P
Por cierto, me ha encantado lo de "Confienos una mision", en vez de llamarse Michael Page podia llamarse Michael Knight
Saludos!
Gracias Luther pero no quiero llevarme todo el merito, es un trabajo de mucha gente y en varios países.
De hecho tampoco participé en la realización de esta ya que esta versión fue realizada en Java y esto lo llevo bastante mal. Yo, solo me ocupaba de llevarla para España y Portugal, y para eso tenía un equipo de 3 personas.
Una página web de este tamaño requiere mucho trabajo y muchos mimos, y si además la tienes que hacer crecer, tienes que ser muy imaginativo.
A ver si te mando un foto-montaje que me hicieron los colegas de Michael Page donde salgo con el cuerpo de Michael Knight, no por lo que tu dices sino por el corte de pelo que tenia antes.
Necesito ver ese fotomontaje
Entrando en el tema… No sé si entiendo muy bien la táctica. Yo es que soy antihacks xD
Jajajajaja. Mandamelo que soy fan de Michael ;-P
Tienes que ser un puntazo luchando contra el mal. Dale recuerdos a Kitt y Devon de mi parte.
¿Sensato?
Quisiera saber por qué se considera más sentato el modo de posicionamiento del IE que el de la W3C.
Realmente no es el posicionamiento lo más sensato, sino el denominado box-sizing, o cálculo del tamaño de las capas y demás elementos.
Con IE el "width" es el ancho y el "height" el alto (así de fácil), mientras con el modelo del w3c es necesario además del "width" y "height" conocer el "padding" y el "margin" así como el "border-width" para poder calcular el tamaño real en píxeles que ocupará en pantalla el elemento.
Creo que el modelo más sensato está claro.
Para saber más:
http://www.webmasterworld.com/fo...
Gracias, al fin me quite un dolor de cabeza de encima, y ahora mi web, cierra bien, pixel a pixel.
Interesante articulo ademas de bastante util, una solucion muy practica para evitar doble diseño, ya llegara el dia en que los browsers sigan las normativas al pie de la letra, mientras tanto esta es una opcion muy recomendable
Un saludo
Lo que no entiendo de tu código es que no cierra con el punto y coma, parece estar incompleto, no sé si podrías aclararme eso.
No hace falta poner un “;” en el ultimo atributo.
Dicho de otra manera, no hace falta poner un “;” antes de un “}”
Solo veo
*{-moz-box-sizing: border-box;box-sizing: border-box} p{margin
como acaba??
se pone asi, tal cual en la pagina .html?
Me pasa lo mismo que a otro comentarista. ¿Como acaba?
He retocado un poco el post de Luis para que se vea todo… De todas formas este post es bastante viejo y hay otras técnicas, quizás un poco más fiables que esta.
Disculpa me interesa este tema donde pongo ese código soy principiante y no c donde ponerlo saludos
Al ser una hoja de estilo la tendrás que poner dentro de la etiqueta
head.ok, pero no lo entiendo, tengo un menu horizontal y se me ve perfecto en firefox pero se me hace vertical en IE, ¿cómo uso ese código que citas?? lo siento, no lo entiendo y voy de cabeza con este tema.
gracias por adelantado si me contestas.
son orriblesssss,pero tienen su gracia.kierop unooooo,pero xo kiero el k se le escapa el airee,ese pa mi
Muchas gracias!!! Esto me ha servido de gran ayuda, jo, me vuelvo loca con los diferentes navegadores…
No lo pillo, intento que una de mis webs sean identicas en ie y ff, pero en ff se me descuadra,
saludos