Tabla + IFrames + Opera

MikiBroki · #1 (**permalink**) 12/09/2007, 02:12

Buenas, en el siguiente ejemplo muestro mi problema en Ópera: hay dos iframes cada uno en celda (sí, debo usar iframes y tablas no me queda otra :() y al hacer click en el botón "agrandar" las dos celdas toman el mismo tamaño (debería crecer la que contiene el iframe superior).

El asunto es que funciona bien si las celdas contienen texto, si quito los iframe va todo ok.

A ver si a alguien se le ocurre algo, gracias

PD: lo he hecho obteniendo el offsetheight de la tabla que contiene los iframe, y calculando los porcentajes en px para celda, y funciona bien, pero quisiera saber si hay una forma menos sucia.

Código:

<html>
<head>

<SCRIPT LANGUAGE='javaScript' type='text/javaScript'>

function restaura() 
{

// original
document.getElementById("tdMain").style.height  = "80%";
document.getElementById("tdAlarmas").style.height = "20%";

}

// ----

function agranda()
{

// grande
document.getElementById("tdMain").style.height    = "95%";
document.getElementById("tdAlarmas").style.height = "5%";

}



</script>




<body style="margin: 0px;">


<table id="tablaFuera" style="border-width: 0pt; height: 100%; width: 100%" border="1" >

<tbody>

<tr>
<td style="width: 100%; height: 60px;background-color:navy;" colspan="2" height="60" valign="top" width="100%">
<input type="button" onclick="agranda();" value="agrandar" />
<input type="button" onclick="restaura();" value="restaurar" />
</td>
</tr>

<tr valign="bottom">

<td id="tdMenu" style="width: 20%; height: 100%;background-color:blue;" height="100%" valign="top" width="20%">
<iframe src="hwmenu" name="Menu" title="" align="middle" frameborder="0" height="100%" scrolling="no" width="100%"></iframe>
</td>

<td style="height:100%;" height="100%" align="center" valign="top">

<table id="tablaDentro" style="border-width: 0pt; height: 100%; width: 100%;background-color:cyan" border="0" >			

<tr id="trMain">
<td id="tdMain" style="height:80%; background-color:red;" height="80%" valign="top">								

<!--
texto de prueba arriba
-->

<iframe src="b.html" id="frmMmain" name="frmMain" title="" align="middle" frameborder="0" style="height:100%;overflow:hidden;"  scrolling="auto" width="100%"></iframe>

</td>
</tr>

<tr id="trAlarmas">

<td id="tdAlarmas" style="height:20%;background-color:blue;" height="20%" valign="top">

<!--
texto de prueba abajo
-->

<iframe src="c.html" id="frmAlarmas" name="frmAlarmas" title="" align="center" frameborder="1" style="height:98%;overflow:hidden;"  scrolling="auto" width="100%"></iframe>

</td>

</tr>

</table>

</td>

</tr>

</tbody>

</table>

</body>

</html>