Margin y padding
Como en el curro tengo que estar mas pendiente de la correcta visualización de los diseños en los navegadores me he fijado en algunas cosillas.
Si te das cuenta en el IE según va bajando la versión ves como se va perdiendo el soporte del CSS, hasta el IE 3 que ese ni quiere mostrar nada decente.
En versiones antiguas del IE se puede ver como apenas rulan las listas y su manipulación, me he dado cuenta que si manipulas una lista y tienes margins o paddings, incluso los bordes estos desaparecen, no existen para el.
También en el tema de imágenes, si dentro de un párrafo metes una imagen con un float:left para alinear a la izquierda no dudes en usar margins para separarla del texto pues el padding aunque rula en mozilla en los demás navegadores se hace la picha un lío.
Hay que tener cierto cuidado con los margin y padding, siempre los suelo poner a 0 y a partir de esa medida empezar a configurarlo.
Siempre sale la típica pregunta de porque las listas tiene un margin-left diferentes en los navegadores y lo que en realidad sucede es que cada uno pone un valor por defecto y eso jode el tinglado.
Bueno y ya que estamos, sobre el centrado de una capa, eso de los margin:auto; es una autentica gozada pero va cuando realmente quiere, normalemente lo suelo hacer para centrar una imagen, uso un display:block; y luego pongo los margin a auto.Para centrar una capa la cosa es diferente, esta el tipico Hack de centrar el texto en el body y luego en la capa cambiarlo.
Conclusion: Jode diseñar para tantos navegadores pero me parece a mi que gana la batalla uno que yo me se… grrrr
Ver post
Comentar
tanke#1 hace 1302 días
Yo lo he comentado hace tiempo en mi web:
Compatibilidades y CSS
Un saludo,
sosa#2 hace 1301 días
*{margin:0;padding:0;}
y voila! Adios a los valores por defecto.
IceBeat#3 hace 1301 días
Sosa como eso funcione me voy acordar de ti en mucho tiempo jejeje.BUEN truquito.
Nordic#4 hace 1301 días
sosa#5 hace 1300 días
*{
padding:0;
margin:0;
font-size:12px;
}
la idea es la misma: “resetear” los valores por defecto a gusto de uno.
corsaria#6 hace 1300 días
Oops, rediseñado el site de http://www.sixapart.com/movabletype/ a cargo de los chicos de: http://muledesign.com/
¿Qué te parece el resultado? A mi me gusta. :))
Nordic#7 hace 1300 días
*{
padding:0;
margin:0;
font-size:12px;
}
¿Qué pasará con navegadores como IE6/Win cuando cambies el tamaño de la letra en el navegador? ¿Cambiará?
Porque no normalmente le digo:
body {
font-size: 80%;
}
Y luego juego con los EM para establecer los tamaños de los tipos de letra.
sosa#8 hace 1298 días
El asunto del cambio de tamaño, queda definitivamente afectado en IE pero, digamos que es un progresive enhacement para quienes usen Firefox u otro navegador que pueda ajustar el tamaño de letras especificadas en pixeles.
Supongo que no se puede tener todo en la vida.
Nordic#9 hace 1298 días
IceBeat#10 hace 1297 días
Sosa tiene razon en lo del tamaño relativo, si lo pones al tanto porciento seguira siendo de todas formas relativo.
A mi me ha dado por usar pixel porque los veo algo mas seguros pero aun asi no sigue siendo la mejor opcion.
Al final siempre tenemos que ceder :(.
Federico#11 hace 1293 días
Sobre los diferentes valores: ni tan diferentes. Al menos no recuerdo que sean tan obvios. Sí existe el “problema” de Mozilla versus los demás con respecto a qué es el espacio a la izquierda en las listas, pero en la medida que no necesites un trabajo perfecto a nivel pixel, los valores por defecto no son tan terribles.
Por cierto, no entendí al final que problema tuviste con margin:auto. Las imagenes son inline por defecto así que (en principio) deberías poder centrarlas con text-align:center.
Y sobre la queja final: Ni tanto. Sinceramente aunque IE tiene muchos bugs (aún en modo standards compliant) se dan (generalmente) en casos muy específicos. Y menos mal que está Google para ayudarnos a lidiar con ellos ;).
IceBeat#12 hace 1292 días
La verdad es que si que hay valores por defecto que importan,es cierto que sino diseñas a nivel de pixel te da igual pero por ejemplo los margins de los parrafos varian mucho y es una cosa que debe tenerse en cuenta.
Es cierto que las imagenes se tratan como un elemento en linea pero si la colocas dentro de un parrafo el alineamiento es para todo el parrafo, yo uso un display block para tratarlas como bloque y que el texto no afecte a la imagen.Podria usar varios parrafos pero bueno tampoco es pa morirse jeej.
Hombre si los fallos fuesen en todos los casos entonces eso si que seria un problema gordo, pero son en esos casos cuando dices que no tienes mas remedio que adaptarlo a sus necesidades.
Blid#13 hace 1278 días
IceBeat#14 hace 1277 días
Pero seguro que esa no es tu pregunta no?.
blid#15 hace 1274 días