hauteur iframes pas 100 % dans Internet Explorer

  • UniquelyYoursPC
  • Web Master
  • Web Master
  • Avatar de l’utilisateur
  • Inscription: Jan 22, 2003
  • Messages: 2998
  • Loc: Canada "A"
  • Status: Offline

Message Septembre 11th, 2011, 4:11 pm

Je peux l'obtenir pour fonctionner correctement dans firefox et chrome mais pas IE

Code: [ Select ]
<style type="text/css">
div.tabBox {}

div.tabArea {
 font-size: 100%;
 font-weight: bold;
 padding: 0px 0px 3px 0px;
}

a.tab {
 background-color: #ffffff;
 border: .5px solid #858585;
 border-bottom-width: 0px;
 border-color: #858585;
 -moz-border-radius: .75em .75em 0em 0em;
 border-radius-topleft: .75em;
 border-radius-topright: .75em;
 padding: 2px 1em 2px 1em;
 position: relative;
 text-decoration: none;
 top: 3px;
 z-index: 100;
}

a.tab, a.tab:visited {
 color: #000005;
}

a.tab:hover {
 background-color: #dedede;
 border-color: 858585;
 color: #858585;
}

a.tab.activeTab, a.tab.activeTab:hover, a.tab.activeTab:visited {
 background-color: #858585;
 border-color: #858585;
 color: #000000;
}

a.tab.activeTab {
 padding-bottom: 4px;
 top: 1px;
 z-index: 102;
}

div.tabMain {
 background-color: #ffffff;
 border: .5px solid #dedede;
 border-color: #dedede;
 -moz-border-radius: 0em .5em .5em 0em;
 border-radius-topright: .5em;
 border-radius-bottomright: .5em;
 padding: .5em;
 position: relative;
 z-index: 101;
}

div.tabIframeWrapper {
 width: 100%;
 height:100%
}

iframe.tabContent {
 background-color: #ffffff;
 border: 1px solid #ffffff5;
 border-color: #ffffff;
 width: 100%;
 height: 100%;
}

h4#title {
 background-color: #ffffff;
 border: 1px solid #ffffff;
 border-color: #ffffff;
 color: #ffffff;
 font-weight: bold;
 margin-top: 0em;
 margin-bottom: .5em;
 padding: 2px .5em 2px .5em;
}
table {height:100%;width:100%;table-layout:static;border-collapse:collapse}
</style>
<script language="JavaScript">
&lt;!--
function resize_iframe()
{

    var height=window.innerWidth;//Firefox
    if (document.body.clientHeight)
    {
        height=document.body.clientHeight;//IE
    }
    //resize the iframe according to the size of the
    //window (all these should be on the same line)
    document.getElementById(&quot;glu&quot;).style.height=parseInt(height-
    document.getElementById(&quot;glu&quot;).offsetTop-8)+&quot;px&quot;;
}

// this will resize the iframe every
// time you change the size of the window.
window.onresize=resize_iframe;

//Instead of using this you can use:
//    &lt;BODY onresize=&quot;resize_iframe()&quot;&gt;


//--&gt;
</script>
<script type="text/javascript">//&lt;![CDATA[

function synchTab(frameName) {

 var elList, i;

 // Exit if no frame name was given.

 if (frameName == null)
  return;

 // Check all links.

 elList = document.getElementsByTagName(&quot;A&quot;);
 for (i = 0; i &lt; elList.length; i++)

  // Check if the link's target matches the frame being loaded.

  if (elList[i].target == frameName) {

   // If the link's URL matches the page being loaded, activate it.
   // Otherwise, make sure the tab is deactivated.

   if (elList[i].href == window.frames[frameName].location.href) {
    elList[i].className += &quot; activeTab&quot;;
    elList[i].blur();
   }
   else
    removeName(elList[i], &quot;activeTab&quot;);
  }
}

function removeName(el, name) {

 var i, curList, newList;

 if (el.className == null)
  return;

 // Remove the given class name from the element's className property.

 newList = new Array();
 curList = el.className.split(&quot; &quot;);
 for (i = 0; i &lt; curList.length; i++)
  if (curList[i] != name)
   newList.push(curList[i]);
 el.className = newList.join(&quot; &quot;);
}

//]]&gt;</script>
<script language="JavaScript">
<!--
function resize_iframe()
{

    var height=window.innerWidth;//Firefox
    if (document.body.clientHeight)
    {
        height=document.body.clientHeight;//IE
    }
    //resize the iframe according to the size of the
    //window (all these should be on the same line)
    document.getElementById("glu").style.height=parseInt(height-
    document.getElementById("glu").offsetTop-8)+"px";
}

// this will resize the iframe every
// time you change the size of the window.
window.onresize=resize_iframe;

//Instead of using this you can use:
//    <BODY onresize="resize_iframe()">


//-->
</script>








<br.<br><br /> put some text here, and a customize now button





<div style="clear: both;" class="tabBox">
 <div class="tabArea">
  <a target="tabIframe2" href="predatoramd/overview.html" class="tab">Overview</a>
  <a target="tabIframe2" href="predatoramd/feature.html" class="tab">Features</a>
  <a target="tabIframe2" href="predatoramd/reviews.html" class="tab">Reviews</a>
 </div>
 <div class="tabMain">
  <h4 id="title">Top Picks</h4>
  <div class="tabIframeWrapper"><iframe id="glu" width="100%" onload="resize_iframe()" class="tabContent" name="tabIframe2" src="predatoramd/overview.html" marginheight="8" marginwidth="8" frameborder="0"></iframe></div>
 </div>
</div>


</br.<br>
  1. <style type="text/css">
  2. div.tabBox {}
  3. div.tabArea {
  4.  font-size: 100%;
  5.  font-weight: bold;
  6.  padding: 0px 0px 3px 0px;
  7. }
  8. a.tab {
  9.  background-color: #ffffff;
  10.  border: .5px solid #858585;
  11.  border-bottom-width: 0px;
  12.  border-color: #858585;
  13.  -moz-border-radius: .75em .75em 0em 0em;
  14.  border-radius-topleft: .75em;
  15.  border-radius-topright: .75em;
  16.  padding: 2px 1em 2px 1em;
  17.  position: relative;
  18.  text-decoration: none;
  19.  top: 3px;
  20.  z-index: 100;
  21. }
  22. a.tab, a.tab:visited {
  23.  color: #000005;
  24. }
  25. a.tab:hover {
  26.  background-color: #dedede;
  27.  border-color: 858585;
  28.  color: #858585;
  29. }
  30. a.tab.activeTab, a.tab.activeTab:hover, a.tab.activeTab:visited {
  31.  background-color: #858585;
  32.  border-color: #858585;
  33.  color: #000000;
  34. }
  35. a.tab.activeTab {
  36.  padding-bottom: 4px;
  37.  top: 1px;
  38.  z-index: 102;
  39. }
  40. div.tabMain {
  41.  background-color: #ffffff;
  42.  border: .5px solid #dedede;
  43.  border-color: #dedede;
  44.  -moz-border-radius: 0em .5em .5em 0em;
  45.  border-radius-topright: .5em;
  46.  border-radius-bottomright: .5em;
  47.  padding: .5em;
  48.  position: relative;
  49.  z-index: 101;
  50. }
  51. div.tabIframeWrapper {
  52.  width: 100%;
  53.  height:100%
  54. }
  55. iframe.tabContent {
  56.  background-color: #ffffff;
  57.  border: 1px solid #ffffff5;
  58.  border-color: #ffffff;
  59.  width: 100%;
  60.  height: 100%;
  61. }
  62. h4#title {
  63.  background-color: #ffffff;
  64.  border: 1px solid #ffffff;
  65.  border-color: #ffffff;
  66.  color: #ffffff;
  67.  font-weight: bold;
  68.  margin-top: 0em;
  69.  margin-bottom: .5em;
  70.  padding: 2px .5em 2px .5em;
  71. }
  72. table {height:100%;width:100%;table-layout:static;border-collapse:collapse}
  73. </style>
  74. <script language="JavaScript">
  75. &lt;!--
  76. function resize_iframe()
  77. {
  78.     var height=window.innerWidth;//Firefox
  79.     if (document.body.clientHeight)
  80.     {
  81.         height=document.body.clientHeight;//IE
  82.     }
  83.     //resize the iframe according to the size of the
  84.     //window (all these should be on the same line)
  85.     document.getElementById(&quot;glu&quot;).style.height=parseInt(height-
  86.     document.getElementById(&quot;glu&quot;).offsetTop-8)+&quot;px&quot;;
  87. }
  88. // this will resize the iframe every
  89. // time you change the size of the window.
  90. window.onresize=resize_iframe;
  91. //Instead of using this you can use:
  92. //    &lt;BODY onresize=&quot;resize_iframe()&quot;&gt;
  93. //--&gt;
  94. </script>
  95. <script type="text/javascript">//&lt;![CDATA[
  96. function synchTab(frameName) {
  97.  var elList, i;
  98.  // Exit if no frame name was given.
  99.  if (frameName == null)
  100.   return;
  101.  // Check all links.
  102.  elList = document.getElementsByTagName(&quot;A&quot;);
  103.  for (i = 0; i &lt; elList.length; i++)
  104.   // Check if the link's target matches the frame being loaded.
  105.   if (elList[i].target == frameName) {
  106.    // If the link's URL matches the page being loaded, activate it.
  107.    // Otherwise, make sure the tab is deactivated.
  108.    if (elList[i].href == window.frames[frameName].location.href) {
  109.     elList[i].className += &quot; activeTab&quot;;
  110.     elList[i].blur();
  111.    }
  112.    else
  113.     removeName(elList[i], &quot;activeTab&quot;);
  114.   }
  115. }
  116. function removeName(el, name) {
  117.  var i, curList, newList;
  118.  if (el.className == null)
  119.   return;
  120.  // Remove the given class name from the element's className property.
  121.  newList = new Array();
  122.  curList = el.className.split(&quot; &quot;);
  123.  for (i = 0; i &lt; curList.length; i++)
  124.   if (curList[i] != name)
  125.    newList.push(curList[i]);
  126.  el.className = newList.join(&quot; &quot;);
  127. }
  128. //]]&gt;</script>
  129. <script language="JavaScript">
  130. <!--
  131. function resize_iframe()
  132. {
  133.     var height=window.innerWidth;//Firefox
  134.     if (document.body.clientHeight)
  135.     {
  136.         height=document.body.clientHeight;//IE
  137.     }
  138.     //resize the iframe according to the size of the
  139.     //window (all these should be on the same line)
  140.     document.getElementById("glu").style.height=parseInt(height-
  141.     document.getElementById("glu").offsetTop-8)+"px";
  142. }
  143. // this will resize the iframe every
  144. // time you change the size of the window.
  145. window.onresize=resize_iframe;
  146. //Instead of using this you can use:
  147. //    <BODY onresize="resize_iframe()">
  148. //-->
  149. </script>
  150. <br.<br><br /> put some text here, and a customize now button
  151. <div style="clear: both;" class="tabBox">
  152.  <div class="tabArea">
  153.   <a target="tabIframe2" href="predatoramd/overview.html" class="tab">Overview</a>
  154.   <a target="tabIframe2" href="predatoramd/feature.html" class="tab">Features</a>
  155.   <a target="tabIframe2" href="predatoramd/reviews.html" class="tab">Reviews</a>
  156.  </div>
  157.  <div class="tabMain">
  158.   <h4 id="title">Top Picks</h4>
  159.   <div class="tabIframeWrapper"><iframe id="glu" width="100%" onload="resize_iframe()" class="tabContent" name="tabIframe2" src="predatoramd/overview.html" marginheight="8" marginwidth="8" frameborder="0"></iframe></div>
  160.  </div>
  161. </div>
  162. </br.<br>




Je ne peux pas pour aller de hauteur de 100 % sur IE
et sur Firefox, il va jusqu'à la fin de la page, mais j'ai toujours une barre de défilement...
ce que je souhaite, c'est l'iframe tabed comme on le voit ici http://ca . gigaoctet. com/products/product-page.aspx?pid=3962 #na supprimer les espaces
  • Anonymous
  • Bot
  • No Avatar
  • Inscription: 25 Feb 2008
  • Messages: ?
  • Loc: Ozzuland
  • Status: Online

Message Septembre 11th, 2011, 4:11 pm

  • UniquelyYoursPC
  • Web Master
  • Web Master
  • Avatar de l’utilisateur
  • Inscription: Jan 22, 2003
  • Messages: 2998
  • Loc: Canada "A"
  • Status: Offline

Message Septembre 13th, 2011, 11:53 am

n'importe qui ont une idée ? ie il montre une trame environ 400 px en hauteur mais dans firefox et le chrome, il montre une trame environ 3 pages en hauteur
Je voudrais ont pas de barres de défilement et avoir la page charger à partir de l'onglet pour charger la page complète

Je serais ouvert à l'utilisation de php si il serait utile.
  • UniquelyYoursPC
  • Web Master
  • Web Master
  • Avatar de l’utilisateur
  • Inscription: Jan 22, 2003
  • Messages: 2998
  • Loc: Canada "A"
  • Status: Offline

Message Septembre 20th, 2011, 12:18 pm

J'ai fini par obtenir ce fixe avec certains java script, je ne suis pas à la maison maintenant donc je ne peux pas l'afficher, mais je vais quand j'obtiens congé
  • Bigwebmaster
  • Site Admin
  • Site Admin
  • Avatar de l’utilisateur
  • Inscription: Déc 20, 2002
  • Messages: 8925
  • Loc: Seattle, WA & Phoenix, AZ
  • Status: Offline

Message Septembre 20th, 2011, 8:22 pm

Quelle version de IE vous utilisaient dans lequel ce problème existe ? Je n'a jamais vu votre autre version avant que vous avez appliqué le correctif, mais je devine qu'il devrait y avoir un moyen de résoudre ce problème sans avoir à recourir à l'utilisation de JavaScript. Si vous pouvez placer une page temporaire à un endroit qui montre encore la question I might be capable d'aider:)
Ozzu Hosting - Want your website on a fast server like Ozzu?
  • UniquelyYoursPC
  • Web Master
  • Web Master
  • Avatar de l’utilisateur
  • Inscription: Jan 22, 2003
  • Messages: 2998
  • Loc: Canada "A"
  • Status: Offline

Message Septembre 21st, 2011, 7:15 am

j'utilisais ie8... IE 9 juste n'aime pas mon ordinateur.
Si je remeber j'affichera le code quand j'aurai accueil. et je crois qu'avoir l'ancien code, j'ai utilisé aswell donc je qui affichera.
  • sherma
  • Silver Member
  • Silver Member
  • Avatar de l’utilisateur
  • Inscription: Juin 13, 2011
  • Messages: 127
  • Status: Offline

Message Septembre 23rd, 2011, 7:13 am

IVe a eu ce problème avec IE avant plusieurs fois. La plupart du temps, mais c'était quand j'essayais d'utiliser le module iframe dans joomla. Glad qu'you got it fixe !

Afficher de l'information

  • Total des messages de ce sujet: 6 messages
  • Utilisateurs parcourant ce forum: Aucun utilisateur enregistré et 258 invités
  • Vous ne pouvez pas poster de nouveaux sujets
  • Vous ne pouvez pas répondre aux sujets
  • Vous ne pouvez pas éditer vos messages
  • Vous ne pouvez pas supprimer vos messages
  • Vous ne pouvez pas joindre des fichiers
 
 

© 2011 Unmelted, LLC. Ozzu® est une marque déposée de Unmelted, LLC