Menu dans une div qui passe sous une autre div

Bonjour,

Je viens faire appel à vos conseils car j'ai un piti soucis sous ie avec mon menu

C'est une à bulle qui apparait quand je passe sur les liens et sui disparait ensuite.

le probème c'est que sous ie cette bulle passe en dessous de mon élément dessous

http://img401.imageshack.us/img401/3474/sanstitredi8.jpg - http://img524.imageshack.us/img524/3990/sanstitre2hg5.jpg


Code du menu haut :

<div id="menu-haut">
	[...]
	
	
	<div id="bulle-menu-haut-metier" style="display:block; position:absolute; top:-28px; left:132px; width:160px; font-size:12px; line-height:12px; font-family:Arial, Helvetica, sans-serif; margin:0; z-index:100;" onmouseout='cache_bulle_menu_haut("metier",event);'>
		<div id="bulle-menu-haut-metier-haut" style="margin:0; padding-top:5px; height:17px; background-image:url(<?php echo get_root_site(); ?>/images/bulle/bulle_haut.png); text-align:center; font-weight:bold; color:#007D5B; font-family:Arial, Helvetica, sans-serif; font-size:12px">Nos Métiers</div>
		<div id="bulle-menu-haut-metier-fond" style="background-image:url(<?php echo get_root_site(); ?>/images/bulle/bulle_fond.png); margin-top:0px; padding-left:5px; padding-right:10px; color:#000000; text-align:left">
			
			(contenu de la bulle)		
			
		</div>
		<div id="bulle-menu-haut-metier-bas" style="margin:0; height:23px;"><img src="<?php echo get_root_site(); ?>/images/bulle/bulle_bas.png" id="bulle-menu-haut-metier-bas2"></div>
		<div id="bulle-menu-haut-metier-fleche" style="position:absolute; top:28px; right:0px; z-index:1;"><img src="<?php echo get_root_site(); ?>/images/bulle/bulle_fleche.png" id="bulle-menu-haut-metier-fleche2" /></div>
	</div>

</div>

Et ensuite j'ai ma div en dessous qui passe par dessus ma bulle sous ie :

http://img211.imageshack.us/img211/2482/bullegrandevertehauttv9.gif
l'image est en backroud

voici le code

<div id="bulle-grande-verte" style="position:absolute; left:68px; top:10px">
	<div id="bulle-grande-verte-haut">Nos Offres</div>
	<div id="bulle-grande-verte-fond">&nbsp;</div>
	<div id="bulle-grande-verte-bas"></div>
	<div style="position:absolute; top:42px; left:16px; font-family:Arial, Helvetica, sans-serif; font-size:12px; font-weight:bold">
		contenu
	</div>
</div>

div#bulle-grande-verte{
	width:587px;
}

div#bulle-grande-verte-haut{
	background-image:url(../images/bulle_grande_verte_haut.gif);
	background-repeat:no-repeat;
	width:240px;
	height:49px;
	font-size:21px;
	line-height:46px; 
	color:#FFFFFF; 
	padding-left:447px; 
	text-align:left;
	letter-spacing:1.1px;
	font-family:Arial, Helvetica, sans-serif;
	font-weight:bold;
}

div#bulle-grande-verte-fond{
	background-image:url(../images/bulle_grande_verte_fond.gif);
	background-repeat:repeat-y;
	width:567px;
	padding-left:20px;
}

div#bulle-grande-verte-bas{
	background-image:url(../images/bulle_grande_verte_bas.gif);
	background-repeat:no-repeat;
	width:587px;
	height:29px;
}

et c'est pareil même si c'est pas une image qu'il y a en dessous :

http://img522.imageshack.us/img522/7371/sanstitre3fq0.jpg


j'ai essayé avec les z-index mais la bulle passe toujours dessous sous ie

qqun sait pourquoi ?
Modifié par Kistou (29 Aug 2007 - 09:50)

Tu dois mettre ton div du fond 'bas' en position absolute aussi

par contre j'ai trouvé une solution

au lieu d'avoir

<div conteneur>

   <div menu haut>
       <div bulle>
       </div bulle>
   <div menu haut>

   <div vente>
   </div vente>

</div conteneur>

j'ai mis le code de ma bulle après la div vente

<div conteneur>

   <div menu haut>
   <div menu haut>

   <div vente>
   </div vente>

   <div bulle>
   </div bulle>

</div conteneur>

et ça marche

par conter maintenant elle sont positionnées par rapport à ma div conteneur donc moins pratique (avant elles étaient positionnées à l'intérieur de la div menu haut)

donc si qqun sait pourquoi ça marche quand le code est dessous merci de me le dire !!!