Différence interprétation IE6/IE7 pour les marges (padding/ margin) ?

Bonjour tous,
J'ai un souci d'interprétation entre IE6 et IE7.J'ai donc une partie de ma page qui est divisé en 2 colonnes grace à un float.
Sur IE7 et Firefox pas de soucis.
Sur Ie6, j'ai un décalage de 2 ou 3 pix qui me sèment le bins.
Capture écran IE6 en piece jointe

Comment avez vous contourner ce pb


Code HTLM (épuré pour vous faciliter la lecture) :

<div id="espace-interne">
      <!--composition partie médiane-->
      <div id='main'>
        <div id="colonnegauche" style="background-color:#0033FF">
          <div id="logo1"></div>
          <div id="menu"> </div>
        </div>
        <!-- fin de div#colonne gauche -->
        <div id="colonnedroite">
          <div id="logo2" style="width:707px; background-color:#CCFF00"></div>
          <div id="modifiable"></div>
        </div>
      </div>
      <!-- fin de div#centre -->
      <!--fin composition partie médiane-->
    </div>

Mon css est le suivant :

#espace-interne { /*espace dispo du site + lignes verticales contour*/
width: 888px;
margin-left:11px;
margin-right:11px;
}

div#main {
min-height:1100px;
background-color:#CC33CC;
}

div#colonnegauche {
float:left;
width: 181px;
padding:0px;
margin:0px;
}

div#colonnedroite {
width: 704px;
padding:0px;
margin-left:0px;
margin-right:0px;
overflow:hidden;
}


/*côté gauche*/
#logo1{
height:141px;
width:181px;
margin:0px;
padding:0px;
}
#menu {
width:178px;
height:758px;
padding-left:3px;
}

/*Côté droit */
#logo2 {
position:absolute;
z-index:0;
margin-left:0px;
padding-left:0px;
width:707px;
height:159px;
}
#modifiable {
width:690px;
margin:0px;
padding-left:20px;
padding-right:20px;
padding-top:159px;
min-height:875px;
}

Merci de vos réponses

ie6 a un modele de "boite" different des navigateurs à jour.
Pour éviter les problemes tu ne peux pas associer width avec padding ou height avec padding.
Utilise les marges ou la propriété text-indent

Bonjour,

As-tu validé ta page ?

Bonjour,

N'y aurait il pas trop de div par hasard ?

je pense que ceci serait plus adapté à ton problème (fait de tête, donc peut être une chtite coquille peut se glisser) :

<div id="global">
 <div id="colonne1">
  <p>colonne gauche</p>
 </div>
 <div id="colonne2">
   <img href="#" alt="mon logo" />
   <p>main</p>
  </div>
</div>

#colonne1{width:300px; float:left;}
#colonne2 {margin-left:300px;}

++
Modifié par Nolem (15 Nov 2007 - 17:51)

Bonjour Nolem,
Tout les div présent sont utiles, ceux pour les logos me servent à pouvoir mettre par dessus du texte en code et pas dans l'image, très utile pour les moteurs recherche.

Bonjour papyjo,
Mon code est validé par http://jigsaw.w3.org/css-validator/ et http://validator.w3.org/ ,tout est correct.

Bonjour jeremw,
Qu'entends tu par

a écrit :
Utilise les marges ou la propriété text-indent

Tu souhaites que je fasse qq chose comme :

div#colonnegauche {
float:left;
padding:0px;
margin:0px;
}

div#colonnedroite {
padding:0px;
margin-left:181px;
overflow:hidden;
}

Dans ce cas là, #modifiable passe carrément en dessous de #colonnegauche et #logo2 disparait.
Que vient faire text-indent Là dedans ?
Je crois que je t'ai pas compris

Je vais quand m^me pas faire un tableau !!!

Je pense que c'est ce bug d'IE6 :

http://www.positioniseverything.net/explorer/threepxtest.html

Tu trouveras différentes solutions pour le résoudre (j'ai déjà eu ce problème, et je t'avoue que dans mon cas j'ai pas réussi à les appliquer, j'ai du utiliser une feuille de style spéciale IE6).

Ah, là je crois que tu as raison.
cela ressemble bcp à mon pb.

Merci du lien.
Je regarde