Pb de menu déroulant sur firefox [RESOLU]

Bonjour,
Je suis débutante et j'essaie d'apprendre peu à peu et là...

J'ai créé un menu déroulant vertical, en suivant les indications du tutoriel, et ça fonctionne très bien avec Internet Explorer.
En revanche, avec Firefox, le menu semble correct, mais les cases des sous-menus s'allongent indéfiniment lorsqu''on ouvre le menu.
Et je ne comprends pas pourquoi.
D'autant que dans la démo du tutoriel, ce problème ne se pose pas, donc c'est que j'ai dû me tromper quelque part... mais Où ???
Quel est le code qui commande les longueurs des cases ??

Je vous remercie de votre aide!


C'est le site d'un collège : http://pedagogie.ac-toulouse.fr/col-girbet-saverdun/index.html


Voici le code que j'ai installé (et qui fonctionne avec IE mais pas avec FF...)

<script type="text/javascript">
<!--
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
	for (var i = 1; i<=10; i++) {
		if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
	}
if (d) {d.style.display='block';}
}
//-->
</script>
<style type="text/css" media="screen">
<!-- 
body {
margin: 0;
padding: 0;
background: white;
font: 90% "Times New Roman", Times, serif;
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
	position: relative;
	top: 1;
	left: 0;
	}
#menu {
width: 150px;
}
#menu dt {
cursor: pointer;
margin: 2px 0;;
height: 20px;
line-height: 20px;
text-align: center;
font-weight: bold;
border: 1px solid gray;
background: #00FFFF;
}
#menu dd {
	border: 1px solid gray;
	background-color: #CCFFFF;
	text-align: center;
}
#menu li {
text-align: left;
background: #CCFFFF;
}
#menu li a, #menu dt a {
	color: #000;
	text-decoration: none;
	display: block;
	border: 0 none;
	height: 100%;
	background-color: #99FFFF;
}
#menu li a:hover, #menu dt a:hover {
background: #FFCCFF;
}
-->
</style>

Modifié par EmmaTls (01 Jul 2007 - 21:59)

Bonjour et bienvenue parmi nous

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle.

D'ailleurs, je rappelle que le lien qui apparaît en bandeau tout en haut du forum ("Nouveau sur le forum ?...") est important. Il contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.
Il serait courtois de ta part de bien vouloir en prendre connaissance.

Bonne continuation

Hello,

#menu {
   position: relative;
   [#red]top: 1;[/#]
   left: 0;
}

1 quoi ? carotte, banane, kiwi ? Seul le zéro ne nécessite pas d'unité.

#menu dt {
   cursor: pointer;
   margin: 2px 0;[#red];[/#]
   height: 20px;
   line-height: 20px;
   text-align: center;
   font-weight: bold;
   border: 1px solid gray;
   background: #00FFFF;
}

Le deuxième point virgule est en trop.

Bonjour,
Voilà j'ai pris pour exemple le menu déroulant horizontal d'alsacréations pour le mettre sur mon blog en en-tête. Le problème c'est qu'il se trouve positionné en haut de mon en-tête. Je le voudrais en bas de mon en-tête.
Voilà ce que j'ai mis dans le CSS :

* CSS issu des tutoriels http://css.alsacreations.com */
body {
margin: 0;
padding: 0;
background: white;
font: 80% verdana, arial, sans-serif;
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
background-position: bottom center;
top: 0;
center:0;
left: 0;
z-index:100;
width: 100%;
}
#menu dl {
float: left;
width: 12em;
margin: 0 1px;
}
#menu dt {
cursor: pointer;
text-align: center;
font-weight: bold;
background: #ccc;
border: 1px solid gray;
}
#menu dd {
border: 1px solid gray;
}
#menu li {
text-align: center;
background: #fff;
}
#menu li a, #menu dt a {
color: #000;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;
}
#menu li a:hover, #menu dt a:hover {
background: #eee;
}

#site {
position: absolute;
z-index: 1;
top : 70px;
left : 10px;
color: #000;
background-color: #ddd;
padding: 5px;
border: 1px solid gray;
}

a {text-decoration: none;
color: black;
color: #222;
}
#conteneur {position: relative;}
#bas {position: absolute; bottom: 0;}
-->
</style>"
Comment puis-je faire pour le mettre correctement ?
Merci
PS : je suis débutante aussi alors, excusez-moi si je n'ai pas bien respecté les règles

Merci koala64

j'ai ôté le point virgule en trop.

quant au top:1 il m'est nécessaire pour qu'une image s'introduise entre le haut de page et le menu déroulant.

Ceci dit, les sous-menus s'étirent toujours en longueur... est-ce que tu as une idée ??

A +

Salut EmmaTls,

Le problème vient d'ici :

#menu li a, #menu dt a {
	color: #000;
	text-decoration: none;
	display: block;
	border: 0 none;
	[#red]height: 100%;[/#]
	background-color: #99FFFF;
}

@helenesis :

Bonjour et bienvenue sur Alsacréations,

Le mieux serait de créer ton propre sujet au lieu d'intervenir sur celui des autres ; généralement, c'est loin d'être apprécié.
Je te demanderais aussi de relire les règles avec une attention toute particulière sur ce qui concerne la mise en forme du code que tu envoies sur le forum.

Merci d'avance.
Modifié par koala64 (01 Jul 2007 - 13:26)

koala64...

MERCI !!

J'ai essayé plusieurs valeurs, en pixel ça ne permetait pas de gérer les lignes de texte un peu longues et en % ça ne donnait rien de bien satisfaisant non plus, donc j'ai tout simplement rédigé le code height avec la valeur "auto" et ça marche avec FF.
Du coup, avec IE, ça fait un drole d'effet avec des bandes rayées (pourquoi ?) mais qu'importe, les bandes rayées n'empêchent pas la navigation dans le site, tandis que dans l'autre sens, c'était très gênant. Donc, le pb est résolu !!

au final ça donne :

#menu li a, #menu dt a {
	color: #000;
	text-decoration: none;
	display: block;
	border: 0 none;
	height: auto;
	background-color: #99FFFF;

Vraiment, il en vaut mieux un qui sait que dix qui cherchent !
C'est extra, merci merci merci !
Bonne semaine !

...heu, j'ai dis merci ?

peut-être a +
Emma