Problème CSS, ul/li et sauts de ligne :

Bonjour tous le monde,

J'ai un gros soucis avec mon code.
Sous IE tout va bien, mais sous firefox, j'ai un texte entre balises li qui doit retourner à la ligne. Mais le problème c'est que du coup elle chevauche la balise li qui est en dessous. Comment regler le problème sous le CSS ?
Je voudrait que le retour à la ligne se fasse proprement, que la LI du dessous apparaisse plus bas plutôt que cachée par la ligne du dessus.

Merci d'avance.



Mes sources :

php :

a écrit :

echo '<dl id="menumarque">';
for($i = 1; $i <= $nb_result; $i++)
{
$data = mysql_fetch_array($result, MYSQL_ASSOC);
$name = $data["MARQUE_LIB"];
$idmarque = $data["MARQUE_COD"];
$boite = $data["BN_COD"];

$req_sg = mysql_query("SELECT CHAP_COD FROM sommaire WHERE MARQUE_COD = '$idmarque' AND BN_COD = '$boite' ");
$data_sg = mysql_fetch_array($req_sg, MYSQL_ASSOC);
$chap = $data_sg["CHAP_COD"];

echo '<dt onmouseover="javascript:montre(\'smenu'.$i.'\',\''.$nb_result.'\');" onmouseout="javascript:montre();"><a href="#">'.$name.'</a></dt>';

$req_sg = mysql_query("SELECT SG_LIB, SG_COD, CHAP_COD
FROM super_groupe
WHERE MARQUE_COD = '$idmarque' AND bn_cod = '$boite' ORDER BY CLE_AFF");
$nb_req_sg = mysql_num_rows($req_sg);
if($nb_req_sg != 0)
{
echo '<dd id="smenu'.$i.'" onmouseover="javascript:montre(\'smenu'.$i.'\',\''.$nb_result.'\');" onmouseout="javascript:montre();">';
echo '<ul>';
for($j = 0; $j < $nb_req_sg; $j++)
{
$data_sg = mysql_fetch_array($req_sg, MYSQL_ASSOC);
$libsg = $data_sg["SG_LIB"];
$codsg = $data_sg["SG_COD"];
$chapsg = $data_sg["CHAP_COD"];

echo '<li><a href="grille.php?boite='.$boite.'&choix_marque='.$idmarque.'&fam='.$codsg.'&chapitre='.$chapsg.'" target="_self">'.$libsg.'</a>';
echo'</li>';
}
echo '</ul></dd>';
}
}
echo '<dt></dt>';
echo '<dt></dt>';
echo '<dt></dt>';
echo '<dt></dt>';
echo '<dt></dt>';
echo '</dl>';

css :

a écrit :

#menumarque {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
background: #000000;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
}
#menumarque dt{
font-weight: bold;
cursor: pointer;
height: 15px;
margin: 0px 0;
margin-left:2px;
border: 0px;
text-align: left;
}
#menumarque dt a:hover{
background-color: <?= $color ?>;
}
#menumarque dd {
position: absolute;
z-index: 100;
left: 40px;
margin-top: -0.1em;
width: 190px;
background: #000000;
border: 3px solid <?= $color ?>;
}
#menumarque dd a:hover{
background-color: <?= $color ?>;
}
#menumarque ul {
list-style-type: none;
margin: 1px;
padding: 1px;
}
#menumarque li {
text-align: left;
font-size: 12px;
height: 18px;
}
#menumarque li a, #menumarque dt a {
color: #FFF;
text-decoration: none;
display: block;
text-align: left;
}
#menumarque li a:hover {
text-decoration: none;
font-weight: bold;
}

Merci de ne pas citer de code PHP sur le forum s'il s'agit de résoudre un problème de rendu. Les scripts PHP seront interprétés par le serveur, et le navigateur n'interprètera que le code généré.

Salut,

Tu vire la partie en gras :

a écrit :
#menumarque li {
text-align: left;
font-size: 12px;
height: 18px;
}

Ainsi tes <li> n'auront pas de hauteur déterminée est s'adapteront à leur contenu.

Sur le modèle de la remarque de Mikachu, je dirais ceci :

Tu vire la partie en gras :

#menumarque li {
	text-align: left;
	font-size: [b]12px[/b];
}

Et tu remplaces les valeurs en pixels par des unités relatives (si besoin).

Ainsi le texte de tes <li> n'aura pas de taille figée est s'adaptera aux paramètres de l'utilisateur.

Et la suite : Typographie web : gérer la taille du texte avec les « em »

mpop a écrit :
Merci de ne pas citer de code PHP sur le forum s'il s'agit de résoudre un problème de rendu. Les scripts PHP seront interprétés par le serveur, et le navigateur n'interprètera que le code généré.

Désolé. Etait-ce par flemme d'aller chercher le code source APRES interpretation ? Désolé en tous cas

Mikachu, Mpop, merci, ça marche en effet bien mieux, et ça nous permet de constater une nouvelle faiblesse de IE ^^