par
Stef » 26 déc. 2008, 18:04
Hellohooo
je m'en viens quérir la sagesse et la savoir auprès des illuminés des css!
J'ai un menu (sans js!) type dropdown qui réagit normalement dans FF, Opera, Safari, mais pas dans IE(8) où le sub menu passe en dessous des autres éléments, alors qu'il devrait être par dessus...
Comme un dessin peut être plus explicite qu'un long paragraphe voici une capture:
Voici la partie css:
Code : Tout sélectionner
/* MENU */
ul#navigation-1 {
margin: 0;
padding: 1px 0;
list-style: none;
width: 100%;
height: 21px;
border-top: 1px solid #6e98c2;
border-bottom: 1px solid #6e98c2;
font: normal 8pt verdana, arial, helvetica;
text-align: center;
}
ul#navigation-1 li {
margin: 0;
padding: 0;
display: block;
float: left;
position: relative;
width: 148px;
}
ul#navigation-1 li a:link, ul#navigation-1 li a:visited {
padding: 4px 0;
display: block;
text-align: center;
text-decoration: none;
background-color: #6e98c2;
color: #ffffff;
width: 148px;
height: 13px;
}
ul#navigation-1 li:hover a, ul#navigation-1 li a:hover, ul#navigation-1 li a:active {
padding: 4px 0;
display: block;
text-align: center;
text-decoration: none;
background-color: #90c4f2;
color: #ffffff;
width: 146px;
height: 13px;
border-left: 1px solid #ffffff;
border-right: 1px solid #ffffff;
}
ul#navigation-1 li ul.navigation-2 {
margin: 0;
padding: 1px 1px 0;
list-style: none;
display: none;
background-color: #ffffff;
width: 146px;
position: absolute;
top: 21px;
left: -1px;
border: 1px solid #6e98c2;
border-top: none;
}
ul#navigation-1 li:hover ul.navigation-2 {
display: block;
}
ul#navigation-1 li ul.navigation-2 li {
width: 146px;
clear: left;
width: 146px;
}
ul#navigation-1 li ul.navigation-2 li a:link, ul#navigation-1 li ul.navigation-2 li a:visited {
clear: left;
background-color: #6e98c2;
padding: 4px 0;
width: 146px;
border: none;
border-bottom: 1px solid #ffffff;
position: relative;
z-index: 1000;
}
ul#navigation-1 li ul.navigation-2 li:hover a, ul#navigation-1 li ul.navigation-2 li a:active,
ul#navigation-1 li ul.navigation-2 li a:hover {
clear: left;
background-color: #90c4f2;
padding: 4px 0;
width: 146px;
border: none;
border-bottom: 1px solid #ffffff;
position: relative;
z-index: 1000;
}
ul#navigation-1 li ul.navigation-2 li ul.navigation-3 {
display: none;
margin: 0;
padding: 0;
list-style: none;
position: absolute;
left: 145px;
top: -2px;
padding: 1px 1px 0 1px;
border: 1px solid #6e98c2;
border-left: 1px solid #6e98c2;
background-color: #ffffff;
z-index: 900;
}
ul#navigation-1 li ul.navigation-2 li:hover ul.navigation-3 {
display: block;
}
ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li a:link, ul#navigation-1 li ul.navigation-2 li
ul.navigation-3 li a:visited {
background-color: #90c4f2;
}
ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li:hover a, ul#navigation-1 li ul.navigation-2 li
ul.navigation-3 li a:hover, ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li a:active {
background-color: #90c4f2;
}
ul#navigation-1 li ul.navigation-2 li a span {
position: absolute;
top: 0;
left: 132px;
font-size: 12pt;
color: #90c4f2;
}
ul#navigation-1 li ul.navigation-2 li:hover a span, ul#navigation-1 li ul.navigation-2 li a:hover span {
position: absolute;
top: 0;
left: 132px;
font-size: 12pt;
color: #ffffff;
}
/* Fin Menu */
Je m'interroge, les bras ballants, le regard vide...

Comment rectifier ça?
Hellohooo
je m'en viens quérir la sagesse et la savoir auprès des illuminés des css! :D
J'ai un menu (sans js!) type dropdown qui réagit normalement dans FF, Opera, Safari, mais pas dans IE(8) où le sub menu passe en dessous des autres éléments, alors qu'il devrait être par dessus...
Comme un dessin peut être plus explicite qu'un long paragraphe voici une capture:
[img]http://img4.hostingpics.net/pics/237840Sans_titre_1.png[/img]
Voici la partie css:
[code]/* MENU */
ul#navigation-1 {
margin: 0;
padding: 1px 0;
list-style: none;
width: 100%;
height: 21px;
border-top: 1px solid #6e98c2;
border-bottom: 1px solid #6e98c2;
font: normal 8pt verdana, arial, helvetica;
text-align: center;
}
ul#navigation-1 li {
margin: 0;
padding: 0;
display: block;
float: left;
position: relative;
width: 148px;
}
ul#navigation-1 li a:link, ul#navigation-1 li a:visited {
padding: 4px 0;
display: block;
text-align: center;
text-decoration: none;
background-color: #6e98c2;
color: #ffffff;
width: 148px;
height: 13px;
}
ul#navigation-1 li:hover a, ul#navigation-1 li a:hover, ul#navigation-1 li a:active {
padding: 4px 0;
display: block;
text-align: center;
text-decoration: none;
background-color: #90c4f2;
color: #ffffff;
width: 146px;
height: 13px;
border-left: 1px solid #ffffff;
border-right: 1px solid #ffffff;
}
ul#navigation-1 li ul.navigation-2 {
margin: 0;
padding: 1px 1px 0;
list-style: none;
display: none;
background-color: #ffffff;
width: 146px;
position: absolute;
top: 21px;
left: -1px;
border: 1px solid #6e98c2;
border-top: none;
}
ul#navigation-1 li:hover ul.navigation-2 {
display: block;
}
ul#navigation-1 li ul.navigation-2 li {
width: 146px;
clear: left;
width: 146px;
}
ul#navigation-1 li ul.navigation-2 li a:link, ul#navigation-1 li ul.navigation-2 li a:visited {
clear: left;
background-color: #6e98c2;
padding: 4px 0;
width: 146px;
border: none;
border-bottom: 1px solid #ffffff;
position: relative;
z-index: 1000;
}
ul#navigation-1 li ul.navigation-2 li:hover a, ul#navigation-1 li ul.navigation-2 li a:active,
ul#navigation-1 li ul.navigation-2 li a:hover {
clear: left;
background-color: #90c4f2;
padding: 4px 0;
width: 146px;
border: none;
border-bottom: 1px solid #ffffff;
position: relative;
z-index: 1000;
}
ul#navigation-1 li ul.navigation-2 li ul.navigation-3 {
display: none;
margin: 0;
padding: 0;
list-style: none;
position: absolute;
left: 145px;
top: -2px;
padding: 1px 1px 0 1px;
border: 1px solid #6e98c2;
border-left: 1px solid #6e98c2;
background-color: #ffffff;
z-index: 900;
}
ul#navigation-1 li ul.navigation-2 li:hover ul.navigation-3 {
display: block;
}
ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li a:link, ul#navigation-1 li ul.navigation-2 li
ul.navigation-3 li a:visited {
background-color: #90c4f2;
}
ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li:hover a, ul#navigation-1 li ul.navigation-2 li
ul.navigation-3 li a:hover, ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li a:active {
background-color: #90c4f2;
}
ul#navigation-1 li ul.navigation-2 li a span {
position: absolute;
top: 0;
left: 132px;
font-size: 12pt;
color: #90c4f2;
}
ul#navigation-1 li ul.navigation-2 li:hover a span, ul#navigation-1 li ul.navigation-2 li a:hover span {
position: absolute;
top: 0;
left: 132px;
font-size: 12pt;
color: #ffffff;
}
/* Fin Menu */[/code]
Je m'interroge, les bras ballants, le regard vide... :D Comment rectifier ça?