overflow auto et IE6 : débordement de div

overflow auto et IE6 : débordement de div - HTML/CSS - Programmation

Marsh Posté le 22-07-2008 à 17:50:01    

Bonjour,
 
 je fais un site dont l'architecture est la suivante :
 - un cadre en haut avec une hauteur fixe et une largeur de 100%
 - un cadre à gauche (sur lequel est positionné un menu en flash) avec une hauteur de 100% et une largeur fixe
 - un cadre central , avec un scroll "auto",(qui sera alimenté à partir du menu flash et d'un code ajax) de largeur égale à 100% moins la largeur du cadre gauche, et une hauteur égale à 100% moins la hauteur du cadre en haut
 
 La contrainte est que le site doit être compatible quelque soit la résolution et pour firefox, IE6 et IE7.
 Or tout fonctionne sous firefox et IE7 mais il y a un décalage sous IE6.  
 En fait, lorsque la page chargée dans le cadre central fait apparaître un scroll dans firefox et IE7, IE6 ne le gère pas de la même façon, il utilise le scroll du navigateur et donc la page "déborde" du cadre.
 
 Voici le code HTML :

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <title>-TITRE-</title>
  6. <link rel="shortcut icon" href="favicon.ico" />
  7. <link href="style_abso.css" rel="stylesheet" type="text/css" />
  8. <script type="text/javascript" language="javascript">AC_FL_RunContent = 0;</script>
  9. <script src="AC_RunActiveContent.js" type="text/javascript" language="javascript"></script>
  10. <script src="code_ajax.js" type="text/javascript" language="javascript"></script>
  11. </head>
  13. <body>
  15. <!-- début cadre logo -->
  16. <div id="cadre_logo"><img src="images/logo.gif" alt="" /></div>
  17. <!-- fin cadre logo -->
  19. <!-- début cadre haut -->
  20. <div id="cadre_haut"><img class="img_haut" src="images/barre_bleue.gif" alt="" /></div>
  21. <!-- fin cadre haut -->
  23. <!-- début cadre gauche -->
  24. <div id="cadre_gauche"></div>
  25. <!-- fin cadre gauche -->
  27. <!-- début menu gauche -->
  28. <div id="menu_flash"><script src="menu.js" type="text/javascript" language="javascript"></script></div>
  29. <!-- fin menu gauche -->
  31. <!-- début cadre centre rempli à partir du menu flash et du code ajax-->
  32. <div id="cadre_centre"></div>
  33. <!-- fin cadre centre -->
  35. </body>
  37. </html>


 
et le code CSS :
 

Code :
  1. html, body {
  2.         height:100%;
  3.         width:100%;
  4.         min-width:600px;
  5.         background-color:#000000;
  6.         font-family:Arial, Helvetica, sans-serif;
  7.         color:#FFFFFF;
  8.         font-size:14px;
  9.         padding:0px;
  10.         margin:0px;
  11. }
  13. #pageindex {
  14.         position:absolute;
  15.         left:50%;
  16.         top:50%;
  17.         width:650px;
  18.         height:450px;
  19.         margin-top:-225px; /* moitié de la hauteur */
  20.         margin-left:-325px; /* moitié de la largeur */
  21. }
  23. .img_index {
  24.         border:none;
  25. }
  27. #cadre_gauche {
  28.         position:absolute;
  29.         background-color:#333333;
  30.         left:0px;
  31.         top:0px;
  32.         width:120px;
  33.         height:100%;
  34.         z-index:1;
  35. }
  37. #cadre_logo {
  38.         position:absolute;
  39.         left:0px;
  40.         top:0px;
  41.         width:335px;
  42.         height:120px;
  43.         z-index:3;
  44. }
  46. #cadre_haut {
  47.         position:absolute;
  48.         left:0px;
  49.         top:0px;
  50.         width:100%;
  51.         height:50px;
  52.         z-index:2;
  53. }
  55. .img_haut {
  56.         height:120px;
  57.         width:100%;
  58. }
  60. #menu_flash {
  61.         position:absolute;
  62.         left:3px;
  63.         top:130px;
  64.         width:114px;
  65.         height:265px;
  66.         z-index:3;
  67. }
  69. #cadre_centre {
  70.         position:absolute;
  71.         background-color:#000000;
  72.         margin-left:130px;
  73.         margin-top:130px;
  74.         margin-right:10px;
  75.         margin-bottom:10px;
  76.         z-index:4;
  77.         overflow:auto;
  78. }
  80. .style_titre {
  81.         color:#333333;
  82.         font-size:16px;
  83.         font-weight:bold;
  84. }


 
J'ai effectué pas mal de recherche mais je n'arrive pas à résoudre ce problème.
 D'ailleurs, ce que je souhaite ressemble à un modèle fourni sur alsacreations http://css.alsacreations.com/modeles/modele12.htm , mais avec une hauteur qui varie en fonction de la résolution.
 
 J'ai également essayé de générer dynamiquement en fonction de la taille de la fenêtre active, un CSS différent pour IE6. Cela fonctionne, mais uniquement si l'utilisateur ne redimensionne pas la fenêtre. Auquel cas, le cadre central ne s'adapte pas.
 
 Y a t-il une solution?
 
 Merci.

Reply

Marsh Posté le 22-07-2008 à 17:50:01   

Reply

Marsh Posté le 22-07-2008 à 23:22:17    

Si tu mets une hauteur à 100% à body (au passage pourquoi une largeur à 100% ?), IE6 ne va pas comprendre et va continuer à augmenter la hauteur de body tant que tu restes sur la page (ça se voit à la barre de scroll qui diminue).
Pourquoi tout positionner en absolu ?

Reply

Marsh Posté le 23-07-2008 à 14:28:38    

Bonjour gebruik,
 
en fait si j'enlève height:100%; dans le body, le cadre à gauche (celui du menu) disparaît sous IE6 ! J'avais trouvé cette solution sur le net...
J'ai tout positionné en absolu parce que sinon les cadres étaient positionnés n'importe comment  :??:  
Je débute en CSS, alors je m'y prend peut-être mal...
Comment penses-tu que je devrais positionner mes cadres?
 
Merci.

Message cité 1 fois
Reply

Marsh Posté le 24-07-2008 à 04:45:07    

dede2a a écrit :

Bonjour gebruik,
 
en fait si j'enlève height:100%; dans le body, le cadre à gauche (celui du menu) disparaît sous IE6 ! J'avais trouvé cette solution sur le net...


 
pour eviter le probleme que gebruik souligne remplace
height:100%;
par  
zoom:1;
 
sinon le positionnement en absolute c est vraiment degueu essaie plutot des float


---------------
« The enemy is the gramophone mind, whether or not one agrees with the record that is being played at the moment. » — George Orwell
Reply

Marsh Posté le 24-07-2008 à 17:17:57    

Merci mIRROR pour ton aide, mais ça ne fonctionne pas chez moi.
 
Mais ce n'est pas grave, "j'ai" trouvé une autre solution (merci C_S_S  ;) ). Si ça interresse quelqu'un qu'il me fasse signe.

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed