Disparition d'un calque avec filter:alpha(opacity ...) sous I

Bonjour j'ai un problème très étrange:
j'ai un sous menu que j'ouvre sur un "onMouseOver"
avec des titre en <H3>, des liens en <a> avec un diplay:block
et un lien de fermeture pour le sous menu avec une image
ce lien est volontairement sorti du flot (position:absolute) pour fermé la bas du sous menu avec l'image :
voici la structure du sous menu

  <div class="sous_menu" id="sous_menu_1"> 
	<h3>Titre 1</h3>
	<a href=.....>sous_menu 1</a>
	<a href=.....>sous_menu 2</a>
	<a href=.....>sous_menu 3</a>
	<h3>titre 2 </h3>
	<a href=.....>sous_menu 4</a>
	<a href=.....>sous_menu 5</a>
	<a href=.....>sous_menu 6</a>
	<a href="javascript:fnCloseSousMenu()" class="close_sous_menu"><span>close</span></a> 
  </div>

la feuille de style

div.sous_menu{
		font-size:11px;
		background:transparent url(menu/fond_sous_menu.gif) no-repeat top left;
		width:160px;
		padding-top:5px;
		padding-left:20px;
		z-index:100000;
		overflow:visible;
		height:auto;
}
div.sous_menu a{
		position:relative;
		display: block;
		height:12px;
		color: #666 ;
		text-align: left ;
		text-decoration: none ;
		font-size:11px;
		border:none;
		margin-left:4px;
	}
div.sous_menu h3{
		color: #888 ;
		text-align: left ;
		font-size:11px;
		margin: 5px 0 2px 0;
		font-weight:bold;
		color: black;
	}
div.sous_menu a.close_sous_menu{
	display:block;
	position:absolute;
	bottom:-19px;
	left:0px;
	width:160px;
	height:19px;
	background:transparent url(image.gif) no-repeat top left;
	padding:0;
	margin:0;
}
div.sous_menu a.close_sous_menu span{
	display:none;
}

le prombème, c'est que l'image ou l'on dois cliqué pour fermé le sous menu disparait quand on applique une opacité sour IE:

div.sous_menu{
		font-size:11px;
		background:transparent url(menu/fond_sous_menu.gif) no-repeat top left;
		width:160px;
		padding-top:5px;
		padding-left:20px;
		z-index:100000;
		overflow:visible;
		height:auto;
		filter:alpha(opacity=90);
		-moz-opacity:.90;
		opacity:.90;
}	

Sans l'opacité, limage apparait bien et avec l'opacité elle disparait sous IE alors que tout est bon avec les autres navigateurs (comme c'est étrange)


merci pour votre aide

Amicalement
Modifié par khoudj (26 Feb 2008 - 10:39)

Bonjour,

je ne sais pas si tu as déjà résolu ton problème mais il semblerait d'après ton code que .sous_menu ne soit pas positionné. Il n'y a alors pas de prise en compte de la propriété z-index.
Je te renvoie à la FAQ avec l'article Comment fonctionne la propriété CSS z-index? mais aussi Quel type de positionnement choisir ? (fin du §2)

Reste la surprise due à l'opacité. D'après le lien vers mozilla developer présent dans la FAQ (je n'ai pas vérifié par moi-même), l'opacité déclencherait un contexte d'empilement (voir l'article pour comprendre de quoi il s'agit) et donc la prise en compte de z-index pour cet élément-là. C'est en Note sur cette page et cette page (cherche le mot 'opacité' dans ces pages)

EDIT: pour ce qui est d'IE (6 à l'époque) spécifiquement sur z-index, http://aplus.co.yu/lab/z-pos/ et http://weblogs.mozillazine.org/hyatt/archives/2004_09.html expliquent les "écarts" aux standards

edit: subjonctif :o
Modifié par Felipe (23 Feb 2008 - 15:14)

Hello
merci pour ta réponse, j'avais pas pensé à ça mais ce n'est pas ca le probleme
je te donne le lien sur le site pour que tu vois le problème
c'est le bas des sous menu, il y a un onglet jaune annimé pour fermer le sous menu
www.grafikpub.com
la feuille de style :
www.grafikpub.com/style.css
ca marche Pour FF, Opéra et Netscape pas pour Ie 6

Amicalement - khoudj
Modifié par khoudj (26 Feb 2008 - 10:48)