[Résolu] IE vs Firefox : un affichage très différent dans un menu

Bonjour,

Je suis toujours en train de "construire" mon menu-vertical en CSS/JS (cf. un post ouvert sur Alsa ici). Après avoir réglé quelques problèmes délicats (effet de clignotement, etc.) et m'être plongé dans le formidable script de Jep, j'essaie désormais de "fignoler" la mise en forme via les CSS.

Or, une fois de plus, les différences IE / Firefox paraissent insurmontables.

Voici les deux copie d'écran de cette page :
- sous IE :
http://ipr.univ-paris1.fr/spip/explorer.jpg

- sous Firefox :
http://ipr.univ-paris1.fr/spip/firefox.jpg

La feuille de style concernant le menu est celle-ci :

/* Style du menu */

	.menu_vertical {
	border:1px solid gray;
	display:block;
	float:left;
	padding:10px 5px 10px 5px;
	width:170px;
	}

	ul#menu li ul {
	display:none;
	}

	ul#menu li:hover>ul {
	display:block;
	}

	ul#menu {
	font-family:Verdana;
	list-style:none;
	margin:0px;
	padding:0px;
	width:148px;
	_width:150px;
	}

	ul#menu ul {
	left:147px;
	position:absolute;
	top:-1px;
	margin:0px;
	padding:0px;
	width:148px;
	_width:150px;
	}

	
	ul#menu li
	{
	background:#C4C4C4;
	border:1px solid black;
	margin:0px;
	padding:0px;
	position:relative;
	width:148px;
	_display:inline;
	}

	ul#menu a {
	color:#000000;
	display:block;
	font-style:normal;	
	text-decoration:none
	width:100%;
	}

	ul#menu a:hover{
	background:#000000;
	color:#FFFFFF;
	font-style:normal;
	}

	.menu FORM{
		background-color: #f2f2f2;
		border: 1px solid #909090;
		color: #505030;
		font-family: Verdana;
		font-weight: normal;
		margin-top:5px;
		width:160px;
		}

Merci de vos éventuels conseils.

GS.
Modifié le 03 Dec 2004 - 16:59

Bonjour,

Les pourcentages à la place des pixels sont peut-être une piste!

Exemple:

#centre {
		background-color: #d8f2f4 ;
		margin-left:20%; /* on place le bloc centre par rapport à la largeur du bloc gauche */
		margin-right:20%;
		margin-top: -12px;
		text-align:justify;
		}

Même remarque que ci dessus, si tu utilses des pourcentage, il faudra que l'élément parent soit dimensionné.

Sinon display: block sur les éléments, j'ai pas trop regardé, je dis ça rapidement en voyant les screens !

Grâce à vos conseils, j'ai pu améliorer la mise en forme de mon menu vertical. Il y a encore quelques petits problèmes sous firefox, mais rien de méchant (décalage du formulaire de recherche).

En revanche, sous IE, il se produit une sorte de "décalage" lorsque l'on survole le dernier élément vertical du menu. J'ai essayé de passer les éléments sur "block", etc. Rien à faire : cela persiste (un problème qui, bien entendu, n'apparait pas sous firefox).

Le problème peut être vu ici.

Le code CSS est celui-ci :

/* Style du menu */

	.menu {
		border:1px solid gray;
		display:block;
		float:left;
		padding:10px 5px 10px 5px;
		width:160px;
		}

	form.menu {
		background-color: #f2f2f2;
		border: 1px solid #909090;
		color: #505030;
		display:block;
		font-family: Verdana;
		font-weight: normal;
		margin-top:5px;
		width:160px;
		}

	ul#menu li ul {
	display:none;
	}

	ul#menu li:hover>ul {
	display:block;
	}

	ul#menu {
	font-family:Verdana;
	list-style:none;
	margin:0px;
	margin-bottom:3px;
	padding:0px;
	width:148px;
	_width:150px;
	}

	ul#menu ul {
	border:1px solid black;
	border-bottom:0px;
	left:147px;
	list-style:none;	
	position:absolute;
	margin:0px;
	padding:0px;
	top:-1px;
	width:148px;
	_width:150px;
	}

	ul#menu ul li{
	display:block;
	margin-bottom:0px;
	border-top:0px;
	border-left:0px;
	border-right:0px;
	}
	
	ul#menu li
	{
	background:#C4C4C4;
	border:1px solid black;
	margin-bottom:3px;
	position:relative;
	_display:block;
	}

	ul#menu a {
	color:#000000;
	display:block;
	font-style:normal;	
	text-decoration:none
	}

	ul#menu a:hover{
	background:#000000;
	color:#FFFFFF;
	font-style:normal;
	}

Quelques idées ?

Merci d'avance...

GS.

Après bien des essais, j'ai finalement résolu ce problème, mais ce n'est pas très "propre."

Dans ce menu vertical, la valeur display de la balise <ul> passe successivement de block à none grâce à un JS. Or, sous IE, il y a un problème de hauteur de ligne de texte. Pour empêcher le décalage, il suffisait de "fixer" la hauteur des balises <li> pour qu'elles ne changent pas lorsque la propriété display passe d'une valeur à l'autre. Une autre solution (impropre dans le cas d'un menu dynamique, c'est-à-dire dont les menus peuvent augmenter ou diminuer selon le contenu de la BD) était d'encadrer l'ensemble du menu d'un <div> avec une hauteur fixe égale à la hauteur du menu + le décalage.

Bon. IE, ce n'est vraiment pas terrible...

Résolu, donc.