Posicionamiento con CSS

DeLaVega · #1 (**permalink**) 14/08/2004, 16:14

Decidido finalmente a abandonar las tablas para siempre para el diseño, comencé a experimentar con CSS para posicionar.
Ahora bien, ya empecé con dificultades con respecto a los distintos navegadores... estoy probando ahora solamente con IE 6 y el Mozilla Firefox 0.8.... el problema principal lo tengo en intentar posicionar diferentes divs y que se muestren de la misma forma en ambos. En mi ejemplono queda igual en ambos... en IE 6 quedan encimados... y en Firefox queda uno debajo del otro, tal como lo quiero... como hago para que quede igual en los 2? Muchas gracias...

<html>
<head>
<title>Prueba</title>
<style type="text/css">
#a1 {
border: solid 1px green;
margin: 0px;
width: 50px;
height: 100px;
}
#a2 {
border: solid 1px red;
position: absolute;
top: 110px;
}

</style>
</head>
<body>
<div id="a1">
Div 1
</div>
<div id="a2">
Div 2
</div>
</body>
</html>

KnowDemon · #2 (**permalink**) 14/08/2004, 17:23

Cada navegador asigna diferentes valores por defecto a determinadas propiedades CSS. Para asegurar un comportamiento similar debes asignar por tí mismo esos valores que se muestran diferentes. En tu caso es el padding y margin del body:

Una solución a tu problema podría ser esta:

<html>
<head>
<title>Prueba</title>
<style type="text/css">
body{
margin: 0px;
padding: 10px;
}
#a1{
border: solid 1px green;
margin: 0px;
width: 50px;
height: 100px;
}
#a2{
border: solid 1px red;
width: 50px;
position: absolute;
top: 111px;
}
</style>
</head>
<body>
<div id="a1">
Div 1
</div>
<div id="a2">
Div 2
</div>
</body>
</html>

Como podrás darte cuenta siguen sin ser identicos, pero la diferencia es de 2 pixeles. Esto se debe a que IE calcula mal el tamaño de las cajas. Al tamaño de la caja se le debe sumar el tamaño de los bordes, pero no lo hace, coloca los bordes dentro de la caja. Cambia el tamaño de los bordes en el ejemplo para que puedas notar lo que digo.

Intenta no ser dependiente del posicionamiento absoluto, ni usarlo en exceso. Al menos no si usas bordes. Si puedes colocar a las cajas en su lugar utilizando el natural fluir del contenido es mejor...

orochies · #3 (**permalink**) 21/08/2004, 15:44

Pues a my me parece que depender absolutamente del posicionamiento absoluto esta aun muy corta a usar ya que por la diferencia entre navegadores aun nos queda algo corto...

me parece que es una muy buena opcion seguir con el ordenamiento con tablas !!!Pero claro con uso moderado !!! Ya que eh tenido los mismos problemas con los posicionamientos en diferentes navegadores !!! O cuando nos estandarizaremos!!!

_Saludos