28172 sujets

CSS et mise en forme, CSS3

Compatibilité menu déroulant sous ie7

Salut à tous,

Un menu déroulant à 2 niveaux me pose problème. Il fonctionne parfaitement sous FF et ie6, mais c'est ie7 qui fait des siennes...

Il est en ligne ici :
http://ch0z.net/test/

Pas de js, que du css...

Le bug apparait lorsque vous glissez sur le dernier lien à droite - "expert" - puis sur le sous-lien - "bureau" -.
upload/17538-menuff.png
Sous ie7, un décalage apparait sous le lien le sous-lien - "bureau" -, et le sous-menu déroulé disparaît lorsqu'on continue à glisser vers les liens plus bas.
upload/17538-menuie7.png
J'ai construit ce menu à partir d'un code que j'ai récupéré (où?), son avantage étant de gérer la compatibilité grâce à des commentaires conditionnels :

<li class="top p8"><a href="" class="top_link pos8">lien<!--[if gte IE 7]><!--></a><!--<![endif]-->
			<!--[if lte IE 6]><table><tr><td><![endif]-->


Le menu original ne comportait qu'un sous-menu, c'est en rajoutant un deuxième niveau que le problème apparaît. Quelqu'un y a t'il déjà été confronté? Merci!
Bonjour pr-brna,

Tu as réglé le problème entre temps ?
J'ai a priori le même rendu sur l'ensemble de mes navigateurs (Opera,Safari,FF,IE6 et 7 sous win xp) Smiley eek
Peut-être un problème de cache ?

Quoiqu'il en soit, ce menu semble poser quelques problèmes d'accessibilité (navigation au clavier, desactivation des couleurs ou des images, etc...) bref, tu te prives d'un panel d'utilisateurs non négligeable, c'est dommage non ? Smiley ohwell

Cdt,
Sylvain
la solution -bqui demandait "Juste un poil de réflexion et être aussi tordu qu'IE" merci ghost Smiley cligne -

"rajouter font-size: 0; à :
.nav_principale ul{position:absolute; left:-9999px; top:-9999px;font-size: 0; width:0; height:0; margin:0; padding:0; list-style:none;}
"

cela résoud le décalage sur ie7, le menu est donc maintenant compatible ff, ie6 et 7.

Reste une question que je me pose concernant les commentaires conditionnels inclus dans le html... dans quel but l'auteur du code original les a t'il inclus?


<ul class="nav_principale">
		<li class="top p1"><a href="" class="top_link pos1">1</a></li>
		<li class="top p2"><a href="" class="top_link pos2">2</a></li>
		<li class="top p3"><a href="" class="top_link pos3">3</a></li>
		<li class="top p8"><a href="" class="top_link pos8">4<!--[if gte IE 7]><!--></a><!--<![endif]-->
			<!--[if lte IE 6]><table><tr><td><![endif]-->
			<ul class="pos8sub">
				<li><a href="">1</a></li>
				<li><a href="">2<!--[if gte IE 7]><!--></a><!--<![endif]-->
				<!--[if lte IE 6]><table><tr><td><![endif]-->
					<ul class="pos8sub-2">
						<li><a href="">lien 1</a></li>
						<li><a href="">lien 2</a></li>
						<li><a href="">lien 3</a></li>
					</ul>
					<!--[if lte IE 6]></td></tr></table></a><![endif]-->
				</li>
				<li><a href="">1</a></li>
				<li><a href="">2</a></li>
				<li><a href="">3</a></li>
			</ul>
			<!--[if lte IE 6]></td></tr></table></a><![endif]-->
		</li>		
	</ul>


...c'est, d'une part, la première fois que je vois cette utilisation de commentaires conditionnels ailleurs que dans le <head>... je me demande également quels bug ie6 et 7 il sont censés prévenir?

Un pb d'accessibilité? Je pensais avoir fait le plus dur en me passant de js, et en conservant un menu fonctionnel en cas de désactivation des css. Dans la mesure où un menu en images m'est imposé, il existe une meilleure façon de procéder?

Que de questions... merci de soulever ce point en tout cas... peut-être que si je n'avais pas loupé le "Paris web 2007" ...

Smiley smile
Pierre.
a écrit :
Je pensais avoir fait le plus dur en me passant de js


Attention utilisation de Javascript n'implique pas forcément inaccessibilité et CSS n'implique pas accessibilité ... Smiley ravi

Tout dépend de la façon de faire les choses.
Salut,

A priori les commentaires conditionnels devrait être destinés aux versions < à IE6... Mais bon !

Sinon, accessibilité et commentaires conditionnels ICI
Merci pour le lien mais je n'ai pas trouvé, dans cet article, de référence directe à l'accessibilité. Il y a bien, dans le dernier paragraphe, quelques recommandations quant aux limites et dérives, mais les termes d'accessibilité ou de standards n'apparaissent pas.

De possibles erreurs de parsing (quand un doc XHTML est traité en tant que XML) sont mentionnées, est-ce là que le problème est posé?

J'ai testé l'accessibilité de ce menu (www.ch0z.net/test - toujours le même) sur le validateur Ocawa http://www.ocawa.com/fr/faireaudit.htm, en lui appliquant le rapport "WCAG 1.0 - Priorité 1".

Il ne relève aucun problème.

Débutant sur le sujet (sans blague... Smiley smile ), je ne sais pas ce que vaut ce validateur, mais j'avoue que malgré vos efforts (je vous en remercie) pour me mettre sur la voie, je ne saisi pas ce qui, dans ce menu, pose problème en terme d'accessibilité.

Un nouvel indice?
Modifié par brna (11 Aug 2008 - 09:33)
Bonjour brna,

Les images dont tu te sers dans ton menu sont porteuses de sens puisqu'elles affichent l'intitulé du lien vers lequel elles conduisent, elles devraient se trouver au minimum dans le code html avec une alternative textuelle (balise alt), sans ces images, je n'ai plus accès à l'information (text-indent:-99999px; ça fait loin Smiley cligne )
Le mieux reste d'utiliser ces images en background (sans le texte) et de restituer l'info textuelle dans le html.
C'est un exemple Smiley cligne
Tout ce que veux savoir sur l'accessibilité

Cdt,
Sylvain
a écrit :
Le mieux reste d'utiliser ces images en background (sans le texte) et de restituer l'info textuelle dans le html.


Saisi... donc j'imagine qu'il n'existe pas vraiment de solution"accessible" dans le cas où il faille produire un menu comportant le texte DANS les images?
Sujet clos
Aller à