Z-index entre IE et Firefox

Bonjour à tous

Je rencontre un petit soucis avec la propriété z-index. Son comportement diffère entre IE7 et Firefox. Sous Firefox, ça fonctionne normalement, mais sous IE7, le bloc disparait. Je voudrais que le sous-menu passe au dessus de la zone de l'article.

Je sais qu'il faut positionner l'élément (<div>), mais sous IE7, ce bloc disparait carrément, dès qu'il reçoit position: absolute ou bien position: relative.

J'espère que vous pourrez m'aider

En tout cas, merci par avance

Bonjour Tycho et bienvenue ,

Etant en panne de boule de cristal aujourd'hui et madame Irma étant partie en vacances, un bout de code ou une page en ligne seraient les bienvenues pour essayer de visualiser un peu le probléme .
Modifié par knarf (16 Apr 2009 - 17:56)

Effectivement, je pense que ça peut aider

Voici donc l'HTML que j'ai pu faire

<div id="navigation">
	<ul>
		<li><a href="#" id="accueil" class="active"></a></li>
		<li><a href="#" id="cv"></a></li>
		<li><a href="#" id="real" onmouseover="javascript:show('ssmenu')" onmouseout="javascript:hide('ssmenu')"></a>
			<ul id="ssmenu" style="display: none;" onmouseover="javascript:show('ssmenu')" onmouseout="javascript:hide('ssmenu')">
				<li><a href="#">Cat1</a></li>
				<li><a href="#">Cat2</a></li>
				<li><a href="#">Cat3</a></li>
				<li><a href="#">Cat4</a></li>
			</ul>
		</li>
		<li><a href="#" id="contact"></a></li>
		<li><a href="#" id="liens"></a></li>
	</ul>
</div>

Et voici la partie de la CSS qui va avec. Tout de suite, je m'excuse pour le bazar que cela peut être :

#navigation { height: 37px; background: #3F4C6B; margin-bottom: 20px; }

#navigation ul{ margin: 0 0 0 0; } 

#navigation li{ float:left; }

#navigation LI A#accueil { display: block; width: 120px; height: 37px; background: url(../imgs/menu/bg-navigation-index.gif) top left no-repeat; } 

#navigation LI A#accueil:hover, #navigation LI A#accueil.active { display: block; width: 120px; height: 37px; background: url(../imgs/menu/bg-navigation-index-hover.gif) top left no-repeat; } 

#navigation LI A#cv { display: block; width: 120px; height: 37px; background: url(../imgs/menu/bg-navigation-cv.gif) top left no-repeat; } 

#navigation LI A#cv:hover, #navigation LI A#cv.active { display: block; width: 120px; height: 37px; background: url(../imgs/menu/bg-navigation-cv-hover.gif) top left no-repeat; } 

#navigation LI A#real { display: block; width: 120px; height: 37px; background: url(../imgs/menu/bg-navigation-rea.gif) top left no-repeat; } 

#navigation LI A#real:hover, #navigation LI A#real.active { display: block; width: 120px; height: 37px; background: url(../imgs/menu/bg-navigation-rea-hover.gif) top left no-repeat; } 

#navigation LI A#contact { display: block; width: 120px; height: 37px; background: url(../imgs/menu/bg-navigation-contact.gif) top left no-repeat; }

#navigation LI A#contact:hover, #navigation LI A#contact.active { display: block; width: 120px; height: 37px; background: url(../imgs/menu/bg-navigation-contact-hover.gif) top left no-repeat; }

#navigation LI A#liens { display: block; width: 120px; height: 37px; background: url(../imgs/menu/bg-navigation-liens.gif) top left no-repeat; } 

#navigation LI A#liens:hover, #navigation LI A#liens.active { display: block; width: 120px; height: 37px; background: url(../imgs/menu/bg-navigation-liens-hover.gif) top left no-repeat; } 

#ssmenu LI { float: none; height: 37px; width: 120px; background: #3F4C6B; text-align: center; }

#ssmenu LI A { color: #FFF !important; display: block; height: 25px; width: 120px; padding-top: 12px; }

#ssmenu LI A:hover { background: #6275A2; }

Sous Firefox, ça fonctionne normalement, mais sous IE7, le bloc disparait. Je voudrais que le sous-menu passe au dessus de la zone de l'article.

Encore merci pour votre aide