Images en background et marges intempestives

Bonjour à tous,

Si vous jetez un oeil sur la page de test http://www.hypothese.net, vous ne verrez pas exactement la même chose sous IE et sous Firefox/Opera. La présentation Opera/Firefox est correcte (en tout cas, correspond à ce que j'attends ). Sous IE, par contre, une marge de 4px apparaît à droite de l'image. Classique, hélas, mais en l'occurrence je n'arrive pas à comprendre d'où vient cette marge que IE intercale entre l'image de gauche et les blocs de droite.

Code HTML pour la partie en question :

<div id='tete'>
  <div id='imgSite'></div> 
  <div id='menuPrincipal'>
    <a href='index.php' style='margin-left:4px;'>Accueil du site</a>
    <a href='forums/index.php'>Acc&egrave;s aux forums</a>
  </div>
  <div id='menuSecondaire'></div>
  <div id='barreInfos'>Bonjour, visiteur [snip...]</div>
</div>

Les CSS simplifiées :

* { margin : 0px; }

body {
  background-color : black;
  color : black;
  border : 1px solid white;
  padding : 0px;
}

#tete {
  background-repeat : no-repeat;
}

#imgSite {
  background-image : url( ../img/panneau1.jpg );
  float : left;
  height : 132px; 
  width : 200px;
  border : 0px;
}

#menuPrincipal {
  background-image : url( ../img/barreMenu3.jpg );
  height : 32px;
  border-style : solid;
  border-color : black;
  border-top-width : 0px;
  border-bottom-width : 1px;
  border-left-width : 0px;
  border-right-width : 1px;
  padding-top : 2px;
  padding-bottom : 2px;
  padding-left : 0px; 
  padding-right : 0px;
  margin : 0px;
}

#menuPrincipal a {
	border-top : 2px solid #FFF;
	border-bottom: 2px solid #345;
	border-left  : 2px solid #DEF;
	border-right : 2px solid #89A;
         padding : 5px;
	color : black;
	text-align : center;
	line-height : 32px;
	text-decoration : none;
	font-family : courrier new;
	font-weight : bold;
	font-size : 12px;
}

#menuSecondaire {
  background-image : url( ../img/barreMenu3.jpg );
  height : 32px;  
  border-style : solid;
  border-color : black;
  border-top-width : 0px;
  border-bottom-width : 1px;
  border-left-width : 0px;
  border-right-width : 1px;
}

#barreInfos {
  background-color : #FCFCFC;
  height : 62px;  
  border-style : solid;
  border-color : black;  
  border-top-width : 0px;
  border-bottom-width : 1px;
  border-left-width : 0px;
  border-right-width : 1px;
  overflow : hidden;
}

La taille du bloc "imgSite" correspond pile à la taille de l'image, pas de marges, pas de bordure. Les blocs à sa droite n'ont ni marges ni bordures gauches. J'ai essayé à tout hasard en plaçant des margin=0, border=0 etc... dans le sélecteur * ou dans les divers blocs : rien n'y fait.

Un phénomène intéressant : si je retire la ligne

  height : 32px;

du bloc "menuPrincipal", celui-ci vient se coller à l'image sous IE comme sous les autres navigateurs. Ouf ! Idem pour les blocs du dessous évidemment.

Et je ne comprends pas du tout pourquoi...
Modifié par Herode (25 Jun 2006 - 19:41)

Encore une fois le problème vient des interprétations de Ie avec les margin:auto width:100% et la gestion des border.

sinon tu peut toujours faire

dans "imgSite"
-> rajoutes
position:absolute; left:0px; ou 1px si tu veut conserver ta bordure
-> enlèves
float:left;

dans "menuPrincipal" et "menuSecondaire"
->ajoutes
margin-left:200px;
Modifié par Graynor (25 Jun 2006 - 18:44)

Graynor a écrit :
Encore une fois le problème vient des interprétations de Ie avec les margin:auto width:100% et la gestion des border.

Pas du tout. Il s'agit encore une fois du bug « Three pixel jog ».
La différence en ajoutant ou enlevant le height:32px vient du fait que l'élément est dans un cas doté de layout et dans l'autre non.
Ce qui produit une différence qu'on peut voir ici : http://www.test.blog-and-blues.org/haslayout/tests/float6.html

On peut corriger ce Bug (version avec Layout) en décalant par la gauche de 3 pixel grâce à un positionnement relatif, puis en rajoutant par la droite ces trois pixels via une marge négative. Le tout par commentaire conditionnel.

Le plus simple étant quand même de contourner ce bug (du moins là où il est vraiment gênant).
Modifié par Alan (25 Jun 2006 - 19:01)

Vu. Merci pour l'info !