Pb background-position sous IE et pas sous FF

Bonsoir ,
j'ai mis des liens pour mon menu avec une image et sur le onmouseover j'ai voulu décaler la position de l'image pour quelle soit différente :
ce sera peut être plus simple avec le code

Pour le css :

.navigation{
float:right;
font-size: 17px;
font-weight: normal;
letter-spacing: -1px;
color: #006699;
padding-right:22px;
padding-top:2px;
}
.nav{
color:#006699;
text-decoration:none;
padding-left:20px;
padding-right:5px;
background-image:url(images/nav_buddy.png);
background-repeat:no-repeat;
background-position: 7px 9px;}
.nav:hover{
background-position: 7px -9px;
background-image:url(images/nav_buddy.png);
background-repeat:no-repeat;
color:#003366;
text-decoration:none;
padding-left:20px;
padding-right:5px;
}

Le html :

<div class="navigation">
<a href="/index.php" class="nav">Accueil</a> |
<a href="/index.php" class="nav">Jouer</a> | 
<a href="/index.php" class="nav">Boutique</a> | 
<a href="/index.php" class="nav">Forum</a> |
<a href="/index.php" class="nav"> Score</a> |
<a href="/bug.php" class="nav"> Bug</a> |
<a href="/index.php" class="nav">Mon Profil</a>
</div>

et le problème c'est que lorsque sous ie je passe ma souris sur le lien sa me décale tout le bas de ma page, le fond et les autres div
Merci d'avance pour vos réponses et votre aide si vous avez besoin d'autre information n'hésitez pas.
Modifié par typhanie (30 Jun 2008 - 10:08)

Hello typhanie et bienvenue parmi nous ,

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).



Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle.

D'ailleurs, je rappelle que le lien qui apparaît en bandeau tout en haut du forum ("Nouveau sur le forum ?...") est important. Il contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.
Il serait donc courtois de ta part de bien vouloir en prendre connaissance.

Bonne continuation

Bonjour,
j'espère avoir édité mon message correctement si ce n'est pas le cas merci de me prévenir.

typhanie a écrit :
Bonjour,
j'espère avoir édité mon message correctement si ce n'est pas le cas merci de me prévenir.

Non, c'est bon ! Merci !

Pour ce qui est de ta question, le code que tu donnes ne permet pas de voir de décalage (puisqu'il manque le reste de la page ) mais de toute façon je suis surpris qu'un simple changement de background-position pose problème ... L'idéal serait une page en ligne. A défaut il faudra mettre suffisamment de code (html et css) pour pouvoir reproduire le problème.


Quelques remarques en passant :
- un menu de navigation est une liste de liens et donc l'élément liste est tout indiqué. Cela pourrait donner :

<ul id="navigation">
<li><a href="#">Accueil</a> | </li>
<li><a href="#">Jouer</a> | </li> 
<li><a href="#">Boutique</a> | </li> 
<li><a href="#">Forum</a> | </li>
<li><a href="#">Score</a> | </li>
<li><a href="#">Bug</a> | </li>
<li><a href="#">Mon Profil</a></li>
</ul>

Voir à ce sujet les tutoriels sur les menus CSS.

- lorsqu'un élément est unique dans la page (div ou ul de navigation) autant lui affecter un id plutôt qu'une class. Voir à ce sujet Quelle est la différence entre une classe et un id ?

- il est inutile d'affecter une class à tous les éléments enfants d'un conteneur qui possède lui-même un id ou une class.
Dans ton exemple tu aurais pu cibler les liens à l'aide de .navigation a { ... déclarations actuelles de .nav ... }
Dans le mien à l'aide de #navigation li a { ... déclarations actuelles de .nav ... }
Voir à ce sujet Comprendre l'héritage et la parenté des styles CSS et les sélecteurs.

- pour les déclarations des éléments enfants d'un élément parent il est inutile de reprendre ce qui a déjà été déclaré (cela s'applique également à la pseudo-classe :hover). Donc tu aurais pu te contenter de mettre :

.nav:hover{
color:#003366;
background-position: 7px -9px;
}

A+

Merci pour ta réponse je met un exemple en ligne
http://aide-developpeur.infos.st/
car je debute en css et je veux bien essayer de mettre des balises ul et li mais je ne vois pas trop comment faire donc je vais chercher en attendant un réponse a mon problème
encore merci