CSS difference entre FireFow et IE6

[madx]

Bonjour,

J'ai un problème que j'aimerai resoudre et surtout comprendre, je veux faire un menu avec un rollover, mon pb est que le positionnement des images est différente suivant le navigateur (IE ou firefow), si je centre pour IE en hauteur mes menu pour FireFox j'ai un léger decalage, mon code est :

#menu-fond {
	float: left;
	width: 146px;
	height: 464px;
	background-color:#FFFFFF;
	background-image: url(images/menu.jpg);
	background-repeat: no-repeat;
	text-align : left;	
}

#menu a {
   position: absolute;
   width:141px; 
   height:18px; 
   text-decoration: none;
   background: #FF69B4;
}

#menu a i {
	visibility: hidden;
}

a#societe{ 
   top:140px; 
} 

a#societe:hover{ 
   background: url(images/societe.gif)  no-repeat; 
} 

a#nouveaute{ 
   top:190px; 
} 

a#nouveaute:hover{ 
   background: url(images/nouveaute.gif)  no-repeat; 
}

Le HTML

<div id="menu-fond">
  <div id="menu">
  <a href="#" id="societe"><i>Societe</i></a>
  <a href="#" id="nouveaute"><i>Nouveaute</i></a>
   </div>
</div>

Pour corriger ce pb je fait ;

a#societe{ 
/*   top:140px; */
   margin-top:42px; 
} 

a#nouveaute{ 
/*   top:190px; */
   margin-top:92px; 
}

J'ai trouvé cette solution mais j'aimerai comprendre pourquoi ce décalage, la plus logique deconne.

Merci de votre aide

 

[agabtehu]

dans l'absolute, abstiens-toi

C'est peut-être la gestion de position:absolute qui est gérée différement par IE (vu qu'il a un moteur plus ancien).
J'ai vérifié sur openWeb : http://openweb.eu.org/articles/initiation_absolue/

Avec position:absolute, #menu n'utilise #menu-fond comme référent que si #menu-fond est déjà en position relative ou absolute. Dans le cas contraire, c'est la fenêtre (viewport) qui est utilisée comme base.

Moi j'aurai viré le position:absolute et gardé un margin-top sur #nouveaute. Et forcé
#menu a {display: block;} pour que le height soit bien en compte.

 

[madx]

Merci, j'ai utilisé le margin-top et retiré le <div id="menu"> qui ne sert pas a grand chose.