Bonjour
J'ai un menu qui marche avec Mozilla mais pas IE.
Pourriez vous analyser?
merci
la communauté d'entraide francophone dédiée au PHP
Menu ne marche pas avec IE
j'ai créé un fichier .Zip mais le système refuse de l'attacher à mon message.
--------------------------le menu menu.php-------------
<?php
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- saved from url=(0075)http://en.parisinfo.com/show-exhibition ... -attourath -->
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" media="all" href="mstyle.css">
</head>
<body>
<div id="menu" class="bright">
<div class="fond_alpha"> </div>
<ul id="main_menu_top" class="">
<li class="level1 enter_0 color_liste">
<a href="pageChercher.php?idVille=0&idInstrument=0&typeMembre=tout" title="Discographie" class="level1 ">Vous cherchez ?</a><div class="menu_level_2">
<span class="shadow">
<ul class="menu_level_2">
<li class="level2 first">
<a href="chercherMembre.php?idVille=0&idInstrument=0&typeMembre=tout">Tous les artistes</a></li><li class="level2 ">
<a href="aaaaaaaaaa">choix 1?</a></li><li class="level2 ">
<a href="aaaaaaaaaa">choix 2?</a></li><li class="level2 ">
<a href="aaaaaaaaaa">choix 3?</a></li><li class="level2 ">
<a href="aaaaaaaaaa">choix 4?</a>
</li>
</ul>
</span>
</div>
</span>
--------------------style.css----------------
/* -- MAIN -- */
ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,blockquote,fieldset,input,button,strong {
margin: 0;
padding: 0;
color:#d1ac2e;
}
h2 {
letter-spacing:-0.2em;
}
a img,
:link img,
:visited img {
border: 0 none;
}
a {
text-decoration: none;
color: #800000;
}
/* couleur du menu*/
.bright .fond_alpha {
position: absolute;
top: 155px;
width: 990px;
height: 30px;
background-color: #800000;
filter:alpha(opacity=90);
-moz-opacity: 0.90;
opacity: 0.90;
}
.bright #main_menu_top {
position: absolute;
top: 155px;
width: 999px;
height: 22px;
z-index: 120;
padding-left: 299px;
}
.bright #main_menu_top li.level1 {
/*width: auto;*/
float: left;
display: block;
font-weight: bold;
text-align: left;
padding: 0;
}
#receiver_main_menu
{
display: none;
}
/* liste à gauche pour le Français*/
#menu li
{
font-family:Arial,Verdana,sans-serif;
font-weight:bold;
padding:0;
margin:0;
text-align:righ;
font-size:15px;
}
#menu li a
{
height: 100%;
}
#menu .level1 a
{
/*border-right:1px solid #d50000;*/
display: block;
display: inline-block !important;
*display: inline-block;
padding:3px 6px 2px 10px;
}
#menu .level1 a.level1
{
height:30px;
_height:30px;
padding-right: 10px;
*padding-right: 5px;
}
#menu li.level1
{
height: 30px;
*height: auto;
_height: 35px;
_overflow: hidden;
/*width:100px;*/
}
#menu li.level1.last
{
width:111px;
}
#menu li.level1.sfhover a,
#menu li.level1:hover a,
{
text-decoration:none;
}
#menu div.menu_level_2 ul
{
min-width:55px;
position: absolute;
top:0px;
left:-10px;
padding:0 5px 5px 0;
_background:none;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/dropshadow.png', sizingMethod='scale');
_padding:0 3px 3px 0;
}
#menu .last div.menu_level_2 ul
{
min-width:111px;
}
#menu div.menu_level_2
{
left: -999em;
cursor: hand;
_top: -6px;
white-space: nowrap;
/* direction: rtl;*/
display: none;
}
#menu div.menu_level_2
{
position: relative;
z-index: 20;
}
#menu li.level2
{
border-top:2px solid #ea0000;
list-style: none;
padding: 3px 6px 2px 10px;
*width: 180px;
}
#menu .menu_level_2 li.first
{
background: url(/images/menu_lev2_bg.png) repeat-x top left;
border-top:2px solid #800000;
list-style: none;
_background:none;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/menu_lev2_bg.png', sizingMethod='scale');
}
#menu .last li.level2
{
/* min-width:118px;*/
}
#menu li.level1 li.level2 a,
#menu li.level1 li.level2 a:hover,
#menu li.level1 li.level2:hover a
{
border-right: none;
font-weight:normal;
color:#ffff00;
background:transparent;
width:100%;
padding: 0px;
}
#menu .last li.level2 a
{
background:none;
background-color:transparent;
}
#menu li.level1:hover .menu_level_2,
#menu li.level1.sfhover .menu_level_2 {
left: 0px;
display: block;
color:#ffff00;
}
#menu ul.menu_level_2 li a:hover,
#menu ul.menu_level_2 li:hover a
{
text-decoration:none;
background-color:transparent;
}
#menu .color_liste ul.menu_level_2 li
{
background-color:#800000;
color: #800000;
}
#menu .color_liste ul.menu_level_2 li:hover,
#menu .color_liste ul.menu_level_2 li.sfhover2
{
text-decoration:none;
background-color:#0000ff;
color: #800000;
}
li.level1.color_liste a
{
color:#cfaf30;
}
--------------------------le menu menu.php-------------
<?php
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- saved from url=(0075)http://en.parisinfo.com/show-exhibition ... -attourath -->
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" media="all" href="mstyle.css">
</head>
<body>
<div id="menu" class="bright">
<div class="fond_alpha"> </div>
<ul id="main_menu_top" class="">
<li class="level1 enter_0 color_liste">
<a href="pageChercher.php?idVille=0&idInstrument=0&typeMembre=tout" title="Discographie" class="level1 ">Vous cherchez ?</a><div class="menu_level_2">
<span class="shadow">
<ul class="menu_level_2">
<li class="level2 first">
<a href="chercherMembre.php?idVille=0&idInstrument=0&typeMembre=tout">Tous les artistes</a></li><li class="level2 ">
<a href="aaaaaaaaaa">choix 1?</a></li><li class="level2 ">
<a href="aaaaaaaaaa">choix 2?</a></li><li class="level2 ">
<a href="aaaaaaaaaa">choix 3?</a></li><li class="level2 ">
<a href="aaaaaaaaaa">choix 4?</a>
</li>
</ul>
</span>
</div>
</span>
--------------------style.css----------------
/* -- MAIN -- */
ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,blockquote,fieldset,input,button,strong {
margin: 0;
padding: 0;
color:#d1ac2e;
}
h2 {
letter-spacing:-0.2em;
}
a img,
:link img,
:visited img {
border: 0 none;
}
a {
text-decoration: none;
color: #800000;
}
/* couleur du menu*/
.bright .fond_alpha {
position: absolute;
top: 155px;
width: 990px;
height: 30px;
background-color: #800000;
filter:alpha(opacity=90);
-moz-opacity: 0.90;
opacity: 0.90;
}
.bright #main_menu_top {
position: absolute;
top: 155px;
width: 999px;
height: 22px;
z-index: 120;
padding-left: 299px;
}
.bright #main_menu_top li.level1 {
/*width: auto;*/
float: left;
display: block;
font-weight: bold;
text-align: left;
padding: 0;
}
#receiver_main_menu
{
display: none;
}
/* liste à gauche pour le Français*/
#menu li
{
font-family:Arial,Verdana,sans-serif;
font-weight:bold;
padding:0;
margin:0;
text-align:righ;
font-size:15px;
}
#menu li a
{
height: 100%;
}
#menu .level1 a
{
/*border-right:1px solid #d50000;*/
display: block;
display: inline-block !important;
*display: inline-block;
padding:3px 6px 2px 10px;
}
#menu .level1 a.level1
{
height:30px;
_height:30px;
padding-right: 10px;
*padding-right: 5px;
}
#menu li.level1
{
height: 30px;
*height: auto;
_height: 35px;
_overflow: hidden;
/*width:100px;*/
}
#menu li.level1.last
{
width:111px;
}
#menu li.level1.sfhover a,
#menu li.level1:hover a,
{
text-decoration:none;
}
#menu div.menu_level_2 ul
{
min-width:55px;
position: absolute;
top:0px;
left:-10px;
padding:0 5px 5px 0;
_background:none;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/dropshadow.png', sizingMethod='scale');
_padding:0 3px 3px 0;
}
#menu .last div.menu_level_2 ul
{
min-width:111px;
}
#menu div.menu_level_2
{
left: -999em;
cursor: hand;
_top: -6px;
white-space: nowrap;
/* direction: rtl;*/
display: none;
}
#menu div.menu_level_2
{
position: relative;
z-index: 20;
}
#menu li.level2
{
border-top:2px solid #ea0000;
list-style: none;
padding: 3px 6px 2px 10px;
*width: 180px;
}
#menu .menu_level_2 li.first
{
background: url(/images/menu_lev2_bg.png) repeat-x top left;
border-top:2px solid #800000;
list-style: none;
_background:none;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/menu_lev2_bg.png', sizingMethod='scale');
}
#menu .last li.level2
{
/* min-width:118px;*/
}
#menu li.level1 li.level2 a,
#menu li.level1 li.level2 a:hover,
#menu li.level1 li.level2:hover a
{
border-right: none;
font-weight:normal;
color:#ffff00;
background:transparent;
width:100%;
padding: 0px;
}
#menu .last li.level2 a
{
background:none;
background-color:transparent;
}
#menu li.level1:hover .menu_level_2,
#menu li.level1.sfhover .menu_level_2 {
left: 0px;
display: block;
color:#ffff00;
}
#menu ul.menu_level_2 li a:hover,
#menu ul.menu_level_2 li:hover a
{
text-decoration:none;
background-color:transparent;
}
#menu .color_liste ul.menu_level_2 li
{
background-color:#800000;
color: #800000;
}
#menu .color_liste ul.menu_level_2 li:hover,
#menu .color_liste ul.menu_level_2 li.sfhover2
{
text-decoration:none;
background-color:#0000ff;
color: #800000;
}
li.level1.color_liste a
{
color:#cfaf30;
}
devlop78
Invité n'ayant pas de compte PHPfrance
Je vais faire mon chi*ur ^^, t'as pas un lien plutôt ?? 
Et aussi, je te conseille JavaScript, certains me contrediront, mais c'est 20% plus simple avec un framework qu'en css, sans parler des effets supplémentaires. A+ et bonne chance, moi j'ai passé 2 heures sur un menu CSS sur IE avant que ça fonctionne ... juste pour avoir oublié de lui donner un background (sinon, IE "croit" que la souris passe à travers et ferme le menu).
Et aussi, je te conseille JavaScript, certains me contrediront, mais c'est 20% plus simple avec un framework qu'en css, sans parler des effets supplémentaires. A+ et bonne chance, moi j'ai passé 2 heures sur un menu CSS sur IE avant que ça fonctionne ... juste pour avoir oublié de lui donner un background (sinon, IE "croit" que la souris passe à travers et ferme le menu).