Bug dropdown menu sous IE 7

Bonjour à tous, je conçois actuellement un menu déroulante horizontale pour un des sites de ma boîte, il fonctionne parfaitement sous, safari, firefox, IE 8 mais pas sous IE 7

Je vous joint-ci contre les capture du rendu ains que le code source associé.
Je me suis basé sur aucun menu existant.

html :

<div id="menu_item">
	<ul class="dropdown" id="list_menu_item">
		<li class="lnkpart">
			<a title="Accueil vidéo karaoké" href="/">
				<img height="27" width="94" alt="Playback karaoké audio" src="/i/str/kvtabmenu-kvtabmenu_mp3_hover-fr.png" id="kvtabmenu_mp3" class="tabmnu_i"/>
			</a>
			<ul class="mp3">
				<li class="header"><div></div></li>
				<li><a href="./">Menu sans taille fixe blablabla</a></li>
				<li><a href="./">test2</a></li>
				<li><a href="./">test3</a></li>
				<li class="footer"><div><div></div></div></li>
			</ul>
		</li>
		<li class="lnkpart">
			<a title="" href="/playback-personnalise/">
				<img height="27" width="152" alt="Playback sur mesure" src="http://version-karaoke.fr.pc-fab.office/i/str/kvtabmenu-kvtabmenu_custom-fr.png" id="kvtabmenu_custom" class="tabmnu_i"/>
			</a>
		</li>
		<li class="lnkpart">
			<a title="Accueil vidéo karaoké" href="/karaoke/">
				<img height="27" width="62" alt="Accueil vidéo karaoké" src="/i/str/kvtabmenu-kvtabmenu_karaoke-fr.png" id="kvtabmenu_karaoke" class="tabmnu_i"/>
			</a>
		</li>
	</ul>
</div>

ul.dropdown {
 position: relative;
 z-index: 597;
 float: left;
}

ul.dropdown,
ul.dropdown li,
ul.dropdown ul {
 list-style: none;
 margin: 0;
 padding: 0;
}

ul.dropdown li.lnkpart{
  margin-right:5px;
	padding-top:5px;
	height:27px;
	float:left;
}

ul.dropdown li a,
ul.dropdown ul li a
{
	display:block;
	color:white;
	text-decoration:none;
}

ul.dropdown li a.helppopup_lnk {
	display:inline;
	color:white;
}

ul.dropdown ul li {
	margin-right:0px;
	line-height: 1.3em;
	vertical-align: middle;
	padding:2px 5px 2px 5px;
	zoom:1;
	white-space:nowrap;
}

ul.dropdown ul li.footer{height:5px;padding:0px;margin:0px 5px 0px 5px;font-size:1px;}
/* coin inférieur gauche */
ul.dropdown ul li.footer div{height:5px;background:url(/i/tpl/dd_corner.png) 0px -5px no-repeat;margin-left:-5px;}
/* coin inférieur droit */
ul.dropdown ul li.footer div div{float:right;background:url(/i/tpl/dd_corner.png) -5px -5px no-repeat;width:5px;height:5px;margin-right:-5px;}


ul.dropdown ul li.header{height:5px;padding:0px;margin:0px;font-size:1px;}
/* coin supérieur droit */
ul.dropdown ul li.header div{float:right;background:url(/i/tpl/dd_corner.png) -5px 0px no-repeat;width:5px;height:5px;}

ul.dropdown li.hover,
ul.dropdown li:hover {
 position: relative;
 z-index: 599;
 cursor: default;
}

ul.dropdown ul {
 visibility: hidden;
 position: absolute;
 top: 100%;
 left: 0;
 z-index: 598;
}

ul.dropdown ul.mp3 li{ background-color:#2795D5;}
ul.dropdown ul.custom li{ background-color:#DF0089;}
ul.dropdown ul.karaoke li{ background-color:#FFA900;}

ul.dropdown li:hover > ul {
 visibility: visible;
}

rendu correcte :


rendu incorrect :


Le problème c'est que sous IE 7 les li du sous menu occupent pas la place disponible (100%) j'ai remarqué que si je retire le "zoom:1" (qui permet de spécifier hasLayout) afin que le sous menu ne se referme pas quand on passe la souris dessus, donc il est important, je pourrias mettre autre chose si je veux comme [code=css]display:inline-block[code]

Avez-vous une idée ?
Modifié par fryck (20 Jul 2009 - 16:09)

Bah disons que c'est un site pro dans un environnement de dev, et j'peut pas filer même l'URL du serveur de test, donc c'est un peu embêtant.
a la rigueur avec le code source que j'ai joint c'est possible de reproduire assez rapidement, JE PENSE.

Arf, je suis en train de capter que ton problème est sous IE7. Le flemme de démarrer vmware à l'heure qu'il est... Je teste ça demain au taff si tu n'as toujours pas résolu ton problème.

En attendant, essais de mettre quelque chose comme

ul.dropdown ul.mp3 li {
    width:100%;
}

Et une petite idée à tester qui me passe par la tête :

ul.dropdown ul.mp3 li { 
    display:block;
    width:100%; 
}

bonjour,

peut-etre faut t-il ajuster le zoom:1 a ul et li (en sous liste) , garder la liste principale en float en conservant celle-ci comme referant de positionement (position:relatif) , ne pas appliqué ce positionement relatif au li auxquels tu donnes une hauteur (serait preferable un min-height en fait) , un effet de cloisonnement dans IE , risque de rendre le sous-menu irrémédiablement invisible .

Ensuite , la valeur top de ul (en positionement absolu) ne devrait pas etre superieur a la hauteur du li parent , (prevoir - 1px de moins pour plaire a IE) l'ecart , provoque un trou , ... la liste n'est plus survolé et la liste enfant pas encore ... le menu se referme donc logiquement .

recapitulons
ul.parent: float + position:relative;

li : float + min-height

li ul (top = min-height li - 1px)
li ul et li ul li : zoom:1;

Ceci devrait fonctionné un peu mieux ,

Cependant le plus simple a géré est de fixer une largeur au li et sous-liste , du moins pour les versions IE7 et moins .

float + encore float + relatif/absolue + contexte de formatage = fluidité instable au rdv !

Il y a trop de corrections qui s'imbrique pour obtenir un resultat solide , mieux vaut servir un truc solide et une alternative legerement differente pour IE.

Il m'a etait dernièrement conseillé de faire usage de la librairie jquery et de son plugin suckerfish , qui donne de joli resultat .

voir : http://users.tpg.com.au/j_birch/plugins/superfish/#sample5

(j'ai personellement pris l'option de faire un js plus leger , car rien d'autre ne justifier l'usage d'un framework php , je n'inbrique pas non plus des listes dans une liste mais je fait un conteneur et un titre par liste , beaucoup plus aisé a styler et decorer ).

Ce ne sont que des conseils perso , peut-etre pas ceux qui te conviendrons le mieux , il est parfois bon d'effacer et de recommencer , histoire de decrocher d'une idée ou d'une bête erreur que l'on repete.

GC

Merci gc-nomade pour ta réponse, je ne l'ai pas encore lu
Voilà, merci à vous.
Modifié par fryck (07 Sep 2009 - 12:21)

Ton alternative de Jquery est pas possible, c'est un gros si e-commerce avec beaucoup de traffic nous avons déjà le framework prototype.js qui tourne plus nos libraries à nous, on peut pas se permettre de rajouter un framework pour un dropdown, de plus on a choisi de faire en full CSS.

Sinon tes pistes au dessus, j'avoue que je n'y crois pas vraiment, le problème est du au fait que je veux une sous liste sans largeur fixe, mais qui est imbriqué dans un LI déjà qui lui à une largeur fixe, donc pour ça j'ai mi un white-space: nowrap pour le forcer, mais apparement IE ne prend pas bien en compte la nouvelle taille du sous UL, bref je suis sur que certains de ce forum on déjà eu un problème similaire, c'est pour cela que je post.

En même temps y'a pas énormement d'alternative quand c'est du full CSS sachant qu'on doit bénéficier du li:hover ou du a:hover (je sais que le li:hover est pas pris en compte sur IE 6, mais on s'en fous, les gens auront pas de sous menu, c'est pas bien grave, c'est un choix).
Modifié par fryck (21 Jul 2009 - 09:57)

bonjour,

en reprenant les idées données et aprés test avec IE8 en mode IE7 , cela fonctionne.
seul l'image .tabmnu_i est a positionné en display:block , pour replacé le sous menu .

La difference est que les sous-menu dans IE7 prennent la largeur du menu parent. (d'ou l'usage du float pour eviter de prendre la largeur de la page).

petite image pour montré le resultat (copie rapatrié incomplete , mais le comportement sous IE7 est la )


++

comme conseillé , le positionement relatif au parent ul et pas li direct , la largeur du menu est justement lié au comportement de IE7.
Le comportement reste inchangé dans les autres navigateurs.

En gros , il y a un moment ou il faut se plier au navigateur.

Par ailleurs , le manque de largeur définie sur le ul ul peut lancer IE en boucle infini si un width:100% est appliqué a <li> ou <a> enfant , avec pour effet de "freezer IE . (probleme deja evoqué au moins une fois sur le forum ).

bonne chance.

J'aurais préféré que tu donnes juste le code que tu à modifier, car il suffit que j'interprète mal ce que tu dit ou alors que tu t'exprime mal pour que je passe plus de temps que prévu alors que ça pourrait aller très vite.
merci

:)

En fait , l'idéal serait que tu comprennes bien ce qu'il se passe pour ton menu ,
par ailleurs , sans avoir insister , je t'ai aussi conseiller de regarder vers une architecture differentes (pas de liste imbriquée , mais des div , titre et liste qui se suivent)

Pourquoi ? justement pour ne gerer le comportement d'affichage que sur un seul block et ainsi t'affranchir de l'heritage du parent , qui ne causera plus de soucis de largeur dans IE7.
Plutot que de chercher a afficher un ul contenu dans un li , il est plus simple d'acceder a un div enfant contenu dans div.

<div parent>
<div block>
  <hn ou p><img>
  <div vu_pasvu en absolu > liste liens dans un flux normal eventuellement en relatif a l'affichage</div>
</div>

...etc
</div>
 

Chaque block devient independant et réutilisable.
Les style seront eux aussi plus facile a appliquer et moins sujet au bug , independant les uns des autres.

suit cette piste plutot

Oui mais si je pars sur cette méthode je devrais utiliser javascript obligatoirement, car aucun élément parent dans ton exemple à un attribute :hover.