Menu "décallé" avec IE7

Bonjour la communauté...

Tout d'abord bravo et merci pour toutes les informations et les solutions que l'on peut trouver ici...
Je serai toujours étonnée du temps que certains peuvent passer à aider les autres à régler leurs problèmes... ;-)

Venons en donc au mien...
J'ai pas mal fouillé dans les sujets et dans la faq mais n'ai pas vu de solution pour le pb qui me préoccupe.
Je me permets donc de vous le soumettre ici.

J'ai un petit site sans prétention (c'est le premier... soyez indulgents !!! ;-) avec 6 pages html et une css.
J'ai essayé de faire les choses proprement... à l'aide d'un livre que je trouve assez génial et facile d'accès, mais comme je ne sais pas si je peux en faire la pub, je laisse planer le mystère !!!

Mon problème est le suivant... enfin, j'ai deux petits soucis en fait.

J'ai un menu, constitué de 6 liens qui chainent vers 6 pages différentes à afficher au centre de l'écran (façon frame mais sans frame !!)

Je souhaite que mon menu soit à gauche, avec un fond qui occupe toute la hauteur de l'écran, et la largeur du menu... et que le menu descende en suivant l'ascenceur ou sous l'action de la molette, de façon à toujours être visible à l'écran, même si le visiteur est en bas de la page.

Mes problèmes sont les suivants :

Firefox : tout va bien !!!

IE6 : le menu ne descend pas... on a essayé de m'expliquer que IE6 ne comprend pas la position:fixed et qu'il faut utiliser la position:absolute avec un commentaire spécial dans le code et une feuille de style particulière pour ie6 mais je ne m'en sors pas... je ne sais pas comment "écrire" tout ça en code html... mais bon, ça... ce n'est pas le plus grave...

IE7 (d'après ce que j'ai lu ici, ce navigateur n'a pas bonne presse ;-) et là, le pb est plus embêtant : le menu s'affiche en surimpression sur la page centrale... il devient donc illisible et inutilisable... dommage... plus de navigation possible sur le site...

Si vous avez 5 minutes pour regarder mon code et m'aider... je vous en serais infiniment reconnaissante...

voici le code de ma css pour ce qui est du menu :

#menu {
float:left;
position:fixed;
width:16em;
padding:1em 0 8em 0;
margin:0 0 0 0;
}
#menu ul{
list-style-type:none;
padding:0;
margin:0 1em;
font-size:12px;
}
#menu li a {
display:block;
text-decoration:none;
height:2em;
line-height:3em;
color:#000000;
font-size:12px;
text-indent:1em;
}
#menu li a:hover {
background:url(images/fond_liens_menus.jpg) no-repeat;
color:#ffffff;
text-decoration:none;
}


et celui de mes pages html :


<!--bloc menu -->
<div id="menu">
<ul>
<li><a href="index.htm" accesskey="1">Accueil</a></li>
<li><a href="centre/tarifs.htm" title="tarifs">Tarifs</a></li>
<li><a href="centre/contacts_acces.htm" title="pour nous contacter et nous rejoindre">Contacts-Accès</a></li>
<li><a href="centre/balades_decouvertes.htm" title="balades et découvertes aux rapailles et aux environs">Balades-Découvertes</a></li>
<li><a href="centre/liens_infospratiques.htm" title="infos pratiques et liens intéressants">Liens/Infos pratiques</a></li>
<li><a href="centre/album.htm" title="notre album photo">Album photos</a></li>
</ul>
</div>


Comme je vous le disais, je suis plutôt novice... et je viendrai peut être vous demander des éclaircissements si votre réponse est trop technique pour la débutante que je suis... ce qui serait super, si ce n'est pas trop long ou compliqué, ce serait de m'expliquer le code que je dois mettre et pourquoi...

Pour voir ce que cela donne, c'est par là : https://webespace.pagesperso-orange.fr/lesrapailles/

En attendant je remercie tous ceux qui plancheront sur mon petit exercice...

@ bientôt...