PDA

View Full Version : Help with iframes



meltedtoons
02 Feb 2011, 10:30 PM
so I have a site called DoubleWindow. It allows you to switch between two sites.
http://doublewindow.tk/
When you go on there, click launch and search something on google. Then, click on the bottom left screen and go on a random site. Now, switch back (click on the lower left corner of the page). Now, here's the problem. On Chrome and Firefox, everything is normal but on IE it leaves a gap on the right hand side of the iframe....

Here's the source code:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Double Window</title>
<style type="text/css">
#c
{
position:absolute;
top:1px;
width: 100%;
height: 100%;
background: white;
}
body { margin: 0px 0px 0px 0px; }
#fixme {
/* Netscape 4, IE 4.x-5.0/Win and other lesser browsers will use this */
position: absolute; bottom:0px;
}
body > div#fixme {
/* used by Opera 5+, Netscape6+/Mozilla, Konqueror, Safari, OmniWeb 4.5+, iCab, ICEbrowser */
position: fixed;
}
</style>
<!--[if gte IE 5.5]>
<![if lt IE 7]>
<style type="text/css">
div#fixme {
/* IE5.5+/Win - this is more specific than the IE 5.0 version */
left: expression( ( 20 + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + 'px' );
top: expression( ( 10 + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' );

}

</style>

<![endif]>

<![endif]-->

</style>

</head>

<body>

<span style="font-family: Helvetica,Arial,sans-serif;">

<script language="javascript">

function toggle() {

var ele = document.getElementById("toggleText");

var text = document.getElementById("displayText");

if(ele.style.display == "block") {

text.innerHTML = '<img style="border: none;" src="switch.png"/>';

ele.style.display = "none";

}

else {

ele.style.display = "block";

text.innerHTML = '<img style="border: none;" src="switch.png"/>';

}

}

</script>

<div id="content" style="height: 100%; width: 100%; overflow: hidden;">

<div id="fixme">

<a accesskey="P" style="position: fixed; bottom:0px; color: rgb(0, 0, 24);" id="displayText" href="javascript:toggle();"><img

style="border: none;" src="begin.jpg"/></a> </div>

<div id="toggleText" style="display: none; width: 100%; height: 100%;">

<center>

<input src="back.jpg" onclick="history.back()" type="image">

<input src="blank.jpg" onclick='window.frames.Iframe.location.href="http://answermyhw.webs.com/new.html"' type="image">

http://

<input style="width: 50%;" id="goput" type="text">

<input src="go.jpg" onclick="document.getElementById('iframe').src='http://'+document.getElementById('goput').value+'';" type="image"><small>

<center>

<iframe id="iframe" src="http://answermyhw.webs.com/new.html" frameborder="0" height="100%" width="100%"></iframe></center></center></div>

<div>

<iframe id="iframe2" src="http://google.com" frameborder="0" width="100%" height="100%""></iframe></div></div></span>

</script>

</body></html>