Problème de menu déroulant en CSS

Bonjour,

Après plusieurs jours de recherches infructueuses, je m'inscris sur ce forum pour solliciter votre aide.

En effet, je me retrouve face à un pb bien embarassant. Je vous explique. Actuellement en stage, je travaille pour une association qui souhaite une refonte totale de son site. J'ai un cahier des charges plus ou moins précis à respecter. Bref, tout ça pour dire que ce site utilise SPIP, avec notamment un menu déroulant horizontal en CSS.

Jusque là, rien de bien inquiétant. Sauf que voilà, l'ennui commence là. J'entends déjà les gens râler, mais j'ai fait en sorte que la taille du texte ne puisse pas être modifiée, ce qui s'explique par une mise en page plutôt graphique à base de Photoshop. Et pour éviter une déformation hideuse du site, j'ai dû opter pour la solution de la police fixe. Vous me direz, ça ne marchera que sous IE, puisque FF permet tout de même de réduire ou d'agrandir le texte, malgré le CSS.

Sous IE, dans le menu "Affichage >> Taille du texte", je suis réglé sur "Petite", puisque c'est la taille qui me convient. Lorsque je déroule mon menu, voici ce que j'obtiens :

Menu avec taille de police réglée sur "petite"

Sur cette image tout va bien, les 2 blocs étant positionnés comme je le souhaite l'un par rapport à l'autre.

J'ai ensuite effectué le test en réglant la taille de la police sur "Plus grande". Et voilà le résultat:

Menu avec taille de police réglée sur "plus grande"

Et c'est là que ça devient étrange. La taille de la police reste bien fixe, et pourtant il y a un écart énorme qui se créé entre les 2 blocs. L'écart et moins grand si la taille du texte est réglée sur "grande" ou "moyenne", et les blocs se superposent si la taille est sur "plus petite". Ceci dit, j'ignore parfaitement pourquoi cet écart existe, dans la mesure ou mon texte ne bouge absolument pas...

Si besoin est, je joins les quelques lignes de CSS relatives aux 2 niveaux du sous-menu, sans pour autant être sûr que le pb vienne réellement de là.

#nav li li a { /* gère le niveau 1 du sous-menu */
	position: relative;
	padding: 5px;
	background-image: url(../images/bandeauSousMenu.jpg);
	border-left: 1px solid #000;
	border-right: 1px solid #000;
	width: 185px;
	top: 3px;
}

#nav li li a:hover { /* gère le niveau 1 du sous-menu au survol */
	position: relative;
	padding: 5px;
	background-image: url(../images/bandeauSousMenuSurvol2.jpg);
	border-left: 1px solid #000;
	border-right: 1px solid #000;
	width: 185px;
	top: 3px;
}

#nav li li li a { /* gère le niveau 2 du sous-menu */
	background-image:url(../images/bandeauSousMenu.jpg);
	width: 240px;
	top: -8px;
	left: 63px;
	padding-left: 3px;
	padding-top: 5px;
	padding-bottom: 5px;
}

#nav li li li a:hover { /* gère le niveau 2 du sous-menu au survol */
	background-image: url(../images/bandeauSousMenuSurvol.jpg);
	width: 240px;
	top: -8px;
	left: 63px;
	padding-left: 3px;
	padding-top: 5px;
	padding-bottom: 5px;
}

J'avoue être vraiment à la ramasse sur ce coup là, mais si quelqu'un pense avoir un début de piste, voire même la solution qu'il me faut, je suis preneur.

Merci d'avance de votre aide éventuelle.
Modifié par Sketchy (23 May 2007 - 12:12)

Nan, même pas un semblant d'idée..?

Salut,

Il serait bien que tu fournisse si possible une page en ligne, sinon à défaut l'intégralité du code html et css.

Je ne reviendrai pas longuement sur le fait que la volonté d'empêcher l'agrandissement de la taille de caractère aura plus d'effets néfastes que bénéfiques (illisible en grande résolution, difficulté des lecture pour les gens fatigué, etc.). Il serait plus profitable d'apprendre à concevoir un design extensible plutôt que de chercher à avoir quelque chose de figé comme pour les documents imprimés.