Bordes CSS crossbrowser
4 seguidores
He observado que si creo un div de 100x100px y le doy un borde de 10px con el siguiente código:
<code><div style="height: 100; width: 100px; border: 1px solid #000000"></div></code>
En IE crea el borde de 10 px. dentro de los 100 de alto o ancho pero el Mozilla crea el borde fuera de esos 100px. Es decir, en Mozilla el cuadrado parece más grande que en IE. Creo que lo correcto es lo que hace Mozilla. Lo que busco es como hacer que los dos navegadores se comporten igual. ¿Alguien sabe como solucionarlo?
josh
Si señor, ese es justo mi problema. Ese hack está muy currado. Solo que en Mac se verá mal y prefiero usar otros metodos más ortodoxos. Pero bueno, algo es algo. Ya os enseñaré el resultado. Thk a los tres.
c
En The Noodle Incident, además te todas las plantillas CSS para hacer layouts sin tablas, he encontrado este enlace a un hack para corregir el añadido de tamaño por padding y bordes en IE 5.x: Box Model Hack.
(Aunque yo no soy partidario de este tipo de hacks, éste está bastante extendido y funciona)
josh
No te preocupes Orange, ya me he resignado :)
Un pequeño truco es meter dentro un sim (se dice asi? es que yo le llamo pix XD) con el ancho y alto buscado. Lógicamente esto solo sirve para div's vacios :(
Seguro que el gabi ya se ha enontrado alguna vez con este problema
orange
Ahora no puedo porque tengo que presentar una cosa a mediodia, pero esta tarde le echo un ojo
josh
Si, realmente mi HTML es mínimo y está todo en un CSS separado. No quiero usar tablas pq luego el HTML pesa mucho.
Se trata de una diferencia de comportamiento entre navegadores.
He estado investigando y parece ser que el IE no se comporta conforme al modelo de cajas del W3C. MS lo corrige en la versión 6 del IE, lo explica aquí http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnie60/html/cssenhancements.asp
Lo que buscaba es algún truquillo para saltarse esas diferencias.
orange
Los navegadores tienden a comportarse de manera diferente sobre todo si metes la información de apariencia en el propio HTML.
Crea un estilo, y ahi puedes controlar mejor cómo va a ser la apariencia de lo que quieras, luego aplicas ese estilo al elemento mediante una clase.
Yo soluciono problemas de visualización de esa forma (pej la forma de poner los bordes de tabla en IE y Nets), siempre es mejor crear una clase que aplicar el estilo directamente.
Si no te sale, postea e investigo un poco más tu problema concreto.
esegese
Los estilos tienen eso, no se van a comportar igual en ambos navegadores porque ambos (iexplorer y netscape) se pasan las recomendaciones de la W3C por el forro.
La única solución que yo conozco para eso (y, desde luego, no se mucho) son las tablas. Jugando con espacio entre celdas y colores de tabla y celda, o bien anidando dos tablas de una sola celda.