http://ikigoz.5u.com/_template_a2/index.html
The link above is my previous web template.
Running it in Chrome = Causes no problems
Running it in Firefox = Causes minor white space below page
Running it in IE = Causes bigger white space below page
Question: How do i get rid of that white space occuring in IE and Firefox?
Problem can be observed by scrolling the page and scrolling the iframe left sidebar. (It can be observed without making any scrolls too) There will be a whitespace below the currently viewed section of the document although page does not end there.
Note: Ignore the visual problem caused by iframe sizes and scrollbar disabling code not being cross-browser compatible. Also ignore the markup errors (which are currently fixed and seeming irrelevant to the problem). Also, I am unable to provide a screenshot due to reputation requirement.
Code is provided below:
<!DOCTYPE html>
<html>
<head>
<title>İki Göz</title>
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
<script type="text/javascript">
function stop()
{
return false;
}
document.onmousewheel=stop;
</script>
<style>
html {
generic-family:serif;
font-family:georgia;
}
html::-webkit-scrollbar {
display:none;
}
#sidebar {
border-style:none;
margin-left:-8px;
}
#content {
border-style:none;
margin-left:-8px;
}
iframe::-webkit-scrollbar {
display:none;
float:left;
}
header {
background-color:#EEEEEE;
padding-top:10px;
padding-bottom:8px;
margin-top:-8px;
}
nav {
color:#CCCCCC;
background-color:#303030;
padding-top:8px;
padding-bottom:8px;
margin-left:-8px;
margin-right:-8px;
}
#maintitle {
color:#BB0000;
font-size:30px;
font-weight:normal;
}
#maintitle span{
color:#111111;
font-size:24px;
font-weight:normal;
margin-left:5px;
}
a {
-webkit-transition:color 300ms linear;
-moz-transition:color 300ms linear;
-o-transition:color 300ms linear;
-ms-transition:color 300ms linear;
transition:color 300ms linear;
}
a:link {color:#EEEEEE;text-decoration:none;}
a:visited {color:#CCCCCC;text-decoration:none;}
a:hover {
color:#FFFFFF;text-decoration:underline;
-webkit-transition:color 300ms linear;
-moz-transition:color 300ms linear;
-o-transition:color 300ms linear;
-ms-transition:color 300ms linear;
transition:color 300ms linear;
}
a:active {color:#FFFFFF;text-decoration:underline;}
</style>
</head>
<body>
<header id="maintitle">İki Göz:<span>Yaşanmışlıklar, tespitler ve hikayelerle hayatın içinden...
</header>
<nav>
<a href="index.html"">Anasayfa</a>
|
<a href="sidebar.html" target="iframe1">Tüm Yazarlar</a>
<a href="sidebar_yurdupak.html" target="iframe1">Onur YURDUPAK</a>
<a href="sidebar_goknar.html" target="iframe1">Özgün GÖKNAR</a>
<a href="sidebar_diger.html" target="iframe1">Diğer Yazarlar</a>
</nav>
<iframe name="iframe1" id="sidebar" width="310px" height="560px" src="sidebar.html"></iframe>
<iframe name="iframe2" id="content" width="1052px" height="560px" src="navigasyon.html"></iframe>
</body>
</html>
Bonus Question: Firefox also shows a red line above left sidebar while IE and Chrome don't. Any suggestions about fixing this?
