Tablas de alto 100% en IE y FireFox

Phoncadiz · #1 (**permalink**) 24/05/2007, 10:36

Probad este código un momento en IE y FireFox

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Prueba</title>
<style type="text/css">
<!--
html, body {margin:0px;height:100%}
-->
</style>
</head>

<body>
<table width="1003" border="0" cellpadding="0" cellspacing="0" bgcolor="#CCCCCC" style="height:100%">
  <tr>
    <td width="772" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0" style="height:100%">
      <tr>
        <td height="25" bgcolor="#DFFFDF">Fila1</td>
      </tr>
      <tr>
        <td bgcolor="#E8FDFD">Fila2</td>
      </tr>
      <tr>
        <td bgcolor="#F9E0FC">Fila3</td>
      </tr>
      <tr>
        <td bgcolor="#F4F9D2">Fila4</td>
      </tr>
      <tr>
        <td bgcolor="#FDE2D7">Fila5</td>
      </tr>
    </table></td>
    <td width="231" valign="top">&nbsp;</td>
  </tr>
</table>
</body>
</html>

¿Por qué en IE no se ve la tabla interior al 100% de alto y en FireFox si? ¿Qué otra forma algo más profesional debería de usar?

Gracias foreros.

fearlex · #2 (**permalink**) 24/05/2007, 12:01

Necesitas ponerle otro estilo en el td, que contiene la segunda table, de lo contrario no crecera en IE, recuerda que todos los navegadores interpretan de diferente forma tanto el html como el css.

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Prueba</title>
<style type="text/css">
<!--
html, body {margin:0px;height:100%}
-->
</style>
</head>

<body>
<table width="1003" border="0" cellpadding="0" cellspacing="0" bgcolor="#CCCCCC" style="height:100%">
  <tr>
    <td width="772" valign="top" style="height:100%"><table width="100%" border="0" cellspacing="0" cellpadding="0" style="height:100%">
      <tr>
        <td height="25" bgcolor="#DFFFDF">Fila1</td>
      </tr>
      <tr>
        <td bgcolor="#E8FDFD">Fila2</td>
      </tr>
      <tr>
        <td bgcolor="#F9E0FC">Fila3</td>
      </tr>
      <tr>
        <td bgcolor="#F4F9D2">Fila4</td>
      </tr>
      <tr>
        <td bgcolor="#FDE2D7">Fila5</td>
      </tr>
    </table></td>
    <td width="231" valign="top">&nbsp;</td>
  </tr>
</table>
</body>
</html>

Espero haberte ayudado

Phoncadiz · #3 (**permalink**) 24/05/2007, 14:25

Por supuesto que me has ayudado, pero ahora me he encontrado con otro problema.

Cuando pongo una de las filas (Fila 1) con una altura fija (25px) me vuelve a pasar lo mismo. Ni poniendo la altura en el TD se me soluciona. ¿Qué estoy haciendo mal?

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Prueba</title>
<style type="text/css">
<!--
html, body {margin:0px;height:100%}
-->
</style>
</head>

<body>
<table width="1003" border="0" cellpadding="0" cellspacing="0" bgcolor="#CCCCCC" style="height:100%">
  <tr>
    <td width="772" valign="top" style="height:100%"><table width="100%" border="0" cellspacing="0" cellpadding="0" style="height:100%">
      <tr>
        <td bgcolor="#DFFFDF" style="height:25px" height="25">Fila1</td>
      </tr>
      <tr>
        <td bgcolor="#E8FDFD">Fila2</td>
      </tr>
      <tr>
        <td bgcolor="#F9E0FC">Fila3</td>
      </tr>
      <tr>
        <td bgcolor="#F4F9D2">Fila4</td>
      </tr>
      <tr>
        <td bgcolor="#FDE2D7">Fila5</td>
      </tr>
    </table></td>
    <td width="231" valign="top">&nbsp;</td>
  </tr>
</table>
</body>
</html>

Muchas gracias por adelantado. Me es de mucha ayuda.

fearlex · #4 (**permalink**) 24/05/2007, 19:23

Mejor pon lo que quieres hacer, y vamos a buscarle la solucion SIN tables, por que mi especialidad no son las tablas, todo ese lio creo que es un poco dificil de arreglar enfocado a crossbrowser, asi que te prometo que lo solucionamos con divs, o alguien mas que pueda ayudarte con las tablas.

Alguien se apunta con ayuda de las tablas ?? Por favor

Phoncadiz · #5 (**permalink**) 24/05/2007, 22:53

Ok, no me importa que sea con tables o con divs, el tema es que salga bien tanto en un navegador como en otro.
Me interesaría hacer una estructura tal que así:

La página está dividida en dos partes: cuadro verde (100% alto x 772px de ancho) y cuadro rojo ("lo que necesite" de alto x 231px de ancho). Dentro del apartado verde irán indeterminadas estructuras (las naranjas que ocupan el 100% del ancho verde) con la única excepción de que tanto arriba como abajo del cuadro verde irán las divisiones que he puesto en azul (100& de ancho del apartado verde y 25px de alto).
Por otra parte está la estructura roja que no tiene que ocupar el 100% del alto de la página y cuyo alto se determina según el contenido que tenga (bloques naranjas dentro del apartado rojo).

Creo que en la imagen se ve más o menos claro.
Gracias y perdón por el tocho

hq1 · #6 (**permalink**) 25/05/2007, 02:18

En lo que al alto se refiere, tanto con tablas como con divs, yo te diría que no especifiques nada a no ser que quieras un alto fijo (p.e.: 25px), o sea que no pongas 100%, que ya lo cogerá el navegador.

En el ancho depende. Pero como creo que no te he entendido del todo te voy a pedir algo:

Haz una imagen con la estructura y la pegas, así podremos entenderlo mejor.

Phoncadiz · #7 (**permalink**) 25/05/2007, 06:36

Vaya... en el post anterior había puesto la imagen pero parece ser que no. El esquema es el siguiente teniendo en cuenta el comentario del post anterior: