Décalage d'un bloc passant par dessus un menu déroulant sous IE

Bonjour,

Je cherche, je cherche (peut-être mal), mais je ne trouve pas. Alors voilà :

Je refais un intranet pour le passer en xhtml sans tableau. Je respecte autant que je peux l'ancien graphisme. Or, les titres de brèves sont « bordés » par un filet. Pour que celui-ci soit bien positionné, je donne une bordure à la balise h2 et décale le span contenu dans le h2 vers le bas.

<h2><span>Le titre</span></h2>

et le css :

#accueil h2 {color:#ff9900; border-bottom:1px solid #ff9900}
h2 span {position:relative; bottom:-0.3em;background:white; padding-right:0.5em}

Tout marche parfaitement jusque là. Le problème, c'est que le menu déroulant vertical situé sur la gauche passe par dessous le bloc span lors de son dépliage avec IE6 et 7. En image :


avant


pendant

Ce menu est tout en liste et fait avec un fichier .htc appelé par la (fausse) balise behavior dans le css. J'ai essayé avec les z-index (marche pour firefox etc. mais pas pour IE) et même les z-index négatif (sur le span) mais c'est pire (disparition sous Firefox, trait allant par dessus le titre sous IE).

J'ai aussi essayé avec un <hr /> mais là le trait n'est plus visible sous Firefox et impossible de faire des alignements corrects entre IE, Firefox et Opera. Je crois aussi que le rendu diffère beaucoup entre IE6 et IE7 Et pis, de toutes façons, ça m'embête de rajouter du code juste pour la décoration (Ce n'est pas un CMS et beaucoup de gens travaillent dessus, alors moins il y a de code, moins il y a possibilité d'erreur...). Ajouter qu'à part quelques informaticiens ou bidouilleurs tout le monde est sous IE6...

Le code du menu (raccourcis) :

  <div id="gauche">
    <div id="menu-gauche">
    <ul><li><a href="../../univers/univers1/index.htm"><img src="../images/puce_home_univers1.gif" alt="" /> BIBLIONEF</a>
      <ul><li><a href="../../univers/univers1/rubrique1/index.htm">l’établissement</a>
	    <ul><li><a href="../../univers/univers1/rubrique1/s_rubrique1/index.htm">Textes de référence</a></li>
	    <li><a href="../../univers/univers1/rubrique1/s_rubrique2/index.htm">Comités - conseils</a></li>
	    <li><a href="../../univers/univers1/rubrique1/s_rubrique3/index.htm">Juridique - marchés publics</a></li>
	    <li><a href="../../univers/univers1/rubrique1/s_rubrique4/index.htm">Gestion des documents et archivage</a></li></ul></li>
      <li><a href="../../univers/univers1/rubrique2/index.htm">Coopération</a>
	    <ul><li><a href="../../univers/univers1/rubrique2/s_rubrique1/index.htm">Coopération nationale</a></li>
	    <li><a href="../../univers/univers1/rubrique2/s_rubrique2/index.htm">Action internationale</a></li></ul></li>
    <li><a href="../../univers/univers1/rubrique3/index.htm">Prévention et protection</a>
	    <ul><li><a href="../../univers/univers1/rubrique3/s_rubrique1/index.htm">Sécurité</a></li>
	    <li><a href="../../univers/univers1/rubrique3/s_rubrique2/index.htm">Sûreté</a></li>
	    <li><a href="../../univers/univers1/rubrique3/s_rubrique3/index.htm">Public et collections</a></li></ul></li></ul></li></ul>

Et son css :

#gauche {float:left; background:url(../../Accueil/images/courbehaute_home.gif) top no-repeat; padding-top:15px; width:165px; }
#menu-gauche {background:url(../../Accueil/images/courbebas_home.gif) bottom no-repeat; padding-bottom:13px}
#menu-gauche img {vertical-align:middle}
#menu-gauche a {text-decoration:none; display:block}
#menu-gauche ul {list-style:none; background:#D9D4D3}
#menu-gauche ul, #menu-gauche li {display:block; margin:0; padding:0}
#menu-gauche li a {background:#4a8cce; color:#fff; font-weight:bold; font-family:arial, sans-serif; font-size:0.8em}
#menu-gauche li ul li {position:relative;height:1%}
#menu-gauche li ul li a {font-weight:normal; font-size:0.6em; background:#D9D4D3; color:#002e66; font-family:verdana, sans-serif;padding:4px 0 4px 25px}
#menu-gauche li ul li a:hover {background:#96c8e4}
#menu-gauche li ul li ul {position:absolute; left:165px; top:0; border:2px solid #96c8e4}
#menu-gauche li ul li ul {display:none;z-index:500}
#menu-gauche li ul li:hover ul {display:block; background:#fff; width:150px;z-index:400}
#menu-gauche li ul li ul li a {background:#fff; padding:4px;z-index:500}

Le behavior:url("csshover.htc") étant dans le body.

Voilà. Si quelqu'un a une idée (ou une autre façon de faire) alors je serais grandement reconnaissant.

Ah, aussi, tant qu'à faire, deux autres petits bugs : toujours sous IE6 (mais pas sous IE7) il y a un léger décalage le long du menu qui fait ressortir le filet des titres sur la gauche. Et tout redevient normal en deça du menu (le filet ne dépassant qu'à droite.

Un autre, plus énervant, est que la souris, sous Firefox (mais pas sous IE ou Opera), se « bloque » lorsque l'on passe sur les menus qui entraînent le dépliage mais pas sur les menus dépliés. Une idée ?

Si besoin est, je peux mettre une page en ligne, mais que de chez moi.

Merci d'avance pour vos réponses.

P'tit Ben