CSS - Listes imbriquées, différences entre IE, FF et OP

[miltonis]

Bonjour

j'essaie de construire un site en CSS mais je bute sur un probleme de chevauchement des éléments de menu.
je m'explique :
dans le menu une balise <dt> ouvre au click une autre balise <dd> et son contenu.

Code :

Code: Tout sélectionner

<dl>
<dt onclick="javascript:montre('smenu4');"><a href="#">&nbsp;&nbsp;Circuits Touristiques</a></dt>
<dd id="smenu4"> 
<ul>     
  <li style="padding-bottom:40px;">&nbsp;<span style="color:#E3BBB1;">Programme Individuel :</span>       
    <ul>         
      <li><a href="<?php echo $level; ?>fr/agence-de-tourisme/circuit-8j.php">&nbsp;Circuit de 8 jours</a></li>         
      <li><a href="<?php echo $level; ?>fr/agence-de-tourisme/circuit-15j.php">&nbsp;Circuit de 15 jours</a></li>       
    </ul>     
  </li>                         
  <li><a href="<?php echo $level; ?>fr/agence-de-tourisme/programme-groupe.php">&nbsp;Programme de Groupe</a></li> 
</ul>
</dd>
</dl>

Voir images en lien
Le probleme est que la balise <ul> (liste 2) et son contenu (les deux <li>) dans programme individuel chevauche le contenu de la <li> juste en dessous (programme de groupe, liste 1).
ceci, sous FF et Opera , par contre sous IE ça marche nickel (pour une fois)

et le CSS

Code: Tout sélectionner

dl, dt, dd, ul, li {
margin: 0;
/*margin: 0 0 0 10px;*/
padding: 0;
list-style-type: none;
}
#menu {
position: absolute;
top: 108px;
left: 98px;
background-color: #A8432B;
}
dl#menu {
width: 15em;
width: 210px;
padding-top: 10px;
padding-bottom: 16px;
}
dl#menu dt {
cursor: pointer;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #FFFFFF;
text-align: left;
width: 210px;
margin: 2px 0;
height: 20px;
background: #A8432B;
}

/*dl#menu dd {
border: 1px solid gray;
}*/
dl#menu li {
background: #AD533E;
font-size: 11px;
height: 20px;
/*line-height: 16px;*/
padding-left: 15px;
}
dl#menu li a, dl#menu dt a {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #FFFFFF;
text-decoration: none;
display: block;
border: 0 none;
height: 100%;
}
dl#menu li a:hover, dl#menu dt a:hover {
background: #CC7360;
}

je ne vois pas de solution j'essaie les padding et margin bottom mais en arrangeant le pbm. sous FF et OP, ça décale tout sous IE.
que faire? merci de votre coup de main

Milt


pour info, voici ce que j'aimerias que ça fasse : img1, et ce que ça fait sous FF et OP : img2

[oli004]

Je te suggeres de poster ta requete sur le forum d'alsacreations, ils sont très compétents dans le domaine de la mise en forme de site apr css.

Ceci dit, j'ai eu également un probleme de decallage en css avec les <ul> et <li> sur mon dernier site et il se trouve que Internet Explorer, FireFox et Opera donnaient trois comportement différents.

voir mon topic sur ce sujet : ici

Pour y remedier (car pas de solution 100% compatible tout browser) j'ai viré mes <ul> et <li> pour le remplacer par un habillage de <a> car étant sur des liens.

[Romuald]

J'ai peut-être trop lu de travers, mais il y ai de forte chance que le position:absolute; te fasse misère.

[miltonis]

Bonjour,
je teste ce soir et vous tiens au courant,
bonne journée