iframes height not 100% in Internet Explorer

  • UniquelyYoursPC
  • Web Master
  • Web Master
  • User avatar
  • Posts: 2997
  • Loc: Canada "A"

Post 3+ Months Ago

I can get it to work fine in firefox and chrome but not 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>




I cant get it to go 100% height on IE
and on Firefox it goes to the end of the page but I still have a scroll bar..
what I wants is the tabed iframe as seen here http://ca. gigabyte. com/products/product-page.aspx?pid=3962#na remove the spaces
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • UniquelyYoursPC
  • Web Master
  • Web Master
  • User avatar
  • Posts: 2997
  • Loc: Canada "A"

Post 3+ Months Ago

anyone have any idea? ie it shows a frame about 400 px in height but in firefox and chrome it shows a frame about 3 pages in height
i would like to have no scroll bars and have the page load from the tab to load the full page

i would be open to using php if it would help.
  • UniquelyYoursPC
  • Web Master
  • Web Master
  • User avatar
  • Posts: 2997
  • Loc: Canada "A"

Post 3+ Months Ago

i ended up getting this fixed with some java script i am not at home right now so i cant post it but i will when i get off work
  • Bigwebmaster
  • Site Admin
  • Site Admin
  • User avatar
  • Posts: 9090
  • Loc: Seattle, WA & Phoenix, AZ

Post 3+ Months Ago

What version of IE were you using in which that problem existed? I never did see your other version before you applied the fix, but I am guessing there should be a way to resolve this without having to resort to using JavaScript. If you could put a temporary page up somewhere which still shows the issue I might be able to help :)
  • UniquelyYoursPC
  • Web Master
  • Web Master
  • User avatar
  • Posts: 2997
  • Loc: Canada "A"

Post 3+ Months Ago

i was using ie8.. ie 9 just does not like my computer.
if i remeber i will post the code when i get home. and i think i have the old code i used aswell so i will post that.
  • sherma
  • Silver Member
  • Silver Member
  • User avatar
  • Posts: 127

Post 3+ Months Ago

I've had this problem with IE before many times. Most of the time though it was when I was trying to use the iframe module in joomla. Glad you got it fixed!

Post Information

  • Total Posts in this topic: 6 posts
  • Users browsing this forum: No registered users and 68 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.