Chevauchement de lignes

Bonjour,

Un simple problème j'en suis sur, mais je tourne autour depuis un moment :

Voici mon code HTML simplifié, en fait mes ligne <li> sont dans une boucle pour une liste déroulante :

<ul class="contacts">
<li class="contact">
<spanstyle="display:none">'.$autoCompletion['id_tiers'].'-idcache</span>
<div class="nom">'.$autoCompletion['tiers_nom'].' </div>
<div class="nom2">- '.$autoCompletion['tiers_adr1'].'</div>
</li>
</ul>

Voici mon CSS :

ul.contacts {
        list-style-type: none;
        margin:0px;
        padding:0px;
        text-align: left;
}
ul.contacts li.selected { background-color: #333300; cursor: pointer; }

li.contact {
        list-style-type: none;
        display:block;
        margin:0;
        padding:2px;
        height:12px;
}
li.contact div.image {
        float:left;
        width:32px;
        height:32px;
        margin-right:8px;
}
li.contact div.nom {
        background-color: #ffffcc;
        font-weight:bold;
        font-size:0.9em;
        line-height:1.5em;
}
li.contact div.nom2 {
        background-color: #ffffcc;
        font-size:0.9em;
        line-height:1.5em;
}

Les div nom et nom2 se placent bien l'un en dessous de l'autre.

Mais...
Exemple avec 2 lignes A et B
ligne A se place bien en li div nom et li div nom2
ligne B nom se place sur nom2 de ligne A

Mon problème est donc ce chevauchement ?

J'ai besoin d'un autre regard.

Merci d'avance

Bonsoir,
A priori je pense que ton problème vient du height:12px
qui force la hauteur du li à 12px quelque soit son contenu, d'ou
le chevauchement.

Merci, en variant le height:12px en plus ou en moins. Cela ne change strictement rien à mon affichage.

Je l'ai même retiré pour voir et cela n'a rien changé.

Il ne sert donc à rien dans ce cas là.

Dans ce cas il faudrait être un peu plus explicite et
montrer un exemple en image ou mieux un lien.

Voici une image

upload/8755-chevaucheme.JPG" alt="upload/8755-chevaucheme.JPGupload/8755-chevaucheme.JPG" />

Etant sur un intranet, je n'ai pas d'accès public.

Salut,
je ne sais pas si c'est la même dans ton code en "vrai" mais ton <spanstyle collé n'aide pas les navigateurs...

Sinon, tu as essayé le truc spécial alsa qui consiste à mettre des couleurs de fond différentes à tes éléments pour voir quoi chevauche quoi ? (les div ou les li) because là tu as des tas de trucs qui interviennent, les hauteurs de li, de ligne, les paddings, etc

Perso je commencerais par ça et par essayer une hauteur de li énorme pour voir comment tes éléments se placent à l'intérieur.

Ensuite, question, pourquoi des div à la place de span dans tes li pour attribuer des styles linéaires ?
@ suivre
have swing

En changeant la couleur de nom2, j'ai ceci


Ce qui montre que c'est nom qui chevauche nom2

Ensuite en mettant une ligne de li énorme comme ceci :

li.contact {
        list-style-type: none;
        display:block;
        margin:0;
        padding:2px;
       [#red] height:50px;[/#]
}

Le résultat est clair

J'ai aussi fait ceci ce qui est pas mal non plus

li.contact {
        list-style-type: none;
        display:block;
        margin:0;
        padding:2px;
        height:12px;
        margin-bottom:20px;
}

Remplacer les div par span, c'est la cata.