Foros del Web

Foros del Web (http://www.forosdelweb.com/)
-   CSS (http://www.forosdelweb.com/f53/)
-   -   Tablas de alto 100% en IE y FireFox (http://www.forosdelweb.com/f53/tablas-alto-100-ie-firefox-492499/)

Phoncadiz 24/05/2007 10:36
Tablas de alto 100% en IE y FireFox
 
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 24/05/2007 12:01
Re: Tablas de alto 100% en IE y FireFox
 
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 24/05/2007 14:25
Re: Tablas de alto 100% en IE y FireFox
 
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 24/05/2007 19:23
Re: Tablas de alto 100% en IE y FireFox
 
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 24/05/2007 22:53
Re: Tablas de alto 100% en IE y FireFox
 
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í:

http://www.subirimagenes.com/imagene...iniEsquema.png

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

hq1 25/05/2007 02:18
Re: Tablas de alto 100% en IE y FireFox
 
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 25/05/2007 06:36
Re: Tablas de alto 100% en IE y FireFox
 
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:

http://img441.imageshack.us/img441/4...esquemapr7.png


La zona horaria es GMT -6. Ahora son las 05:40.

Desarrollado por vBulletin® Versión 3.8.7
Derechos de Autor ©2000 - 2026, Jelsoft Enterprises Ltd.