Boites fixes

[marcelman]

A la suite du topic http://www.webmaster-hub.com/index.php?showtopic=46369 où yuston renvoyait aux hack de Nanoum pour avoir des boites fixes sur une page, j'ai commencé à bosser dessus et je rencontre quelques soucis (NB : il s'agit pour moi de remplacer les iframes par des boites fixes sur le site globetrottoirs.com).

D'abord, j'ai un menu déroulant qui avec ce système ne fonctionne pas sous IE alors qu'il fonctionne sous FF.

Un bout de code du menu déroulant :

<div class="menu2"> <!-- menu à gauche de l'écran -->
  <img src="http://www.globetrottoirs.com/images/hautgauche.gif" width="154" height="16" > 
    <div align="center"><img src="http://www.globetrottoirs.com/images/logoanime.gif" width="65" height="65"></div>
    <ul id="nav">
      <li><a href="http://www.globetrottoirs.com/accueil.php"><img src="http://www.globetrottoirs.com/images/titreslaterauxon_11.gif" name="image1" id="image1" border="0"></a></li>

      <li><img src="http://www.globetrottoirs.com/images/titreslaterauxon_13.gif" border="0"> 
        <ul>
          <li><a href="http://www.globetrottoirs.com/compagnie.php"><img src="http://www.globetrottoirs.com/images/soustitres2009off_12.gif" border="0"></a></li>
          <li><a href="http://www.globetrottoirs.com/espritgt.php"><img src="http://www.globetrottoirs.com/images/soustitres2009off_13.gif" border="0"></a></li>
          <li><a href="http://www.globetrottoirs.com/activites.php"><img src="http://www.globetrottoirs.com/images/soustitres2009off_14.gif" border="0"></a></li>
          <li><a href="http://www.globetrottoirs.com/equipegt.php"><img src="http://www.globetrottoirs.com/images/soustitres2009off_15.gif" border="0"></a></li>
        </ul>
      </li>
   </ul> 
</div>

Ensuite, j'ai un problème de positionnement latéral de la boite mobile par rapport à ma boite de gauche. Si je ne précise rien sur la position, tout va bien sous IE, mais sous FF, ça vient se mettre sous mon menu de gauche, si je mets un margin-left:154px, tout va bien sous FF, mais ladite marge se rajoute sous IE...

La définition de menu2 dans lequel se trouve le menu déroulant et la définition de la boite mobile:

.menu2{float:left;width:154px;background:#0066cc;z-index:2; height:95%
position: absolute;
top: 20px;
left: 0;
border-right: solid black 1px}
}
.boite {width:90% ; height:800px ; border:2px solid black}

Et pour finir le hack pour IE, gratté sur Nanoum :

body { /* redéfini les propriétés de toute la page */
overflow-y: hidden ; /* fonction microsoft supprimant les ascenseurs sous IE */
margin: 22px 0% 0% 0%; /* la marge du body est à 0 pixels, sauf à gauche et en haut */
padding:0 } /* marge intérieur à 0 pixels */
html > body {overflow-y: auto} /* annule le overflow-y pour firefox 1.5 et supérieur */

.content { /* boite prenant toute la page sauf le menu rouge */
height: 100%; /* la hauteur de la boite occupe 100% de l'écran */
overflow: auto;} /* on rajoute un ascenseur droit à la boite */

C'est sûrement un truc très con à mettre pour que IE interprète comme FF le code, mais je sèche...