[CSS][IE >= 5.5] Transparence non voulue !
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:
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:
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> |
