28221 sujets

CSS et mise en forme, CSS3

[Résolu] Problème de marge avec IE

bonjour à tous,

voici le code qui me confronte au problème

<div id="blochaut" style="width:400px; height:200px; border:1px solid #000000; position:absolute; top:0px; left:10px;">
&nbsp;
</div>

<div id="blocbas" style="width:400px; height:200px; background-color:red; margin-top:230px; margin-left:100px;">
&nbsp;
</div>

Là où ça coince c'est que du fait que le div "blochaut" est en position absolute, la propriété margin-top appliquée au div "blocbas" n'est pas interprétée par IE (j'ai également testé avec mozilla, firefox, opera et il n'y a pas de problème).

La contrainte c'est que l'ordre des balises et les positions (absolute pour "blochaut" et static pour "blocbas") ne doivent pas être modifiés.

Si quelqu'un a une petite idée pour sortir de l'impasse.

merci
Modifié le 14 Nov 2004 - 20:17
Administrateur
Au risque de dire une bêtise, je crois qu'il y'a des particularités avec les marges et les éléments positionnés en absolu : je crois bien qu'elles ne sont pas censées être interprêtées puisqu'un élément absolu ne se place que par rapport à top, right, bottom, left.

Je n'ai pas trouvé de lien explicatif, mais le sujet m'intéresse.
je ne suis pas sur de bien comprendre ta remarque.

1.
si on applique une marge à un élément qui a la propriété position:absolute; et bien cette marge est interprétée (test IE moz firefox opera sous windows)

2.
ma question ne portait pas là dessus mais sur le fait que si un élément dans le flux est précédé d'un élément en position absolute ou relative alors il devient impossible de lui appliquer la propriété margin-top avec IE (dans l'exemple que j'ai construit la propriété margin-left est, elle, bien interprétée y compris par IE.

C'est un mystère et ça ressemble beaucoup à un bug de IE.
Modifié le 14 Nov 2004 - 12:52
le mystère reste entier pour IE mais il y a finalement une possibilité de contournement.

2 cas possibles :

1. les 2 éléments en questions sont précédés d'un élément en static --> appliquer à cet élément la propriété margin-bottom.

2. dans le cas contraire appliquer à l'élément qui contient "divhaut" et "divbas" (à défaut ce sera <body>) la propriété padding-top.

par rapport à mon exemple ça donne :

1.
<div style="width:400px; height:200px; background-color:blue; margin-bottom:240px;">
&nbsp;
</div>

<div id="blochaut" style="width:400px; height:200px; border:1px solid #000000; position:absolute; top:235px; left:10px;">
&nbsp;
</div>

<div id="blocbas" style="width:400px; height:200px; background-color:red; margin-left:100px;">
&nbsp;
</div>

2.
<body style="padding-top:230px;">

<div id="blochaut" style="width:400px; height:200px; border:1px solid #000000; position:absolute; top:0px; left:10px;">
&nbsp;
</div>

<div id="blocbas" style="width:400px; height:200px; background-color:red; margin-left:100px;">
&nbsp;
</div>

</body>
Sujet clos
Aller à