Solution bug récurrent menus déroulants et champs select sous IE6

Bonjour à tous,

Connaissant le bug récurrent d'IE6 concernant les menus déroulants avec les champs select (ceux ci se postitionnent par dessus le menu déroulé), j'ai trouvé la solution sur votre forum qui était de cacher les champs select lorsque l'on déroulait le menu.

Malheuresement, ça fait un peu trop "bug" même si c'est un correctif ^^, et reprenant un projet en cours, je ne peux absolument pas placer les champs ailleurs pour que le bug ne se produise pas.

j'ai fini par trouvé une solution (fichier .htc)qui règle le problème sous IE6 et qui fonctionne parfaitement avec les autres navigateurs à cette adresse :
http://mguessan.free.fr/html/menu.html

Mais autre problème le code css de mon prédecesseur étant un véritable sac de noeud (classes css dupliquées dans plusieurs css, écrasement les unes des autres j'en passe et des meilleures...) j'aimerais savoir comment modifié mon css pour que je puisse appliquer le correctif

voici le code css de mon menu :

/*------------------------headline2 summary------------------------*/
#headline2
{
    padding-left: 5px;
    height: 37px;
	background:url("../img/header/headline2_bkg.jpg");
}
#headline2 #menunav
{
    list-style-type: none;
	border:1px solid #72706D;
	border-bottom:0;
	width:970px;
	display:block;
    height: 36px;
}
#headline2 #menunav .topnav
{
    float: left;
	background:#fff url("../img/header/headline2_bkg.gif");
}
#headline2 #menunav .topnav div
{
    display: block;
	z-index:99;
}
#headline2 #menunav .topnav .leftoverflo
{
	position:relative;
	z-index:99;
}
#headline2 #menunav .topnav .leftoverflo ul
{
	position:absolute;
	right:-1px;
}
#headline2 #menunav .topnav div h1
{
	display:inline;
	height: auto;
	clear:both;
}
#headline2 #menunav .topnav div h1 a
{
    position: relative;
    display: block;
	text-decoration:none;
	text-align:center;
	border-left:1px solid #C6C6C6;
	height:36px;
}
#headline2 #menunav .topnav div h1 a span
{
	font:700 11px arial,serif;
	color:#00437a;
	display:block;
	padding-top:0.3em;
}

#headline2 #menunav .topnav div h2 a
{
	text-decoration:none;
}

#headline2 #menunav .topnav div h1 a:hover span,
#headline2 #menunav .topnav div h2 a:hover span,
#headline2 #menunav .topnav div h1 a:hover span,
#headline2 #menunav .topnav div:hover h1 a span
{
	color:#fff;
}
#headline2niv0 h1 a
{
    width: 54px;border-left:0;
}
#headline2niv1 h1 a
{
    width: 70px;
}
#headline2niv2 h1 a
{
    width: 105px;
}
#headline2niv3 h1 a
{
    width: 70px;
}
#headline2niv4 h1 a
{
    width: 90px;
}
#headline2niv5 h1 a
{
    width: 100px;
}
#headline2niv6 h1 a
{
    width: 110px;
}
#headline2niv7 h1 a
{
    width: 80px;
}
#headline2niv8 h1 a
{
    width: 80px;
}
#headline2niv9 h1 a
{
    width: 84px;
}
#headline2niv10 h1 a
{
    width: 116px;
}
#headline2niv11 h1 a
{
    width: 96px;
}


/*link h2,link rollover, rollover div, on the universe */
#headline2niv0 h2 a:hover,
#headline2niv0 h1 a:hover,
#headline2niv0:hover h1 a,
#headline2.niv0 #headline2niv0 h1 a
{
    background: #004379;
}

#headline2niv1 h2 a:hover,
#headline2niv1 h1 a:hover,
#headline2niv1:hover h1 a,
#headline2.niv1 #headline2niv1 h1 a
{
    background: #ff8b00;
}

#headline2niv2 h2 a:hover,
#headline2niv2 h1 a:hover,
#headline2niv2:hover h1 a,
#headline2.niv2 #headline2niv2 h1 a
{
    background: #e9511b;
}

#headline2niv3 h2 a:hover,
#headline2niv3 h1 a:hover,
#headline2niv3:hover h1 a,
#headline2.niv3 #headline2niv3 h1 a
{
    background: #fb0000;
}

#headline2niv4 h2 a:hover,
#headline2niv4 h1 a:hover,
#headline2niv4:hover h1 a,
#headline2.niv4 #headline2niv4 h1 a
{
    background: #ff0d52;
}

#headline2niv5 h2 a:hover,
#headline2niv5 h1 a:hover,
#headline2niv5:hover h1 a,
#headline2.niv5 #headline2niv5 h1 a
{
    background: #f2257f;
}

#headline2niv6 h2 a:hover,
#headline2niv6 h1 a:hover,
#headline2niv6:hover h1 a,
#headline2.niv6 #headline2niv6 h1 a
{
    background: #6169ba;
}

#headline2niv7 h2 a:hover,
#headline2niv7 h1 a:hover,
#headline2niv7:hover h1 a,
#headline2.niv7 #headline2niv7 h1 a
{
    background: #2a87c8;
}

#headline2niv8 h2 a:hover,
#headline2niv8 h1 a:hover,
#headline2niv8:hover h1 a,
#headline2.niv8 #headline2niv8 h1 a
{
    background: #27a3ba;
}

#headline2niv9 h2 a:hover,
#headline2niv9 h1 a:hover,
#headline2niv9:hover h1 a,
#headline2.niv9 #headline2niv9 h1 a
{
    background: #2e8f08;
}

#headline2niv10 h2 a:hover,
#headline2niv10 h1 a:hover,
#headline2niv10:hover h1 a,
#headline2.niv10 #headline2niv10 h1 a
{
    background: #6ca400;
}

#headline2niv11 h2 a:hover,
#headline2niv11 h1 a:hover,
#headline2niv11:hover h1 a,
#headline2.niv11 #headline2niv11 h1 a
{
    background: #ff9d00;
}

#headline2.niv0 #menunav .topnav #headline2niv0 h1 a span , 
#headline2.niv1 #menunav .topnav #headline2niv1 h1 a span , 
#headline2.niv2 #menunav .topnav #headline2niv2 h1 a span , 
#headline2.niv3 #menunav .topnav #headline2niv3 h1 a span , 
#headline2.niv4 #menunav .topnav #headline2niv4 h1 a span , 
#headline2.niv5 #menunav .topnav #headline2niv5 h1 a span , 
#headline2.niv6 #menunav .topnav #headline2niv6 h1 a span , 
#headline2.niv7 #menunav .topnav #headline2niv7 h1 a span , 
#headline2.niv8 #menunav .topnav #headline2niv8 h1 a span , 
#headline2.niv9 #menunav .topnav #headline2niv9 h1 a span , 
#headline2.niv10 #menunav .topnav #headline2niv10 h1 a span , 
#headline2.niv11 #menunav .topnav #headline2niv11 h1 a span
{
	color:#fff;
}

#headline2 #menunav .topnav div ul
{
    list-style-type: none;
	border-left:1px solid #71706d;
	border-right:1px solid #71706d;
	border-bottom:1px solid #71706d;
	border-top:0;
	padding:0;
	background:#fff;
    position: absolute;
    z-index: 999;
    display:none;
    margin: 0;
	height:auto;
}

/*ie,ff*/
#headline2 #menunav .topnav div:hover ul
{
    display:block;
}
#headline2 #menunav .topnav ul li
{
	width:auto;
	height:auto;
}
#headline2 #menunav .topnav div ul li h2 a
{
    height: auto;
	width:17em;
	display:block;
    border-top: #c5c5c5 1px solid;
    font: 400 11px arial,serif;
    vertical-align: bottom;
    color: #254577;
	margin:0;
	padding: 0.5em;
}
#headline2 #menunav .topnav ul li h2 a:hover
{
    color: #fff;
}

Le code css du fichier d'exemple ou le bug est corrigé sous IE6,


Menu.css :

#menu ul { margin:0;padding:0; }
  #menu ul li { behavior:url('menu.htc');background-color:green;position:expression('relative');display:expression('inline'); }
  #menu ul>li { display:table-cell; }
  #menu ul li:hover { background-color:grey}
  #menu ul li ul { top:expression(this.parentNode.offsetHeight+"px");left:expression(0);border:solid 1px black;position:absolute;visibility:hidden; }
  #menu ul li:hover ul { visibility:visible; }
  #menu ul li ul li { display:block; }

Je joins aussi le fichier .HTC et le fichier HTML pour ceux qui restent sceptiques ou qui voudraient tester ,


Menu.htc :

PUBLIC:COMPONENT>
   <PUBLIC:ATTACH EVENT="onmouseenter" ONEVENT="showSubMenu()" />
   <PUBLIC:ATTACH EVENT="onmouseleave"  ONEVENT="hideSubMenu()"  />

   <SCRIPT LANGUAGE="JScript">
    var menuBackground;
    var menuHighLight = 'rgb(128,128,128)';

    function showSubMenu() {
      // highlight current item
      menuBackground = style.backgroundColor;
      style.backgroundColor = menuHighLight;

      // get sub menu
      var submenu = getElementsByTagName('ul')[0];
      if (submenu) {
       
        // workaround for windowed select object bug
        // that ignores zindex values
        var iframe = getElementsByTagName('iframe')[0];
        if (!iframe) {
          iframe = document.createElement('iframe');
          iframe.frameBorder=0;
          iframe.style.display='block';
          iframe.style.position='absolute';
          iframe.style.top=submenu.offsetTop;
          iframe.style.left=0;
          iframe.style.width=submenu.offsetWidth;
          iframe.style.height=submenu.offsetHeight;
          insertBefore(iframe, submenu);
        }
         
         // show sub menu
        submenu.style.visibility='visible';
        iframe.style.visibility='visible';
      }
    }
    
    function hideSubMenu() {
      // restore background
      style.backgroundColor = menuBackground;

      // hide submenu
      var submenu = getElementsByTagName('ul')[0];
      if (submenu) {
        submenu.style.visibility='hidden';
        getElementsByTagName('iframe')[0].style.visibility='hidden';
      }
    }

   </SCRIPT>
</PUBLIC:COMPONENT>

et enfin le fichier html,


Menu.html :

<?xml version="1.0" encoding="ISO-8859-1"?>
<!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" lang="fr" xml:lang="fr">
<head>
  <title>Menu CSS</title>
  <link media="screen" type="text/css" rel="stylesheet" href="menu.css" />
</head>
<body>
<div id="menu">
  <ul>
      <li>menu1 aa<ul>
              <li>menu1.1 cccc</li>
              <li>menu1.2 dddddd</li>
          </ul>
      </li>
      <li>menu2 bbbb<ul>
              <li>menu2.1 eeee</li>
              <li>menu2.2 ffffff</li>
          </ul>
      </li>
  </ul>
</div>
<select>
<option name="test">test</option>
</select>
<select>
<option name="test">test</option>
</select>
<select>
<option name="test">test</option>
</select>
<br/>
<select>
<option name="test">test</option>
</select>
<select>
<option name="test">test</option>
</select>
<select>
<option name="test">test</option>
</select>
<br/>

</body>
</html>

Voila je conçois que ce post est super long mais au moins vous avez tous les éléments, je voudrais donc savoir où placer les attributs de son fichier css ( "top:expression(this.parentNode.offsetHeight+"px");" par exemple) dans le mien pour faire fonctionner le correctif.

En espérant que cette solution aidera d'autres personnes que moi en même temps, Merci d'avance.

Cordialement.
Modifié par Chrisis (15 Feb 2007 - 11:59)

bon j'ai fait divers tests , j'ai recrée des classes css mais j'arrive toujours à faire marcher tout ça, personne n'a une idée ?