iframes height not 100% in Internet Explorer
- UniquelyYoursPC
- Web Master


- Joined: Jan 22, 2003
- Posts: 2998
- Loc: Canada "A"
- Status: Offline
I can get it to work fine in firefox and chrome but not IE
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
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">
<!--
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>
<script type="text/javascript">//<![CDATA[
function synchTab(frameName) {
var elList, i;
// Exit if no frame name was given.
if (frameName == null)
return;
// Check all links.
elList = document.getElementsByTagName("A");
for (i = 0; i < 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 += " activeTab";
elList[i].blur();
}
else
removeName(elList[i], "activeTab");
}
}
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(" ");
for (i = 0; i < curList.length; i++)
if (curList[i] != name)
newList.push(curList[i]);
el.className = newList.join(" ");
}
//]]></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>
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">
<!--
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>
<script type="text/javascript">//<![CDATA[
function synchTab(frameName) {
var elList, i;
// Exit if no frame name was given.
if (frameName == null)
return;
// Check all links.
elList = document.getElementsByTagName("A");
for (i = 0; i < 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 += " activeTab";
elList[i].blur();
}
else
removeName(elList[i], "activeTab");
}
}
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(" ");
for (i = 0; i < curList.length; i++)
if (curList[i] != name)
newList.push(curList[i]);
el.className = newList.join(" ");
}
//]]></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>
- <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">
- <!--
- 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>
- <script type="text/javascript">//<![CDATA[
- function synchTab(frameName) {
- var elList, i;
- // Exit if no frame name was given.
- if (frameName == null)
- return;
- // Check all links.
- elList = document.getElementsByTagName("A");
- for (i = 0; i < 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 += " activeTab";
- elList[i].blur();
- }
- else
- removeName(elList[i], "activeTab");
- }
- }
- 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(" ");
- for (i = 0; i < curList.length; i++)
- if (curList[i] != name)
- newList.push(curList[i]);
- el.className = newList.join(" ");
- }
- //]]></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>
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


- Joined: 25 Feb 2008
- Posts: ?
- Loc: Ozzuland
- Status: Online
September 11th, 2011, 4:11 pm
- UniquelyYoursPC
- Web Master


- Joined: Jan 22, 2003
- Posts: 2998
- Loc: Canada "A"
- Status: Offline
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.
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


- Joined: Jan 22, 2003
- Posts: 2998
- Loc: Canada "A"
- Status: Offline
- Bigwebmaster
- Site Admin


- Joined: Dec 20, 2002
- Posts: 8922
- Loc: Seattle, WA & Phoenix, AZ
- Status: Offline
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 
Ozzu Hosting - Want your website on a fast server like Ozzu?
- UniquelyYoursPC
- Web Master


- Joined: Jan 22, 2003
- Posts: 2998
- Loc: Canada "A"
- Status: Offline
Page 1 of 1
To Reply to this topic you need to LOGIN or REGISTER. It is free.
Post Information
- Total Posts in this topic: 6 posts
- Users browsing this forum: No registered users and 67 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

