Tema: Problemas con overflow en IE7
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 31/01/2013, 04:15
DoHITB
 
Fecha de Ingreso: abril-2012
Ubicación: 41°37′00″N, 00°37′00″E
Mensajes: 462
Antigüedad: 12 años, 1 mes
Puntos: 33
Problemas con overflow en IE7
Buenas!

A ver si me podéis decir qué le pasa a este fragmento... En todos los navegadores (menos IE7) me crea un div, con otro div dentro. El div de fuera no tiene scroll, mientras que el interno si.

En cambio, en IE 7 me corta el div interno y el resto me lo deja todo visible...

Entonces, primero cargo una página "general":

Código PHP: 
Ver original
  1. <body bgcolor="#FFF">
  2.     <div class="main" id="main">
  3. <?php
  4. $hl = new HeaderLayout('login');
  5. $fl = new FooterLayout('');
  6.  
  7. echo($hl);
  8. ?>
  9. <div class="content">
  10.     <div class="contentLayer">
  11.         <div class="contentLayerBar"><span id="CLBText"></span></div>
  12.         <div class="contentLayerContent">
  13.             <div id="G_F_C"></div>
  14.         </div>
  15.     </div>
  16. </div>
  17. <?php
  18. //echo($GIC);
  19. echo($fl);
  20.  
  21. echo('<script type="text/javascript">setTitle("'.$f[$GET['p']][2].'");</script>');
  22. echo('<script type="text/javascript">get("G_F_C", "k='.$f[$GET['p']][0].'");</script>');
  23.  
  24. if(isset($_SESSION['user']))
  25.     echo('<script type="text/javascript">del("G_I_F")</script>');
  26.     
  27. if($f[$GET['p']][0] == 0)
  28.     echo('<script type="text/javascript">document.getElementById("G_F_C").style.overflowY="hidden";</script>');
  29. ?>
  30. </div>
  31. </body>

con la función "get", en este caso, tomo el contenido de una página "sample" (por así llamarla) en mi servidor. Éste es el código:

Código HTML: 
Ver original
  1. <div id="G_F_C_q">
  2.     <div class="qTitle">List of Questions:</div>
  3.     <div class="qText">
  4.         <div class="qTTSpecial" onclick="showInfo(1);" id="qTT_1" style="z-index:1;">TEXTO</div>
  5.         <div class="qTT" onclick="showInfo(2);" id="qTT_2" style="z-index:2;">TEXTO</div>
  6.         <div class="qTT" onclick="showInfo(3);" id="qTT_3" style="z-index:3;">TEXTO</div>
  7.         <div class="qTT" onclick="showInfo(4);" id="qTT_4" style="z-index:4;">TEXTO</div>
  8.         <div class="qTT" onclick="showInfo(5);" id="qTT_5" style="z-index:5;">TEXTO</div>
  9.         <div class="qTT" onclick="showInfo(6);" id="qTT_6" style="z-index:6;">TEXTO</div>
  10.         <div class="qTT" onclick="showInfo(7);" id="qTT_7" style="z-index:7;">TEXTO<div>
  11.         <div class="qTT" onclick="showInfo(8);" id="qTT_8" style="z-index:8;">TEXTO</div>
  12.         <div class="qTT" onclick="showInfo(9);" id="qTT_9" style="z-index:9;">TEXTO</div>
  13.         <div class="qTT" onclick="showInfo(10);" id="qTT_10" style="z-index:10;">TEXTO</div>
  14.         <div class="qTT" onclick="showInfo(11);" id="qTT_11" style="z-index:11;">TEXTO</div>
  15.         <div class="qTT" onclick="showInfo(12);" id="qTT_12" style="z-index:12;">TEXTO</div>
  16.         <div class="qTT" onclick="showInfo(13);" id="qTT_13" style="z-index:13;">TEXTO</div>
  17.         <div class="qTT" onclick="showInfo(14);" id="qTT_14" style="z-index:14;">TEXTO</div>
  18.         <div class="qTT" onclick="showInfo(15);" id="qTT_15" style="z-index:15;">TEXTO</div>
  19.         <div class="qTT" onclick="showInfo(18);" id="qTT_18" style="z-index:18;">TEXTO</div>
  20.         <div class="qTT" onclick="showInfo(16);" id="qTT_16" style="z-index:16;">TEXTO</div>
  21.         <div class="qTT" onclick="showInfo(17);" id="qTT_17" style="z-index:17;">TEXTO</div>
  22.         <div class="qTT" onclick="showInfo(19);" id="qTT_19" style="z-index:19;">TEXTO</div>
  23.         <div class="qTT" onclick="showInfo(21);" id="qTT_21" style="z-index:21;">TEXTO</div>
  24.         <div class="qTT" onclick="showInfo(22);" id="qTT_22" style="z-index:22;">TEXTO</div>
  25.         <div class="qTT" onclick="showInfo(24);" id="qTT_24" style="z-index:24;">TEXTO</div>
  26.         <div class="qTT" onclick="showInfo(20);" id="qTT_20" style="z-index:20;">TEXTO</div>
  27.         <div class="qTT" onclick="showInfo(23);" id="qTT_23" style="z-index:23;">TEXTO</div>
  28.     </div>
  29. </div>
  30.  
  31. <div id="G_F_C_a"></div>

Este HTML queda dentro de G_F_C.

Luego, como se ve, escondo el overflow-Y de G_F_C (ya que G_F_C_q tiene overflow-y:auto).

Dejo también el CSS:

Código CSS: 
Ver original
  1. #G_F_C{
  2.     width:980px;
  3.     height:420px;
  4.     padding:10px;
  5.     text-align:justify;
  6.     overflow-y:auto;
  7.     overflow-x:hidden;
  8. }
  9.  
  10. #G_F_C_q{
  11.     width:487px;
  12.     height:420px;
  13.     overflow-x:hidden;
  14.     overflow-y:auto;
  15. }
  16.  
  17. #G_F_C_a{
  18.     top:-420px;
  19.     left:490px;
  20.     width:477px;
  21.     height:420px;
  22.     position:relative;
  23.     border-left:1px solid #002060;
  24.     overflow-x:hidden;
  25.     overflow-y:auto;
  26.     padding-left:10px;
  27.     padding-right:10px;
  28. }
  29.  
  30. .qTitle{
  31.     font-weight:700;
  32.     text-decoration:underline;
  33. }
  34.  
  35. .qTT{
  36.     color:#002060;
  37. }
  38.  
  39. .qTTSpecial{
  40.     font-weight:700;
  41.     color:#002060;
  42. }
  43.  
  44. .qTT:hover, .qTTSpecial:hover{
  45.     color:#999;
  46.     cursor:pointer;
  47. }
  48.  
  49. .qText{
  50.     top:20px;
  51.     position:relative;
  52.     line-height:25px;
  53. }

Y en IE7, solo me "hace scroll" el div "qTitle", el resto me sale todo por encima (sin scroll).

¿Qué me estoy dejando?

Saludos