Firefox y overflow:auto

[moNTeZIon]

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...

[Jorolo]

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.

[RootK]

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í:

<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

[rkpost]

exacto, si usas PX en vez de % te va a funcionar

[moNTeZIon]

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.

[SiR.CARAJ0DIDA]

si queres scroll justamente pone overflow:scroll....

[moNTeZIon]

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]

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

[fuentessoft]

Iniciado por RootK

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>