CSS difference entre FireFow et IE6
3 messages • Page 1 sur 1
Consultez la formation à Google Analytics de WebRankInfo / Ranking Metrics
CSS difference entre FireFow et IE6
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 :
Le HTML
Pour corriger ce pb je fait ;
J'ai trouvé cette solution mais j'aimerai comprendre pourquoi ce décalage, la plus logique deconne.
Merci de votre aide
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
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.
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.
3 messages • Page 1 sur 1
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 Julien Coquet, expert certifié officiellement par Google Analytics.
Tous les détails sur le site Ranking Metrics : programme, prix, dates et lieux, inscription en ligne.
Lectures recommandées sur ce thème :
- Google crawle les fichiers CSS
- Afficher le PageRank en entier dans Firefox (barre d'outils Google)
- Comment optimiser la proéminence des mots-clés
- Comment voir facilement les liens nofollow dans Firefox
- Les blogs (Search Engine Strategies 2004 - San José)
- Prise en compte de la mise en page HTML par les moteurs de recherche
- Découpage du forum webmaster en 2 forums
- 25 astuces pour optimiser son blog
- Search Engine Strategies - Londres
Qui est en ligne
Utilisateurs parcourant ce forum: Aucun utilisateur enregistré et 0 invités


le forum