Ayuda con el height con IE8

drgore2 · #1 (**permalink**) 02/11/2010, 02:14

Hola

Después de buscar por todos los foros, no soy capaz de resolver el siguiente problema:

Resulta que cuando pongo el DOCTYPE, el height parece que no está reconocido y no me amplía el DIV gris oscuro al tamaño de la celda cuando uso el IE8 (con firefox no pasa esto).

Os dejo aquí el ejemplo.

Gracias

<!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 runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<table style="height: 100%; border-collapse:collapse;" border=1>
<tr>
<td style="border: red 1px solid; height: 20%;">fila 1</td>
<td>col2</td>
</tr>
<tr>
<td rowspan="3" style="border: red 1px solid; height: 60%; padding:5px;"><div id="Div2" style="padding:5px;height: 100%; background-color:#444444;">fila 2,3,4</div></td>
<td>col2</td>
</tr>
<tr>
<td>col2</td>
</tr>
<tr>
<td>col2</td>
</tr>
<tr>
<td style="border: red 1px solid; height: 20%;">fila 5</td>
<td>col2</td>
</tr>
</table>
</form>
</body>
</html>

seudoCodigo · #2 (**permalink**) 02/11/2010, 08:41

tal vez si le quitas la propiedad "height:100%;" al DIV de color gris oscuro

drgore2 · #3 (**permalink**) 03/11/2010, 02:12

Pues se lo he quitado y no hace nada.

¿A alguien se le ocurren más soluciones?

Abrahamsas · #4 (**permalink**) 03/11/2010, 11:16

Y si le pones el fondo gris a la celda y no al div?

Código HTML:

Ver original<td rowspan="3" style=" background-color:#444444;border: red 1px solid; height: 60%; padding:5px;"><div id="Div2" style="padding:5px;height: 100%;">fila 2,3,4</div></td>

emprear · #5 (**permalink**) 04/11/2010, 12:08

El problema es que le estás diciendo a tu div que tenga el 100% de algo (tu td) que es el 60%, pero 60% de qué?, de un tr que la contiene?
lo que tenés que hacer es asignarle un alto que no sea porcentual a tu celda.

Cuando quitas el Doctype, la cosa cambia, empiezas a trabajar en lo que se denomina "quircksMode" ( http://sigt.net/archivo/que-pasa-en-...rks-mode.xhtml ), en donde el modelo de caja se rompe, y cada navegador hace lo que se le ocurre, deberias usar algo asi

<!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=utf-8" />
<title>Div gris</title>
<style type="text/css">

</style>
</head>

<body>
<table border="1" cellspacing="1" cellpadding="1">
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td rowspan="3" class="tdx"><div class="dgris">Div Gris</div></td>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>

Saludos