Pb de compatibilité d'un menu déroulant sous ie7

[brna]

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" -.



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.



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 :

Code : Tout sélectionner

<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!

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9.0.1) Gecko/2008070208 Firefox/3.0.1

[Fabrice.Tres.Net]

Vu qu'il y a des tableaux pour les anciennes versions d'IE, je suppose qu'il y a une gestion d'espace entre les cellules, lignes, colonnes différentes.
Essaies de les mettre à 0 à coup de CSS
Pareil pour les bordures.

[brna]

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

"rajouter font-size: 0; à :

Code : Tout sélectionner

.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?

Code : Tout sélectionner

<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>

...raison pour laquelle j'imagine que tu proposais un reset des tableaux, cellules etc... tu saurais quel bug ie6 et 7 ils (commentaires conditionnels) étaient censés prévenir?


Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9.0.1) Gecko/2008070208 Firefox/3.0.1

[Asumbaa]

Salut,

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?

A priori c'est parce que IE7, contrairement à ses petits frères, sait gérer le :hover sur autre chose que les liens.
En revanche pour l'utilisation des table, je ne vois pas.

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9) Gecko/2008052906 Firefox/3.0