bug IE6 comportement hover
Bonjour,
Voici un petit exemple du bug que j'ai sous IE6.
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 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style>
div, span, p, a, img, form, h1, h2, h3, h4, h5, h6 {
border: 0em;
padding: 0em;
margin: 0em;
}
a {
color: #014F61; /* couleur des liens par defaut */
text-decoration: none; /* non souligne par defaut */
}
a:hover {
text-decoration: underline; /* souligne lors du survol */
}
a:visited {
color: #990000;
}
#menuDroite {
width: 8em;
font-size: 1.2em;
}
#menuDroite a, #menuDroite a:visited {
color: #000000;
}
#menuDroite select#vousEtes {
width: 15em;
}
#menuDroite li.titre1 {
margin: 0em;
padding: 0.8em 0 0.4em 1.2em; /* 12px 0 6px 19px */
font-weight: bold;
background-image: url("../images/filet-simple.gif");
background-position: left;
background-repeat: repeat-y;
color: #57565B;
font-size: 1em;
}
#menuDroite li.titre2 {
margin: 0em;
padding: 1em 0 0 1.2em;
font-weight: bold;
background-image: url("../images/filet-simple-turquoise.gif");
background-position: left;
background-color: #B4E1E7;
background-repeat: repeat-y;
font-size: 1em;
}
#menuDroite li.titre3 {
margin: 0em;
padding: 1em 0 0 1.2em;
font-weight: bold;
background-image: url("../images/filet-simple-bleu-clair.gif");
background-position: left;
background-color: #99B9C0;
background-repeat: repeat-y;
font-size: 1em;
}
#menuDroite li.texte {
margin: 0em;
padding: 0 0 1.5em 2.8em; /* 0 0 19px 19px */
font-size: 0.8em;
background-image: url("../images/filet-simple.gif");
background-position: left;
background-repeat: repeat-y;
}
#menuDroite ul {
margin: 0em;
padding: 0;
list-style: none;
background-image: url("../images/filet-simple.gif");
background-position: left;
background-repeat: repeat-y;
}
#menuDroite li {
margin: 0em;
padding: 0;
list-style: none;
font-size: 0.81em; /* 13px */
}
#menuDroite label {
font-size: 1em;
}
#menuDroite ul li ul {
background-color: #FFFFFF;
margin-left: -1.2em;
font-weight: normal;
padding: 0.4em 0 0.4em 2.3em;
}
#menuDroite ul li ul li {
line-height: 1em;
padding: 0.4em 0 0.4em 0;
}
#menuDroite ul li ul.smenuDroite {
margin: 0em;
padding: 0em;
background: none;
}
#menuDroite ul li ul.smenuDroite li {
margin: 0em;
padding: 0.5em 0 0 2.2em; /* 6px 0 0 15px */
font-size: 1em; /* 11px */
}
</style>
</head>
<body>
<div id="menuDroite">
<ul>
<li class="titre1"><span class="fondBlanc">titre1</span></li>
<li class="texte">
fhj
</li>
<li class="titre2">titre 2
<ul>
<li><a href="#">Blablablab ss aazza z'azza</a></li>
<li><a href="#">Eeeeeee ee E.E.E</a>
<div id="sMenu4">
<ul class="smenuDroite">
<li class="fondBlanc"><a href="#">Aaaaa a aaaaaaaa</a></li>
<li class="fondBlanc"><a href="#">Cccccccccccc cccccccccc</a></li>
<li class="fondBlanc"><a href="#">Mmmmmm mmmm mm mmmm mmmmmmm</a></li>
<li class="fondBlanc"><a href="#">Lll lllllll ll lllllllll llll lllllll</a></li>
<li class="fondBlanc"><a href="#">Rr rrrrrrrrr R.R. rr R'rrrrrr rr r'rrr</a></li>
</ul>
</div>
</li>
<li><a href="#">Mmmmmm mmmmmmmm</a></li>
<li><a href="#">Dddddddddddd</a></li>
<li><a href="#">Ddddddddddddd</a>
<div id="sMenu5">
<ul class="smenuDroite">
<li class="fondBlanc"><a href="#">Pppppppppf dsfp pppppsdf</a></li>
<li class="fondBlanc"><a href="#">Fffff fdsyirzls</a></li>
</ul>
</div>
</li>
</ul>
</li>
</ul>
</div>
</body>
</html> |
Ne faites pas attention si le code est pourri.
Lors du survol des rubriques du menu, la dernière sous rubrique disparait lors du survol (bug d'affichage). Est ce qu'on peut corriger ceci ?
merci