Margin-top IE ou FF/OP les fautifs ?

Bonjour,

apres pas mal de recherche je ne comprend tjs pas pk cet exemple:

<style>
 #div1{
 height:100px;
 width:100px;
 background-color:#fc3;
}

 #div2{
 height:50px;
 width:50px;
 background-color:#fc3;
 margin:10px 20px 0 2px;
}
</style>

<div id="div1">
  <div id="div2">
    test
  </div>
</div>

Le div2 a est bien décalé a droite et a gauche dans le div1 mais le margin-top (10px) du div2 fait une marge sur le div1 et non le div2
ca fonctionne sous IE (un bug?) mais pas sous ff et op.

Si vous avez une piste pour ne pas m'amusez a mettre un padding-top sur mon div1 ca serait cool .

Merci d'avance.

Hello ! rajoute ça aux div en question :

line-height:0em;font-size:0em;

De plus tu devrais définir les margin et les padding à 0px pour ton div1.
Modifié par Ralfman68 (22 Mar 2006 - 17:45)

pk jouer sur les hauteur de lignes et de fonts pour resoudre le pb ?

en fait j'ai dis une grosse connerie, mais je suis en train de chercher.
Le line-height n'est pas nul par défaut sur ie, même si le div ne contient pas de texte, alors que avec ff et opéra il est 0 si il n' ya pas de texte.
Modifié par Ralfman68 (22 Mar 2006 - 18:13)

Bonjour,

FF et Opéra réagissent normalement, c'est un cas de fusion des marges verticales :
http://www.yoyodesign.org/doc/w3c/css2/box.html#collapsing-margins

A+
Modifié par Alan (22 Mar 2006 - 18:09)

Voilà les css qui donnent un résultat identique . Testé avec ie et ffox :

#div1{
 height:100px;
 width:100px;
 background-color:#fc3;
 padding:0px;
}



#div2{
 height:40px;
 width:30px;
 background-color:#0c3;
 margin:0px;
 padding:10px 20px 0 2px;
}

Modifié par Ralfman68 (22 Mar 2006 - 18:14)

Ca marche?