[Résolu] Problème affichage liste Internet explorer

Bonjour,

après maintes recherches sur le net je suis incapable de trouver une solution à mon problème qui concerne... internet explorer !
Je vous explique :
J'ai crée un menu sous forme de liste <ul> pour faire ça dans les règles. Le menu contient uniquement des images car je voulais utiliser une police spécifique.
Toutes les images sont dimensionnées pour s'emboiter parfaitement à l'aide d'un float: left sur certaines d'entre elles.
Sous FF, opéra et Safari, absolument aucun problèmes (Opéra est même celui qui affiche mon site avec le plus de précision, j'ai été bluffé).


Sous internet explorer c'est la cata, plus rien n'est calé. J'ai beau chercher dans le code ce qui cloche, j'ai modifié des tas de paramètres mais sans succès.


Je vous met également le code CSS, pour le code HTML vous pouvez aller sur le site http://eco-a.fr/accueil.html

body {
	border: 0px red dotted;
	font-family: arial;
}

#navigation {
	position: absolute;
	left: 10px;
	top: 10px;
	float: left;
	width: 206px;
	border: 0px green dotted;
}

#navigation .logo {
	display: block;
	float: left;
}

#navigation .niv1 {
	margin: 0;
	padding: 0;
}

#navigation .niv1 li, li a img, li img {
	list-style: none;
	display: block;
	border: none;
}

#corps {
	min-width: 400px;
	border-left: 2px #becf38 dotted;
	border-right: 2px #becf38 dotted;
	margin-left: 206px;
	margin-right: 206px;
	padding-left: 10px;
	padding-right: 10px;
	text-align: justify;
}

Pouvez-vous me dire si j'ai fait une erreur quelque part ?
Merci à vous ! [/url]
Modifié par lawachekyry (18 Feb 2009 - 11:27)

Hello,

lawachekyry a écrit :
J'ai crée un menu sous forme de liste <ul> pour faire ça dans les règles.

Bien joué.

Sauf que quand je regarde la tête de ton menu et le balisage que tu as utilisé, ben au final il n'est pas tellement "dans les règles".

Pour respecter sémantique et accessibilité, tu dois faire une différence entre les images décoratives et les images significatives. A ce sujet je te recommande l'article d'Openweb sur les images accessibles.

Tu dois également distinguer élément de navigation (bouton) et élément de décoration. Il n'est pas rigoureux d'utiliser une liste qui mélange les deux fonctions comme tu l'as fait (un <li> pour une majuscule décorative, un <li> pour un lien, etc.).

Laisse moi te proposer une autre méthode :

<ul id="navigation">
     <li class="ecologie"><a href="#">Écologie</a></li>
     <li class="etudes"><a href="#">Études</a></li>     
     <li class="construction"><a href="#">Construction</a></li>
     [...]
</ul>

ul#navigation {
width:...px; /* largeur totale - padding-left*/
background:transparent url(ecol-a.gif) no-repeat left top; /*Image qui représente toutes les majuscules*/
padding-left:...px; /* largeur de l'image précédente */}

ul#navigation li a {
display:block;
width:...px; /* largeur des images liens */
text-indent:-9999px; }

ul#navigation li.ecologie a { /* élément de navigation */
height:...px; /* hauteur de l'image */
background:transparent url(ecologie.gif) no-repeat; }

ul#navigation li.ecologie a:hover {
background-image:url(ecologie_hover.gif); /* image au survol. On pourrait optimiser le rendu avec la technique du rollover en une seule image */}

[...]

Et là je sens que tu vas me dire : "Hey mais dans l'article Laurent Denis eh ben il a dit faut mettre les images-liens dans le code XHTML !".

Alors pourquoi je place les images des boutons en CSS ? Parce que si je désactive les feuilles de styles *, je préfère voir une liste de liens textuels clairs que des images avec un texte dont il manque la première lettre (même si l'attribut "alt" est correctement rempli).

(*) Désactivation feuille de styles = navigateur qui ne lit pas les CSS, problème de chemin avec le fichier, etc.

Bon courage, si tu as des questions n'hésite pas
Modifié par BeliG (17 Feb 2009 - 16:18)

Salut!

Merci pour ta réponse et le lien vers cet article fort intéressant sur la bonne gestion des images sur un site internet. Quant on voit qu'un site grand public comme la poste n'est pas aux normes...

En tout cas pour mon problème ta solution pourrait je pense marcher, sauf que, si j'ai bien saisi ton code, les lettres écrites en gros (élément de déco) sont regroupées dans une seule image.
Or, si tu cliques sur le menu "etudes" un sous menu s'ouvre entre la première et la deuxième lettre de décoration, c'est la raison pour laquelle j'ai structuré mon code avec une image par lettre.
Du coup si je regroupe toutes les lettres dans une seule image je ne pourrais plus avoir cet effet, ou alors je vais devoir faire plusieurs images, les modifier à chaque fois que je veux rajouter des éléments, ...et avoir un fichier css de 3km de long.

De plus il y a des lignes dont je ne mesure pas la portée, par exemple

ul#navigation li a {
...
text-indent:-9999px; }

Bon en fait il n'y a que celle-ci qui m'intrigue.

J'ai également remarqué que si je retire mes <ul> et que je les remplace par des <div>, tout s'affiche correctement sur tous les navigateurs.
Du coup je me posais la question de l'indispensabilité des balises <ul> pour le menu et des conséquences que cela implique pour mon site.
(j'ai passé le test de validation W3C sans balises <ul> pour mon menu au passage )

Pour le rollover je regarde si je peux optimiser tout ça. J'ai pas encore pratiqué

Et pour les images dans le css, c'est vrai que je suis pas fan pacque ça rallonge méchament le fichier css mais je vais voir si je peux faire comme tu l'expliques.

@+
Modifié par lawachekyry (17 Feb 2009 - 16:33)

lawachekyry a écrit :
Or, si tu cliques sur le menu "etudes" un sous menu s'ouvre entre la première et la deuxième lettre de décoration

Et m*rde...

J'ai une solution au début assez simple (un <span> positionné absolument dans le <li> pour caler la majuscule), mais ça se complique quand faut positionner le sous-menu au bon endroit... J'ai bien peur qu'elle ne t'embrouille plutôt qu'autre chose

a écrit :
De plus il y a des lignes dont je ne mesure pas la portée, par exemple

Le text-indent:-9999px, c'est pour cacher le texte du lien pour éviter qu'il se superpose à l'image d'arrière-plan.

a écrit :
Pour le rollover je regarde si je peux optimiser tout ça. J'ai pas encore pratiqué

Voir la dernière partie du tutoriel Créer des menus simples en CSS (Un menu graphique, avec rollover mais sans javascript).

a écrit :
Et pour les images dans le css, c'est vrai que je suis pas fan pacque ça rallonge méchament le fichier css mais je vais voir si je peux faire comme tu l'expliques.

Ça rallonge peut-être, mais d'un autre côté tu profites pleinement des avantages des standards...

Bon j'ai avancé et j'ai fini par trouver la solution .
Pour les listes j'ai fait plusieurs <ul> qui entourent uniquement les éléments du menu par des <li>. Les lettres de décoration ne font donc plus parti du menu.

Pour les images dans le css je vais m'y pencher un de ces quatres pour faire ça bien.

Et enfin, pour le problème d'affichage de liste sous internet explorer il fallait mettre "display: inline" pour les éléments <li> du menu !