Problèmes de z-index dans Firefox

Bonjour!

Dans mon site, j'ai utilisé le concept des menus déroulants des tutoriels sur ce site pour faire apparaître des "pop-up" sur une liste d'items. Bref, j'ai une liste de vidéos et lorsque tu "hover" sur un item de la liste, une fiche descriptive apparaît.

Dans IE, tout baigne (anormal non?) mais dans Firefox, la fiche descriptive va se placer sous la colone de droite malgré que le z-index de la fiche soit de 100...

Bon, je ne suis pas certain pourquoi, mais c'est ce qui arrive! J'ai fouillé et je n'ai pas trouvé d'information sur un bug possible de z-index dans firefox, ou d'une syntaxe alternative... Je suis relativement nouveau dans le domaine et je tente d'apprendre en même temps!

Voici quelques bribes de code pour vous aider, il se peut que ce soit un vrai bordel...!

Premièrement, dans le head:

code java,

<script type="text/javascript">
<!--
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
	for (var i = 1; i<=10; i++) {
		if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
	}
if (d) {d.style.display='block';}
}
//-->
</script>

Puis CSS:

#cc-col1-balades {
margin-top: 3px;
width: 390px;
padding: 5px;
border: 1px solid white;
background-color: #FFFFFF;
filter: alpha(opacity=80);  
-moz-opacity: 0.80;
opacity: 0.80;
}
				
#menu {
margin: 0;
padding: 0;
}
				
#menu dt {
cursor: pointer;
background: transparent;
height: 20px;
width: 150px;
line-height: 20px;
margin: 2px 0;
border: 0px;
text-align: left;
}
				
#menu dd {
position: absolute;
z-index: 100;
left: 100px;
width: 320px;
margin-top: 2px;
padding-top: 2px;
background-color: #FFFFFF;
}
				
#menu ul {
padding: 2px;
}
				
#menu li {
text-align: center;
font-size: 85%;
height: 18px;
line-height: 18px;
}
				
#menu li a, #menu dt a {
color: #000;
text-decoration: none;
display: block;
}
				
#menu li a:hover {
text-decoration: underline;
}			
			
#cc-col2 {
width: 362px;
vertical-align: top;
}

#cc-col2_content {
width: 320px;
float: right;
margin-top: 2px;
padding-top: 2px;
background-color: #FFFFFF;
filter: alpha(opacity=80);  
-moz-opacity: 0.80;
opacity: 0.80;
}

#cc-col2_content-image {
height: 220px;
padding-top: 25px;
padding-left: 10px;
padding-right: 5px;
text-align: left;
background-image: url(images/collection_phare.jpg);
background-repeat: no-repeat;				
}
			
#cc-col2_content-texte {
padding: 10px;
padding-bottom: 20px;
text-align: justify;
}

Puis dans le body:

<div id="cc-col1-balades">
	<h3>Cantons-de-l’Est</h3>
	<h2>Coaticook</h2>
	<dl id="menu">
	<dt onmouseover="javascript:montre('smenu1');"><p>Gorge
	<img src="images/icone_pied_petit.jpg" alt="à pied" width="20" height="17" class="image"/></p></dt>
	<dd id="smenu1" onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre();">
	<ul>
	<div id="cc-col2_content-image">
		<h3>À découvrir : Le phare hanté</h3>
	</div>
	<div id="cc-col2_content-texte">
	<h2>Ville : Dusty Hallow<br>						
	Nom de la balade : La isla de la muerte<br>
	Nom du lieu et sujet : Le phare hanté<br></h2>
	<h4><br>
	Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed eget tellus ac arcu hendrerit egestas. Phasellus egestas sapien eget dui. Quisque at sem. Aenean facilisis posuere ante. Phasellus quam. Nam magna. Nam interdum, est vitae viverra posuere, enim erat pulvinar magna, sed viverra libero dui vitae arcu. Proin sagittis lorem consectetuer est molestie congue. Maecenas quis urna. Curabitur rutrum, augue sed pellentesque mattis, felis ipsum molestie nisl, ac fringilla dui velit nonummy orci. Sed id lectus eget tortor posuere vehicula. Suspendisse lacus nisl, congue in, iaculis id, congue ut, lorem. Etiam sit amet quam id nunc consequat varius. Ut condimentum. Sed posuere arcu a lacus posuere suscipit. In pellentesque sodales magna. Pellentesque pharetra malesuada justo. Cras hendrerit, sem in pulvinar vulputate, ligula ipsum tempor nisi, ac fringilla massa eros nec mauris. Praesent mauris.</h4>
	</div>
	</ul>
	</dd>
	</dl>		
	<dl id="menu">
	<dt onmouseover="javascript:montre('smenu2');"><p>Centre-ville 
	<img src="images/icone_pied_petit.jpg" alt="à pied" width="20" height="17" class="image"/>
	<img src="images/icone_auto_petit.jpg" alt="en auto" width="20" height="17" class="image"/></p></dt>
	<dd id="smenu2" onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre();">
	<ul>
	<div id="cc-col2_content-image">
	<h3>Blah</h3>
	</div>
	<div id="cc-col2_content-texte">
	<h2>Ville : Dusty Hallow<br>						
	Nom de la balade : La isla de la muerte<br>
	Nom du lieu et sujet : Le phare hanté<br></h2>
	<h4><br>
	Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed eget tellus ac arcu hendrerit egestas. Phasellus egestas sapien eget dui. Quisque at sem. Aenean facilisis posuere ante. Phasellus quam. Nam magna. Nam interdum, est vitae viverra posuere, enim erat pulvinar magna, sed viverra libero dui vitae arcu. Proin sagittis lorem consectetuer est molestie congue. Maecenas quis urna. Curabitur rutrum, augue sed pellentesque mattis, felis ipsum molestie nisl, ac fringilla dui velit nonummy orci. Sed id lectus eget tortor posuere vehicula. Suspendisse lacus nisl, congue in, iaculis id, congue ut, lorem. Etiam sit amet quam id nunc consequat varius. Ut condimentum. Sed posuere arcu a lacus posuere suscipit. In pellentesque sodales magna. Pellentesque pharetra malesuada justo. Cras hendrerit, sem in pulvinar vulputate, ligula ipsum tempor nisi, ac fringilla massa eros nec mauris. Praesent mauris.</h4>
	</div>
	</ul>
	</dd>
	</dt>
	</dl>
</div>

<td id="cc-col2">
	
	<div id="cc-col2_content">
	<div id="cc-col2_content-image">
	<h3>À découvrir : Le phare hanté</h3>
	</div>
	<div id="cc-col2_content-texte">
	<h2>Ville : Dusty Hallow<br>						
	Nom de la balade : La isla de la muerte<br>
	Nom du lieu et sujet : Le phare hanté<br></h2>
	<h4><br>
	Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed eget tellus ac arcu hendrerit egestas. Phasellus egestas sapien eget dui. Quisque at sem. Aenean facilisis posuere ante. Phasellus quam. Nam magna. Nam interdum, est vitae viverra posuere, enim erat pulvinar magna, sed viverra libero dui vitae arcu. Proin sagittis lorem consectetuer est molestie congue. Maecenas quis urna. Curabitur rutrum, augue sed pellentesque mattis, felis ipsum molestie nisl, ac fringilla dui velit nonummy orci. Sed id lectus eget tortor posuere vehicula. Suspendisse lacus nisl, congue in, iaculis id, congue ut, lorem. Etiam sit amet quam id nunc consequat varius. Ut condimentum. Sed posuere arcu a lacus posuere suscipit. In pellentesque sodales magna. Pellentesque pharetra malesuada justo. Cras hendrerit, sem in pulvinar vulputate, ligula ipsum tempor nisi, ac fringilla massa eros nec mauris. Praesent mauris.</h4>
	</div>
	

Modifié par bernjean (15 Aug 2007 - 16:56)

Aussi, s'il y a des moyens moins compliqués pour atteindre le même effet (de la fenêtre "pop-up") que de traffiquer un menu déroulant, je vous écoute!

Merci beaucoup.