[résolu] Menu vertical sous IE6

Bonjour,

Dans mon site Fireworks Zone, j'ai installé un menu vertical dans la colonne de gauche.

Ce menu qui provient du site Mozilla.org a été testé avant de l'installer sur mon site et tout est ok sous Firefox ainsi que sous IE. D'ailleurs vous pouvez le voir en dehors du site: http://www.fireworkszone.com/css/mozilla/

Maintenant qu'il est installé sur mon site, sous Firefox je n'ai toujours aucun problème mais sous IE6 le comportement du menu est pour le moins étrange comme vous pouvez le constater si vous visitez mon site. Les couleurs n'apparaissent pas ou alors que qu'en bas. Je m'arrache les cheveux (enfin ce qui en reste) sur ce problème depuis deux jours déjà.

Je vous signale que mon site est tiré du modèle skidoo: Rutharian Layouts http://webhost.bridgew.edu/etribou/layouts/skidoo/

Enfin, vous pouvez accéder aux feuilles de style du site à l'adresse suivante: http://www.fireworkszone.com/css/

J'aimerais savoir pourquoi ce menu vertical ne pose aucun problème sous IE en dehors du site et qu'une fois placé dans le site il pose problème. Pour expérience, j'ai testé le même menu avec un autre modèle de site: holy grail (Alistapart) et le résultat n'est guère mieux.

Merci
Modifié par fireworkszone (16 Jun 2006 - 09:35)

Salut,

Problème classique avec IE. Ajouter zoom:1; à #nav li a devrait suffire.
Pour des infos et d'autres solutions : http://www.test.blog-and-blues.org/haslayout/trad_temp.html
Modifié par Alan (15 Jun 2006 - 23:37)

Merci mille fois pour ta réponse Alan, le résultat est impressionnat: tout le menu s'affiche (enfin) sous IE6.

Je ne connaissais pas ce hack (zoom 1) et je ne l'ai jamais vu dans aucune des feuilles de style que j'ai étudié.

Mais je ne m'explique toujours pas pourquoi l'affichage du menu est correct en dehors du site et que le bug apparaît dans le site? Peut être que tu as un élément de réponse.

merci encore

Salut,

Zoom n'est pas un hack mais une propriété Microsoft. On l'occurence on l'utilise pour doter un élément de layout, mais on peut aussi bien utiliser d'autres propriétés.

Le menu que tu as isolé, et qui semble ne pas poser problème, a déjà un bug en réalité. Pour couvrir ce bug, display:inline a été utilisé sur LI. Si tu l'enlèves, tu verras que le menu s'affiche mal sur IE.
Le problème correspondant à celui-ci : http://www.test.blog-and-blues.org/haslayout/tests/list5.html

Mais si tu ajoutes ne serait-ce qu'un div autour du menu et que tu dotes ce div de layout (avec width:100% par exemple), tu constateras alors que ce display:inline est insuffisant car le lien n'est plus cliquable qu'au niveau du texte, et non plus au niveau de l'élément A.
Modifié par Alan (16 Jun 2006 - 14:16)

Merci Alan pour tes explications. J'ai lu avec bcq d'intérêt ton article que tu as traduit et ça explique bcq de choses.

Après lecture je comprends mieux pourquoi les listes ordonnées sur mon site ont un problème. En effet, les nombres 1, 2, 3, 4, etc. n'apparaissent pas. Voir exemple:

http://www.fireworkszone.com/index.php?root=2&extension=1&idTutorial=156

Donc si je comprends bien j'ai ma liste ordonée:

<ol>
<li>item 1</li>
<li>item 1</li>
</ol>

mais je comprends pas ce que je peux faire pour faire apparaître le compteur (1, 2, 3, 4 etc.).

J'ai essayé

ol li {width: 500px;} mais sans résultat

fireworkszone a écrit :
Merci Alan pour tes explications. J'ai lu avec bcq d'intérêt ton article que tu as traduit et ça explique bcq de choses.

Non non, je ne l'ai pas du tout traduit, c'est Laurent Denis. « Blog & Blues » est son site.

Pour ton problème, ce n'est pas lié. Il faudrait que tu ajoutes du padding-left à #tutorial ol (ou du margin-left mais sans centrer dans ce cas)
Modifié par Alan (16 Jun 2006 - 15:16)

Alan,

J'ai ajouté un padding-left et un border aussi :

#tutorial ol {
padding-left: 60px;
border: 1px solid #D9D9D9;
}

Mais le compteur n'apparaît toujours pas comme tu peux le constater:

http://www.fireworkszone.com/index.php?root=2&extension=1&idTutorial=156[/url]

Je viens de constater que même dans Firefox le compteur n'apparaît pas.



Modifié par fireworkszone (16 Jun 2006 - 15:48)

Ok, quand j'ai conseillé d'ajouter du padding-left, ça ne voulait pas dire retirer tout le reste
Si tu donnes un padding-left, il faut au moins que tu précises une marge, ne serait-ce que de zéro. Ou alors tu ne définies ni padding, margin. Cf. ici pour la raison.

Sinon je te signale qu'en bas de "base.css" il y a le code suivant :

ol li {
display: inline;
/* for IE5 and IE6 */	
padding: 10px;
}

Avec ce display:inline; tu ne risques plus d'avoir de numérotation... (y était-il tout à l'heure ???)
Donc si ce code ne sert à rien, tu le supprimes, s'il est utile, il faudra repréciser :

#tutorial ol li {display: list-item;}

Modifié par Alan (16 Jun 2006 - 16:47)

Alan,

C'est super ça marche :

#tutorial ol li {display: list-item;}

Mais j'ai l'impression de ne plus rien connaître aux feuilles de style. Merci encore une fois.

J'ai un dernier élément qui n'apparait pas bien dans IE à l'intérieur de la <div id="tutorial"> c'est l'image de fond + couleur de fond.

#tutorial h1 {
color: #DB00A4;
font: bold 1.2em Georgia, Arial, Helvetica, sans-serif;
background: #E5F6FB url("http://www.fireworkszone.com/pictures/icons/fireworks_extensions.gif") no-repeat 1% 50%;
padding: 10px 0 10px 30px;
letter-spacing: 4px;
text-transform: uppercase;
border-top: 5px solid #F1FBFC;
border-bottom: 2px solid #ADE4F8;
margin-bottom: 2em;
}

XHTML
<h1><?php echo $unTutorial->nom?></h1>

Voilà !

Oui dans ce cas il faut que tu dotes #tutotial h1 de layout. En général c'est le cas pour les disparitions suspectes

Excuse moi Alan mais en clair que dois je ajouter à #tutotial h1 ?

Tu peux ajouter de nouveau zoom:1, ou un height, ou un width..., comme tu veux. Bref une propriété qui donne le layout (cf la liste dans l'article)
Modifié par Alan (16 Jun 2006 - 23:05)

Merci Alan, c'est magique

J'ai ajouté la valeur : height: 1%; et tout s'affiche sous IE maintenant

Bon travail !