[SOLUCIONADO] Everybody hate's Internet Explorer (iframe que desaparece)

Phonos · #1 (**permalink**) 24/01/2013, 07:59

Bien, toda la vida he sido diseñadora web, por lo que el asunto de la maquetación es relativamente nuevo para mi, y tengo una relación de odio profundo con internet explorer, y basta con la introducción que puedo hablar mucho (?) el problema es el siguiente

Tengo un html 4.01 con un iframe que contiene el menú al que le asigne un javascript para que me permitiera visualizar el height al 100% el problema es que se ve pero pocos segundos después desaparece dejando el espacio completamente en blanco, tambien cuando presiono el botón que me lleva al inicio (usando solamente anclas) tambien plaf... Dx y esta comenzando a desesperarme! les dejo el código -js

Código:

<script>
function resize_iframe() {
var iframe = document.getElementById("diagnosed_site");
iframe.style.height = parseInt(body_height) - parseInt(header_height) - 5;
}
</script>

Código HTML:

<body onload="resize_iframe()" onresize="resize_iframe()">

Código HTML:

<iframe src="../index.html" id="diagnosed_site"></iframe>

jonni09lo · #2 (**permalink**) 24/01/2013, 09:32

Puedes mostrarnos la estructura completa de la pagina para darnos una mejor idea de cual puede ser el problema

Saludos

Phonos · #3 (**permalink**) 24/01/2013, 10:02

ok~

Código HTML:

Ver original<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>• Ierp Help</title>
<link href="../css/style.css" rel="stylesheet" type="text/css">
 
<script>
function resize_iframe() {
var iframe = document.getElementById("diagnosed_site");
iframe.style.height = parseInt(body_height) - parseInt(header_height) - 5;
}
</script>
 
</head>
 
<body onload="resize_iframe()" onresize="resize_iframe()">
 <table width="1024" border="0" cellpadding="0" cellspacing="0" class="tablacont">
  <tr>
    <td width="220" rowspan="3" align="left" valign="top"><iframe src="../index.html" id="diagnosed_site"></iframe></td>
    <td width="15" rowspan="3">&nbsp;</td>
    <td align="right" bgcolor="#005DA9" class="titulo"> <a name="up" id="#up" style="border:none" class="titulo">Consulta Ordenes de Pago&nbsp;</a> </td>
    <td width="5" rowspan="3">&nbsp;</td>
  </tr>
  <tr>
    <td height="84" align="right" bgcolor="#005DA9" class="titulo2">• BA305W&nbsp;</td>
  </tr>
  <tr>
    <td><p class="tablacont"><img src="http://www.forosdelweb.com/f13/imagenes/en-construccion.png" width="600" height="394"></p>
<p class="tablacont">&nbsp;</p>
      <hr width="100%" noshade color="#70a4cf" />
     <center>
<a name="REP" id="ER2"><font style="font-size:24px; font-family: 'Century Gothic'; color: #005DA9;">Reporte</font></a>
     </center>
      <hr width="100%" noshade color="#70a4cf" />
      <p class="tablacont"><br>
        Para realizar un reporte impreso del contenido en la tabla presione el botón &quot;Reporte&quot; ubicado sobre la esta<br>
      </p>
<p class="tablacont"><br>
  <img src="http://www.forosdelweb.com/f13/imagenes/imagenescomunes/reporte.png" alt="" width="123" height="34" /></p>
<p class="tablacont">&nbsp;</p>
<p class="tablacont">En la ventana que aparece a continuación seleccione el tipo de reporte que desea (Las letras en rojo corresponden al nombre de la transacción en la que se encuentra)</p>
<p class="tablacont">&nbsp;</p>
<p class="tablacont"><img src="http://www.forosdelweb.com/f13/imagenes/imagenescomunes/v_reporte1.png" alt="" width="525" height="245" /></p>
<p class="tablacont">&nbsp;</p>
<table width="100%" border="0" align="right" cellpadding="0" cellspacing="0">
  <tr>
    <td height="283" align="left"><p class="tablacont">Finalmente presione el botón &quot;Aceptar&quot;</p>
      <p class="tablacont">&nbsp;</p>
      <p class="tablacont"><img src="http://www.forosdelweb.com/f13/imagenes/imagenescomunes/v_reporte2.png" alt="" width="525" height="245" /></p></td>
    <td width="30" align="center" valign="bottom">
    <div id="btcont">
  <a id="rss" href="#up"></a></td>
  </tr>
   </table></td>
  </tr>
 </table>
</body>
</html>

jonni09lo · #4 (**permalink**) 24/01/2013, 10:07

Bueno ahora si puedo empezar, revise tu codigo y

body_height y header_height

No estan definidos, IE alias el maligno :) , tiende a no pasar estos errores y generan esos comportamientos

Esas variables que funcion cumplen?

Saludos

Phonos · #5 (**permalink**) 24/01/2013, 12:04

bien, marque solucionado por error (?)

Realmente no tengo idea, es decir, conseguí el script en internet sin explicación alguna Dx la idea era establecer el alto del iframe al 100% y sabes que es lo mas curioso, no le hago cambios al código y el maligno (?) a veces lo admite y otras no

-------------------------------------- Edit--------------------------------------

Yai, creo que lo he solucionado >< el problema era que en la celda donde esta el iframe el alto no estaba en 100% es decir, aca

<td width="220" height="100%" rowspan="3" align="left" valign="top"><iframe src="../index.html" id="diagnosed_site"></iframe></td>

le coloque eso para probar y ya no me hizo mas gracias... aún así no dejare de odiarlo

Gracias por el interes! c:

jonni09lo · #6 (**permalink**) 24/01/2013, 12:19

Ok, pero tratemos de solucionarlo si te parece, dime ese Iframe necesitas que ocupe el 100% del td de la tabla? o que necesitas exactamente de ese iframe

Saludos

Phonos · #7 (**permalink**) 24/01/2013, 12:28

oh, pero ya esta bien, el iframe tenia o mejor dicho tiene que ocupar el 100% del alto de la pagina

pzin · #8 (**permalink**) 24/01/2013, 13:00

Claro, la altura relativa es relativa a su contenedor siempre.

Pero si, IE hasta su versión 8 es una castaña.

jonni09lo · #9 (**permalink**) 24/01/2013, 13:11

Hola después de andar revisando por aquí y alla encontre esto :D

Código HTML:

Ver original<style type="text/css">
    html, body, div, iframe { margin:0; padding:0; height:100%; }
    #diagnosed_site { display:block; width:100%; border:none; }
</style>

Coloca eso en el head y quita esa función de javascript al igual que el onload y revisa

Saludos

jonni09lo · #10 (**permalink**) 24/01/2013, 13:22

Perdon el ejemplo que te envie no me funciono en IE... estaba en modo quirks, falla mia lo siento

Este lo probe y hasta donde vi me funciono

Mira este cod

Código HTML:

Ver original<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>• Ierp Help</title>
<link href="../css/style.css" rel="stylesheet" type="text/css">
 <style type="text/css">
    html, body, div, iframe { margin:0; padding:0; height:100%; }
    #diagnosed_site { display:block; width:100%; border:none;height:100%; }
</style>
<script type="text/javascript">
    // Dynamic Iframe loader
    function loadIframe(theURL) {
    document.getElementById("diagnosed_site").src=theURL;
    }
    // resizes Iframe according to content
    function resizeMe(obj){
    docHeight = diagnosed_site.document.body.scrollHeight
    obj.style.height = docHeight + "px"
}
</script>
 
</head>
 
<body>
 <table width="1024" border="0" cellpadding="0" cellspacing="0" class="tablacont">
  <tr>
    <td width="220" rowspan="3" align="left" valign="top"><iframe src="../index.html" name="diagnosed_site" onload="resizeMe(this)" id="diagnosed_site"></iframe></td>
    <td width="15" rowspan="3">&nbsp;</td>
    <td align="right" bgcolor="#005DA9" class="titulo"> <a name="up" id="#up" style="border:none" class="titulo">Consulta Ordenes de Pago&nbsp;</a> </td>
    <td width="5" rowspan="3">&nbsp;</td>
  </tr>
  <tr>
    <td height="84" align="right" bgcolor="#005DA9" class="titulo2">• BA305W&nbsp;</td>
  </tr>
  <tr>
    <td><p class="tablacont"><img src="http://www.forosdelweb.com/f13/imagenes/en-construccion.png" width="600" height="394"></p>
<p class="tablacont">&nbsp;</p>
      <hr width="100%" noshade color="#70a4cf" />
     <center>
<a name="REP" id="ER2"><font style="font-size:24px; font-family: 'Century Gothic'; color: #005DA9;">Reporte</font></a>
     </center>
      <hr width="100%" noshade color="#70a4cf" />
      <p class="tablacont"><br>
        Para realizar un reporte impreso del contenido en la tabla presione el botón &quot;Reporte&quot; ubicado sobre la esta<br>
      </p>
<p class="tablacont"><br>
  <img src="http://www.forosdelweb.com/f13/imagenes/imagenescomunes/reporte.png" alt="" width="123" height="34" /></p>
<p class="tablacont">&nbsp;</p>
<p class="tablacont">En la ventana que aparece a continuación seleccione el tipo de reporte que desea (Las letras en rojo corresponden al nombre de la transacción en la que se encuentra)</p>
<p class="tablacont">&nbsp;</p>
<p class="tablacont"><img src="http://www.forosdelweb.com/f13/imagenes/imagenescomunes/v_reporte1.png" alt="" width="525" height="245" /></p>
<p class="tablacont">&nbsp;</p>
<table width="100%" border="0" align="right" cellpadding="0" cellspacing="0">
  <tr>
    <td height="283" align="left"><p class="tablacont">Finalmente presione el botón &quot;Aceptar&quot;</p>
      <p class="tablacont">&nbsp;</p>
      <p class="tablacont"><img src="http://www.forosdelweb.com/f13/imagenes/imagenescomunes/v_reporte2.png" alt="" width="525" height="245" /></p></td>
    <td width="30" align="center" valign="bottom">
    <div id="btcont">
  <a id="rss" href="#up"></a></td>
  </tr>
   </table></td>
  </tr>
 </table>
</body>
</html>

Saludos