Div - changement de position au survol impossible IE 6 & 7

Bonjour.

Je dois réaliser une navigation pour un site comportant 4 boutons.
En l'etat " a " les boutons ont une postion en top et left.
En l'etat " a:hover " les boutons changent de position uniquement en top.
Cela fontionne sur ie 8 , opera, mozilla, safari, chrome, mais pas sur ie 6 & ie 7.

voici le code HTML

  <div id="navigation">
    <div id="navigation_proteger"><a href="#" title="#"> </a></div>
    <div id="navigation_simuler"><a href="#" title="#"> </a> </div>
    <div id="navigation_equiper"><a href="#" title="#"> </a> </div>
    <div id="navigation_faciliter"><a href="#" title="#"> </a> </div>
  </div>

voici le code CSS

#navigation {
	background-image:url(../images/background_navigation.jpg);
	width:1007px;
	height:57px;
}

#navigation {
	position:relative;
	width:1007px;
	height:57px;
	background-image:url(../images/background_navigation.jpg);
}
#navigation_proteger a {
	background-image:url(../images/navigation_btn_proteger_off.gif);
	width:236px;
	height:27px;
	display:block;
	position:absolute;
	left:28px;
	top:15px;
}
#navigation_proteger a:hover {
	background-image:url(../images/navigation_btn_proteger_on.gif);
	width:236px;
	height:27px;
	display:block;
	position:absolute;
	left:28px;
	top:1px;
}
#navigation_simuler a {
	background-image:url(../images/navigation_btn_simuler_off.gif);
	width:236px;
	height:27px;
	display:block;
	position:absolute;
	left:265px;
	top:15px;
}
#navigation_simuler a:hover {
	background-image:url(../images/navigation_btn_simuler_on.gif);
	width:236px;
	height:27px;
	display:block;
	position:absolute;
	left:265px;
	top:1px;
}
#navigation_equiper a {
	background-image:url(../images/navigation_btn_equiper_off.gif);
	width:236px;
	height:27px;
	display:block;
	position:absolute;
	left:502px;
	top:15px;
}
#navigation_equiper a:hover {
	background-image:url(../images/navigation_btn_equiper_on.gif);
	width:236px;
	height:27px;
	display:block;
	position:absolute;
	left:502px;
	top:1px;
}
#navigation_faciliter a {
	background-image:url(../images/navigation_btn_faciliter_off.gif);
	width:236px;
	height:27px;
	display:block;
	position:absolute;
	left:739px;
	top:15px;
}
#navigation_faciliter a:hover {
	background-image:url(../images/navigation_btn_faciliter_on.gif);
	width:236px;
	height:27px;
	display:block;
	position:absolute;
	left:739px;
	top:1px;
}

Je ne sais pas si cela pourra vous etre utile afin de m'aider car vous n'êtes pas en possession des images.

Sinon si ca vous convient, auriez vous une solution.

Merci beaucoup

Jul'

Bonjour,

Première chose, optimisons la feuille de styles :

#navigation { 
    position:relative; 
    width:1007px; 
    height:57px; 
    background-image:url(../images/background_navigation.jpg); 
} 
#navigation_proteger a { 
    background-image:url(../images/navigation_btn_proteger_off.gif); 
    width:236px; 
    height:27px; 
    display:block; 
    position:absolute; 
    left:28px; 
    top:15px; 
} 
#navigation_proteger a:hover { 
    background-image:url(../images/navigation_btn_proteger_on.gif); 
    top:1px; 
} 
#navigation_simuler a { 
    background-image:url(../images/navigation_btn_simuler_off.gif); 
    width:236px; 
    height:27px; 
    display:block; 
    position:absolute; 
    left:265px; 
    top:15px; 
} 
#navigation_simuler a:hover { 
    background-image:url(../images/navigation_btn_simuler_on.gif); 
    top:1px; 
} 
#navigation_equiper a { 
    background-image:url(../images/navigation_btn_equiper_off.gif); 
    width:236px; 
    height:27px; 
    display:block; 
    position:absolute; 
    left:502px; 
    top:15px; 
} 
#navigation_equiper a:hover { 
    background-image:url(../images/navigation_btn_equiper_on.gif); 
    top:1px; 
} 
#navigation_faciliter a { 
    background-image:url(../images/navigation_btn_faciliter_off.gif); 
	width:236px; 
    height:27px; 
    display:block; 
    position:absolute; 
    left:739px; 
    top:15px; 
} 
#navigation_faciliter a:hover { 
    background-image:url(../images/navigation_btn_faciliter_on.gif); 
    top:1px; 
} 

Pour le problème de non fonctionnement, il semblerait que les versions 6 et 7 d'IE nécessitent d'avoir une ligne du type :

a:hover {
    border:0px solid transparent;
}

Cela fonctionne.
J'ai copié cette ligne magique, mais je ne comprends pas pourquoi ceci est la solution miracle.

Pourrais tu m'en dire un peu plus ?

Je te remercie beaucoup en tout cas.

Julien

juloxy a écrit :
voici le code HTML

  <div id="navigation">
    <div id="navigation_proteger"><a href="#" title="#"> </a></div>
    <div id="navigation_simuler"><a href="#" title="#"> </a> </div>
    <div id="navigation_equiper"><a href="#" title="#"> </a> </div>
    <div id="navigation_faciliter"><a href="#" title="#"> </a> </div>
  </div>

Si les liens n'étaient pas vides, ce serait mieux, non ?

Bonjour Victor,

C'est la première solution qui m'est passé par la tête mais ça ne fonctionne pas non plus...

Meme avec les liens remplis ca ne marchait pas

Kaaviar a écrit :
Bonjour Victor,

C'est la première solution qui m'est passé par la tête mais ça ne fonctionne pas non plus...

Même si ça ne fonctionne pas, c'est mieux en termes d'accessibilité (il suffit de désactiver les CSS ou les images pour s'en convaincre).

Il va sans dire
Je me suis égaré en me concentrant uniquement sur le fonctionnel.

Salut,

sinon les menus en UL/LI/A c'est bien aussi : cf. Créer des menus simples en CSS.

Kaaviar a écrit :
Première chose, optimisons la feuille de styles

Bien.

Par contre on pouvait optimiser trois fois plus. Factoriser les styles, c'est bien.
(Un indice: le sélecteur #navigation a devrait être utile.)