[Resolu] Escaliers menu horizontal IE 6

Bonjour,

je rencontre encore un probleme avec IE > mon menu horizontal (OK sous FF) se met en "escaliers" (il prend quelques pixels vers le bas à chaque <li>.

Ce sera plus clair avec l'exemple en ligne :

http://roger.breskovic.free.fr/pb/pb.html

je mettrais les sources à disposition ici si quelqu'un le demande.

Au passage, si quelqu'un peut me dire ce que cela donne sur IE 7, je le remercie d'avance !
Modifié par Breskovic (27 Aug 2007 - 13:22)

Salut,

Sur IE7 c'est un bel escalier.

Attention sur FF comme IE7, tu as une barre de défilement horizontale du plus bel effet

le site est développé en 1024... demande express du "client".

Merci pour cette mauvaise nouvelle (bug dans IE7 itou).

J'espère vraiment trouver une solution ici, je n'ai vraiment pas envie de retourner à mes mauvais reflexes (la tentation est grande de faire un tableau... honte à moi !)

Salut,

Essaie ce code :

ul#menu {
list-style-type: none;
margin: 0;
padding: 0;
}
ul#menu li {
float: left;
display:block;
}
/* -------------------------------------------------------------   menu ILLU -------------- */
ul#menu li a.illu {
display:block;
height:39px;
width:159px;
background:#f00 url(../img/multi/menu/illu.gif);
}
ul#menu a.illu:hover {
background-image:url(../img/multi/menu/illu_sel.gif);
}
/* -------------------------------------------------------------   menu COM -------------- */
ul#menu li a.com {
display:block;
height:39px;
width:164px;
background:#0f0 url(../img/multi/menu/com.gif);
}
ul#menu a.com:hover {
background-image:url(../img/multi/menu/com_sel.gif);
}
/* -------------------------------------------------------------   menu 3D -------------- */
ul#menu li a.troisd {
display:block;
height:39px;
width:164px;
background:#00f url(../img/multi/menu/troisd.gif);
}
ul#menu a.troisd:hover {
background-image:url(../img/multi/menu/troisd_sel.gif);
}

C'est plus en escalier

Bonjour/bonsoir

le display:block , fait en quelque sorte double emploi avec le float qui est suffissant pour dimensionné un element inline .

Un petit : overflow:hidden; sur ul#menu , permettra d'englober les li et a qui flottent .

Dans ff ou autres , les li etait comme vides , elle ne s'etirait pas avec les <a> en float , IE lui , etiré bien ses <li> , d'ou l'effet d'escalier

GC

Merci beaucoup à vous !

j'ai pû faire un petit test rapide au boulot, et comme toujours sur Alsa, ça roule (en tout cas sur IE7 - au boulot je n'ai que celui-ci...).

Je n'ai pas eu besoin d'utiliser overflow... pour l'instant. Je vais faire test ce soir en ajoutant cette class, ça mepermettra peut-être demieux comprendre.

Merci encore - ça fera toujours un menu en tableau de moins surla toile !