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>
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>