Foros del Web » Creando para Internet » CSS »

Firefox y overflow:auto

Estas en el tema de Firefox y overflow:auto en el foro de CSS en Foros del Web. Buenas gente del CSS Tengo un problema visualizando un DIV con FireFox. esta es la linea del DIV: Código: <div style="width: 100%; height: 100%; overflow: ...
  #1 (permalink)  
Antiguo 18/05/2006, 05:55
Avatar de moNTeZIon  
Fecha de Ingreso: enero-2005
Ubicación: Lliçà de Munt - BCN
Mensajes: 1.625
Antigüedad: 12 años, 11 meses
Puntos: 9
Firefox y overflow:auto

Buenas gente del CSS

Tengo un problema visualizando un DIV con FireFox. esta es la linea del DIV:

Código:
<div style="width: 100%; height: 100%; overflow: auto;">
  <table ...
  </table>
</div>
Este Div está dentro de un TD de una tabla con unas medidas específicas. luego en el DIV uso 100% para que ocupe todo el espacio que ocupa ese TD.

Al alargarse hacia abajo la tabla que contiene el DIV, la teoria del "overflow: auto" dice que debería de aparecer la barra de scroll vertical, de forma que se pueda navegar hacia abajo para ver el resto.

Bien, pues en Explorer funciona de maravilla. en cambio, en Firefox, me estira la capa hasta el final de la tabla interior, y sin mostrar scrolls...

Saben porqué se comporta así en FireFox? Alguna solución?
Gracias a todos

Ah! Por cierto. Si le doy valores fijos en pixels al DIV entonces todo va bien. Pero yo quiero con porcentages, si es posible claro...
__________________
..:: moNTeZIon ::..

Última edición por moNTeZIon; 18/05/2006 a las 10:22
  #2 (permalink)  
Antiguo 18/05/2006, 11:48
 
Fecha de Ingreso: octubre-2005
Mensajes: 536
Antigüedad: 12 años, 1 mes
Puntos: 1
Hola moNTeZlon.

Por la descripción que haces del caso me parece que Firefox hace lo que tu has escrito (en el código) que haga.

Es IE quien lo hace mal.

Lo que pasa es que muchos tomais IE como modelo, y si Firefox lo hace distinto pensais que lo hace mal. No, es IE quien lo hace mal.
  #3 (permalink)  
Antiguo 18/05/2006, 12:07
Avatar de RootK
Moderador
 
Fecha de Ingreso: febrero-2002
Ubicación: México D.F
Mensajes: 8.004
Antigüedad: 15 años, 9 meses
Puntos: 50
Porque no lo haces dandole en pixeles a tu <td> y en porcentaje a tu DIV para que no tengas problemas con FF.

algo así:

Cita:
<tr><td height=400> tamaño en pixeles
<div style="width: 100%; height: 100%; overflow: auto;">
<table ...
</table>
</div>
</td></tr>
....
o todo lo necesitas en porcentaje..??

Salu2
__________________
Nadie roba nada ya que en la vida todo se paga . . .

Exentrit - Soluciones SharePoint & Net
  #4 (permalink)  
Antiguo 18/05/2006, 12:41
 
Fecha de Ingreso: noviembre-2005
Mensajes: 117
Antigüedad: 12 años, 1 mes
Puntos: 0
exacto, si usas PX en vez de % te va a funcionar
  #5 (permalink)  
Antiguo 19/05/2006, 02:46
Avatar de moNTeZIon  
Fecha de Ingreso: enero-2005
Ubicación: Lliçà de Munt - BCN
Mensajes: 1.625
Antigüedad: 12 años, 11 meses
Puntos: 9
Si claro, pero como todos sabeis, no es tan facil como decir, vale, lo cambio a pixels. Si está en porcentage es por un motivo.

Vamos por partes. Jorolo, por mi te puedes ahorrar ese tipo de respuestas, si solamente las vas a usar para decir lo que dices. ¿He comentado que alguien lo hace mal? Busco soluciones, tanto para uno como para el otro. Nos vemos.

RkPost, ya comenté eso que dices más arriba.

RootK, no puedo hcer como me comentas por lo siguiente. El TD que contiene al DIV tampoco es que tenga medidas, ya que lo hago de esta forma:

Código:
<table style="width: 100%"><tr>
  <td style="width: 10px;">&nbsp;</td>
  <td style="width: 50px;">&nbsp;</td>
  <td>
    <div style="width: 100%; height: 100%; overflow: auto;">
      <table ...
      </table>
    </div>
  </td>
</tr></table>
He aqui el problema. Esa celda no tiene medidas, porqué las tiene la tabla al 100% de la pantalla. Entonces, los otros TD de la tabla grande contienen medidas fijas, y ese TD en concreto no tiene medidas, precisamente para que coja el resto de la tabla. Y lo que yo quiero es que el DIV ocupe todo el espacio que ocupa ese TD qu eno tiene medidas.

Espero haberme explicado mejor, a ver si encontramos solución.
Saludos.
__________________
..:: moNTeZIon ::..

Última edición por moNTeZIon; 19/05/2006 a las 05:23
  #6 (permalink)  
Antiguo 19/05/2006, 09:26
Avatar de SiR.CARAJ0DIDA  
Fecha de Ingreso: junio-2004
Ubicación: Acá
Mensajes: 1.166
Antigüedad: 13 años, 5 meses
Puntos: 4
si queres scroll justamente pone overflow:scroll....
__________________
Internet Explorer SuckS
Download FireFox
  #7 (permalink)  
Antiguo 19/05/2006, 09:36
Avatar de moNTeZIon  
Fecha de Ingreso: enero-2005
Ubicación: Lliçà de Munt - BCN
Mensajes: 1.625
Antigüedad: 12 años, 11 meses
Puntos: 9
SiR.CARAJODIDA, joder! bastante jodida!
Si hago lo que comentas, ocurre exactamente el mismo comportamiento, lo único que si muestra las barras de sroll, pero no soluciona el problema.
__________________
..:: moNTeZIon ::..
  #8 (permalink)  
Antiguo 19/05/2006, 10:31
Avatar de moNTeZIon  
Fecha de Ingreso: enero-2005
Ubicación: Lliçà de Munt - BCN
Mensajes: 1.625
Antigüedad: 12 años, 11 meses
Puntos: 9
Haciendo algunas pruebas he llegado a la conclusión de que para poder utilizar width y height con porcentages en un DIV, el TD que lo contiene debe tener especificados su width y su height. Si no, en FireFox, se va de madre, en vez de mostrar el scroll.
Otro detalle es que muchas veces, para no especificar un height en cada TD, lo que hago es ponerle un style="height... al TR para que lo cojan todos los TD. Es una práctica que funciona (la veo bastante lógica) pero no en todos los casos, por ejemplo este.
Le puse un width al TD y un height al TR, y el DIV seguia ampliándose en FireFox, en vez de mostrar el Scroll.
Finalmente, borré el height del TR y se lo puse directamente al TD. Ahora si, puedo emplear porcentajes en el DIV interior y se comporta como esperaba.
En fin, he tenido que especificar tamaños en pixels...

Saludos a todos
__________________
..:: moNTeZIon ::..
  #9 (permalink)  
Antiguo 04/12/2007, 11:46
 
Fecha de Ingreso: junio-2007
Mensajes: 4
Antigüedad: 10 años, 5 meses
Puntos: 0
Re: Firefox y overflow:auto

Cita:
Iniciado por RootK Ver Mensaje
Porque no lo haces dandole en pixeles a tu <td> y en porcentaje a tu DIV para que no tengas problemas con FF.

algo así:



o todo lo necesitas en porcentaje..??

Salu2
mira tengo este ejemplo pero funciona en firefox y en opera safari pero no funciona en ie alguien me puede ayudar con esta solucion

<style type="text/css">
<!--
.text {color: #FFFFFF; font-weight: bold; font-size: 16px; font-family: Geneva, Arial, Helvetica, sans-serif; }
.class{ overflow:auto;overflow-x:hidden; width:100%; padding-right:100px; height:150px; top:40px;}
/*<tbody id="datos" style="height:10px; top:40px; overflow-y:auto;"> */
-->
</style>
<table width="100%" border="1" cellpadding="0" cellspacing="1" bordercolor="#CCCCCC">

<thead>
<tr>
<td width="200" class="text"bgcolor="#003366">Columna Demo 1</td>
<td width="200" class="text" bgcolor="#003366">Columna Demo 2</td>
<td width="200" class="text" bgcolor="#003366">Columna Demo 3</td>
</tr>
</thead>

<tbody id="datos" class="class">
<!--<tbody id="datos" style="height:200px; top:40px; overflow:scroll; width:100%;"> -->
<!--<tbody id="datos" style="height:100px; top:40px; overflow-y:auto;">-->
<tr>
<td>a</td>
<td>1</td>
<td>s</td>
</tr>
<tr>
<td>d</td>
<td>2</td>
<td>f</td>
</tr>
<tr>
<td>a</td>
<td>3</td>
<td>f</td>
</tr>
<tr>
<td>f</td>
<td>4</td>
<td>f</td>
</tr>
<tr>
<td>a</td>
<td>5</td>
<td>s</td>
</tr>
<tr>
<td>d</td>
<td>6</td>
<td>f</td>
</tr>
<tr>
<td>a</td>
<td>7</td>
<td>f</td>
</tr>
<tr>
<td>f</td>
<td>8</td>
<td>f</td>
</tr>
<tr>
<td>a</td>
<td>9</td>
<td>s</td>
</tr>
<tr>
<td>d</td>
<td>10</td>
<td>f</td>
</tr>
<tr>
<td>a</td>
<td>11</td>
<td>f</td>
</tr>
<tr>
<td>f</td>
<td>12</td>
<td>f</td>
</tr>
<tr>
<td>a</td>
<td>13</td>
<td>s</td>
</tr>
<tr>
<td>d</td>
<td>14</td>
<td>f</td>
</tr>
<tr>
<td>a</td>
<td>15</td>
<td>f</td>
</tr>
<tr>
<td>f</td>
<td>16</td>
<td>f</td>
</tr>
</tbody>
</table>
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 17:24.