[CSS][IE >= 5.5] Transparence non voulue !

**pimousse76** · 12/05/2005, 10h38

Bonjour,

Vous trouverez le code à la fin de ce message.

J'ai un pble avec IE : il m'affiche en transparence une zone qui devrait être sur un fond blanc opaque.

Je m'explique.

J'ai un menu composé de listes imbriquées sur 2 niveaux, par ex :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
<ul>    
    <li><a href="./accueil.htm" target="_new">Accueil</a>
    <ul>
        <li><a href="./index.htm" target="_new">Essai</a></li>
        <li><a href="./header.htm" target="_new">2</a></li>
    </ul>
    </li>
    <li><a href="./accueil.htm" target="_new">Lien</a></li>
    <li><a href="./a3.htm" target="_new">a3</a></li>
    <li><a href="./accueil.htm" target="_new">test</a>
    <ul>
        <li><a href="./index.htm" target="_new">lien</a></li>
        <li><a href="./header.htm" target="_new">ancre</a></li>
    </ul>
    </li>
</ul>

Le premier niveau s'affiche sur une colonne, sur fond blanc avec un a:hover rouge pale.
Lorsque que l'on survole une puce qui possède une sous-liste, cette seconde liste s'affiche à la droite de la première, toujours sur fond blanc avec un a:hover rouge pale.

Sous firefox, ça fonctionne bien.
Le pble est que sous ie, le fond blanc de cette seconde liste n'est pas opaque, mais transparent. (ie je vois le texte du reste de la page par dessous). ce qui est relou.

Plutôt que de longs discours ou d'explications foireuses, je mets ci dessous un peu de code. Dans cet exemple, je voudrais donc que le texte "TEST PROFIL avec menu" soit caché par le second menu (lorsqu'il est actif).

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
 
<html>
<head>
<meta http-equiv="content-type" CONTENT="text/html; charset=UTF-8">
<meta http-equiv="content-language" CONTENT="fr">
<script type="text/javascript">
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>
<style>
#gauche {
	position: absolute;
	margin: 0 0 0 20px;
}
 
#gauche ul, #gauche li {
	margin: 0;
	padding: 0;
	list-style-type: none;
	}
 
#gauche li {
	height: 18px;
	width: 140px;
}
 
#gauche li a { 
	display: block;
	color: #aaa;
	background: #fff;
	font: 11px Arial;
	font-weight: bold;
	text-decoration: none;
	padding: 2px 0px 2px 0px;
	text-align: left;
	border-top: 1px solid #D4D4D4;
}
 
#gauche a:hover {
	color: #DD0426;
	background: #FFEFEF;
}
 
#sgauche ul {
	position: absolute;
	margin: -19px 0 0 140px;
	z-index: 100;
	width: 140px;
}
 
#centre {
	position: absolute;
	left: 185px;
}
</style>
<script language="javascript" src="../js/menu_vertical.js"></script>
</head>
<body onload="montre()">
 
<div id="gauche">
	<ul>
		<div id="sgauche">
			<li onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre();"><a href="./accueil.htm" target="_new">Profil</a>
				<ul id="smenu1" onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre();">
					<li><a href="./contenu.htm">Résumé</a></li>
					<li><a href="./contenu.htm">Modification</a></li>
				</ul>
			</li>
			<li onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre();"><a href="./accueil.htm" target="_new">Projets</a>
				<ul id="smenu2" onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre();">
					<li><a href="./contenu.htm">Liste</a></li>
					<li><a href="./contenu.htm">Ajout</a></li>
					<li><a href="./contenu.htm">Modification</a></li>
					<li><a href="./contenu.htm">Suppression</a></li>
				</ul>
			</li>
			<li><a href="./projet.htm" target="contenu">SQUAL</a></li>
			<li><a href="./projet.htm" target="contenu">JRAF</a></li>
			<li><a href="./projet.htm" target="contenu">Socle Vol</a></li>
			<li><a href="./projet.htm" target="contenu">HABIL</a></li>
		</div>
	</ul>
</div>
 
<div id="centre">
 
	TEST PROFIL avec menu
 
</div>
 
</body>
</html>

**Kerod** · 12/05/2005, 11h33

C'est pas un problème de css mais plutot un problème de chevauchement des calques. essayes de voir ca avec les z-index

**pimousse76** · 12/05/2005, 11h42

Envoyé par Kerod

C'est pas un problème de css mais plutot un problème de chevauchement des calques. essayes de voir ca avec les z-index

j'ai mis ça :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
#sgauche ul {
   position: absolute;
   margin: -19px 0 0 140px;
   z-index: 100; /* <--------------- */
   width: 140px;
}

faut-il que je mette un z-index sur un autre style ?

**Kerod** · 12/05/2005, 12h56

Testes et tu verras bien

Sinon si tu as toujours du mal tu trouveras un bon exemple sur ce site

**pimousse76** · 12/05/2005, 16h06

j'ai résolu le pble. il s'agissait bien d'un pble de z-index.
en fait, IE ne doit pas considérer le tag body comme le parent des balises div, à contrario de firefox.

il suffit d'ajouter au css :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
body{
	z-index: 10;	
}

et de modifier :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
 
#gauche {
	position: absolute;
	margin: 0 0 0 20px;
	z-index: 12;
}
#centre {
	position: absolute;
	left: 185px;
	z-index: 11;
}

bien sur, les valeurs de z-index sont à choisir comme il sied à votre site ouaibe

@++

[CSS][IE >= 5.5] Transparence non voulue !

CSS

Discussions similaires

Partager

Partager