Problème d'affichage du menu sous IE7

Bonjour,

Lien html
Lien menu_deroulant.js
Lien css interne du menu

Ci-dessous le css de la mise en page générale:

/* Generated by CaScadeS, a stylesheet editor for Mozilla Composer */

  body { margin: 0pt;
    background-image: url(images/fond-1.jpg);
    text-align: center;
    background-color: #33ccff;
    }

  #entete { border-bottom: 2px none #3333ff;
    background-color: transparent;
    background-image: url(../images/fond-1.jpg);
    margin-right: 10px;
    margin-left: 10px;
    text-align: center;
    }

  #texte { border: 3px outset #e0e0e0;
    background-image: url(../images/fond_nb.jpg);
    overflow: hidden;
    margin-top: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
    margin-left: 220px;
    width: 75%;
    }

  #menu { text-align: left;
    float: left;
    position: fixed;
    margin-top: 5px;
    overflow: hidden;
    width: 200px;
    margin-left: 10px;
    }

  #pied { clear: left;
    }

Avec tout cela, sous IE7, le menu se chevauche avec la zone de texte et je n'ai ps la transparence souhaitée du menu déroulant

Peux-t-on m'aider?

merci
Modifié par Boubou57 (10 Jan 2008 - 13:20)

Salut Boubou57 ,

la position:fixed est un peu buguée dans IE7 : soit il faut expressément renseigner le positionnement par rapport à ton viewport (par exemple à l'aide de left:3px), soit, à l'aide de commentaires conditionnels, affecter un margin-left.

A+

Edit: Concernant la transparence, tu peux jeter un œil à cette page de w3schools : CSS Image Opacity / Transparency
Modifié par Heyoan (10 Jan 2008 - 13:46)

Heyoan merci pour la rapidité de ta réponse,

La position est fixe afin de permettre au menu de suivre le scrolling de la page car sur les autres pages de ce site, je risuqe de dépasser fortement la fenêtre de l'écran.
Il faut donc que je trouve une autre solution pour obtenir cet effet...

En fait il n'y a pas de problème à utiliser position:fixed (quitte à adapter pour IE) !

A part bien sûr si l'élément fixé dépasse du viewport... et il se trouve que c'est effectivement ce qui se passe chez moi avec Javascript désactivé (tous les sous-menus sont déroulés et dépassent de la fenêtre sans qu'un scrolling ne soit possible).

Personnellement je ne mets la position à fixed (sauf si l'élément est dans le header) qu'après avoir déterminé via javascript si la taille de l'écran est suffisante pour tout voir !

Sinon, à moins que tes pages ne soient très longues, je ne vois pas de problème à ce que le menu remonte avec le reste de la page . Au pire tu rajoutes un (ou des) lien(s) pour remonter en haut .

A+

Bonjour,

Tiens, ce n'est pas déjà pour ce menu que j'avais dit, il y a quelque jour, qu'utiliser le positionnement fixe était (ou serait éventuellement) une erreur?
Je suis pas écouté, moi.

Non sérieusement, le positionnement fixe est à utiliser avec des pincettes car on peut se retrouver assez vite avec un problème d'accessibilité important (contenus non visibles dans certaines conditions ou avec certaines résolutions).

Ici, le fait que le menu puisse gagner en hauteur de manière assez importante est une contradiction très sérieuse.

Heyoan a écrit :
Personnellement je ne mets la position à fixed (sauf si l'élément est dans le header) qu'après avoir déterminé via javascript si la taille de l'écran est suffisante pour tout voir !

C'est une solution élégante (exemple ici, si je ne m'abuse), il faudra que je retienne l'idée.

Heyoan a écrit :
Sinon, à moins que tes pages ne soient très longues, je ne vois pas de problème à ce que le menu remonte avec le reste de la page . Au pire tu rajoutes un (ou des) lien(s) pour remonter en haut .

+1

Mais c'est qu'il est bien ce petit.


PS: Boubou57, bravo pour les efforts sur le graphisme, on a déjà gagné en lisibilité si je me souviens bien. Ne reste plus qu'à supprimer sans autre forme de procès toutes les images de fond pas tip-top utilisées (et qui ont, comme tous les motifs, la capacité sympathique de réduire la lisibilité du texte), virer le titre de style «WordArt» et le remplacer par la même information, directement dans le code HTML sous la forme d'un h1, et à corriger le texte alternatif du logo qui ne devrait pas dire «logo académique» (information inutile) mais plutôt «Académie Nancy-Metz» (information pertinente).

Florent V. a écrit :
exemple ici, si je ne m'abuse

Tout à fait !

Florent V. a écrit :
+1

Mais c'est qu'il est bien ce petit.

T'as vu un peu ! Petit heyoan deviendra grand pourvu que Dieu (Grand Kiwiz pour les intimes) lui prête vie...

Bonsoir,

merci de votre soutien.

Néanmoins puisque le fait de fixer le menu ne convient pas, je cherche toujours une autre solution pour avoir cet effet, même s'il vous semble désuet

a+