Posicionamiento de capas

[falonpla]

Fijaros en las dos capas que simulan dos post-it en la siguiente dirección:

http://www.futurosprofes.com/pruebas/index.html

En Firefox y Opera no tengo problemas para verla correctamente, pero en IE6 el postit de la derecha se me desvia bastante hasta la derecha. No entiendo por qué me hace esto, ya que usé el mismo código que para esta otra página:

http://www.futurosprofes.com/pruebas/meca.html

Como veis en esta última las capas primeva y segeva se ven igual posicionadas en todos los navegadores, entonces si uso el mismo código para la página anterior de los post-it, no entiendo por que el explorer me descoloca el postit de la derecha. Echarme una mano please.

[mbavio]

Yo creo que IE esta entendiendo mal el margen de #postit2.
Por que no pruebas de flotar tambien #posit2 a la derecha y que el margen entre ellos se realize automaticamente?
Saludos.

[falonpla]

Probaré como dices. Solo una cosa, cuando dices que el margen entre los postit se realice automaticamente, te refieres a que al #postit2 le ponga por la derecha el mismo margen que le pongo al #postit1 por la izquierda, o a que use alguna propiedad en el css que haga esto automaticamente. Gracias.

[mbavio]

Nono a la que me refiero es que flotes cada uno a su lado, y que no pongas ningun margen. Obviamente que tendrás que poner un tamaño a la capa contenedora de estos dos divs. Asi, el margen será automático.

[Mikmoro]

Yo creo que es el mismo problema de la otra vez, de explorer y sus problemas con los márgenes. Puedes probar a cambiar el margin-left: 300px; por left: 300px; del postit2, a ver qué pasa.

Mikel.

[falonpla]

Supongo que será eso, aunque ya lo solucioné flotando cada capa a un lado, como indicaba mvabio. Lo que realmente me descoloca es como de las dos páginas que puse, en una colocaba bien las cajas, y en otra no, cuando las propiedades que tenian las cajas en las hojas de estilo eran exactamente las mismas.

Por cierto, podriais recomendarme un buen libro sobre CSS? , de los que he mirado en tiendas online este es el que más me llama:

http://www.fnac.es/dsp/?servlet=exte...&prodID=624548

[Mikmoro]

Bueno, es que en realidad creo que las clases no son iguales:

#primeva {
width: 210px;
float: left;
margin-top: 30px;
position: relative;
left: 55px;
}
#postit {
background-image: url(postit.png);
width: 244px;
float:left;
margin-top: 30px;
position: relative;
left: 35px;
height: 200px;

}

#segeva {
width: 210px;
margin-top: 30px;
margin-left: 320px;
}
#postit2 {
background-image: url(postit.png);
width: 244px;
margin-top: 30px;
margin-left: 300px;
height: 200px;
}

Esas pequeñas diferencias son muy importantes.

Yo lo más práctico que he encontrado ha sido esto:

http://www.sidar.org/recur/desdi/tra...css/intro.html

La traducción de las norma css2, pero bueno, yo soy un poco raro.

Mikel.

[falonpla]

Gracias de nuevo Mikel, la verdad que no pensaba que por definir un alto a la capa, darle un ancho diferente al width o valores diferentes a propiedades como el left y margin-left cambiara el comportamiento. Estoy dando mis primeros pasos y la verdad que esto del css es un invento, pero me da miedo cada vez que tengo que comprobar mi página en el Internet Explorer, estoy pillando un trauma con este navegador.

[Mikmoro]

Ya, a mi también me jode cantidad, como a todo el mundo. La verdad es que con las tablas las diferencias son mucho menores, pero a veces casi insalvables también.

Y encima sacan el IE7 (que es horrible, para mi, en todos los aspectos), y no han corregido casi nada. Pone por alguna parte que tiene un 56% de compatibilidad con css2 .

Desgraciadamente en los proyectos profesionales no hay más remedio que tenerlo muy en cuenta. En los personales, llegará un día que pondremos en el pie de la web: "¿usas explorer y ves mal esta página? Será porque quieres. Que te den".

Mikel.

[mbavio]

Muerte al *** explorer!!!!

falonpla, existen muy buenos libros de CSS, CSS Mastery de Andy Budd ha sido el mejor que he leido. Asi todo, en la web existen muy buenos tutoriales y si sabes buscar, puedes reemplazar perfectamente un libro con la web. Saludos.