CSS difference entre FireFow et IE6

Consultez la formation à Google Analytics de WebRankInfo / Ranking Metrics

madx
WRInaute occasionnel
WRInaute occasionnel
 
Messages: 303
Inscription: 19 Juin 2003

CSS difference entre FireFow et IE6

Message le Ven Fév 13, 2004 1:17

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 :

Code: Tout sélectionner
#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

Code: Tout sélectionner
<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 ;

Code: Tout sélectionner
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
Nouveau WRInaute
Nouveau WRInaute
 
Messages: 6
Inscription: 15 Jan 2004

dans l'absolute, abstiens-toi

Message le Ven Fév 13, 2004 16:50

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
WRInaute occasionnel
WRInaute occasionnel
 
Messages: 303
Inscription: 19 Juin 2003

Message le Ven Fév 13, 2004 23:29

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


Si vous avez aimé cette discussion, partagez-la sur vos réseaux sociaux préférés :

Formation recommandée sur ce thème :

Formation Google Analytics : en 2 jours, apprenez comment exploiter l'essentiel des possibilités de l'outil de mesure d'audience de Google. Formation animée par les experts Google Analytics de Ranking Metrics.

Tous les détails sur le site Ranking Metrics : programme, prix, dates et lieux, inscription en ligne.

Lectures recommandées sur ce thème :



Qui est en ligne

Utilisateurs parcourant ce forum: Aucun utilisateur enregistré et 2 invités