I have a CSS layout that simulates a fixed-frame page, with a header and a left side menu, and a content pane.
In Firefox, this works fine, but in Internet Explorer 7, there is an additional scroll bar along the right-hand side. If you move the extra scroll bar with the mouse, it will scroll just the header off the top of the page. It's almost as if IE7 is interpreting the height: 100% of the left side menu as the entire height of the page, rather than the area below the header.
Is there any way to fix this?
My CSS:
body{
margin: 0;
padding: 0;
border: 0;
overflow: hidden;
height: 100%;
max-height: 100%;
}
#framecontentTop {
position: absolute;
top: 0;
left: 0;
right: 0;
width: auto;
height: 100px; /*Height of top frame div*/
overflow: hidden; /*Disable scrollbars.*/
background-color: #90B3DC;
color: white;
}
#framecontentLeft {
position: absolute;
top: 100px;
left: 0;
bottom: 0;
width: 300px; /*Width of left frame div*/
height: 100%;
overflow: hidden; /*Disable scrollbars.*/
background-color: #90B3DC;
color: white;
}
#maincontent{
position: fixed;
left: 300px; /*Set left value to WidthOfLeftFrameDiv*/
top: 100px; /*Set top value to HeightOfTopFrameDiv*/
right: 0;
bottom: 0;
overflow: auto;
background: #fff;
}
.innertube{
margin: 15px; /*Margins for inner DIV inside each DIV (to provide padding)*/
}
My HTML:
<!DOCTYPE html>
<html>
<head>
<title>CSS Left and Top Frames Layout</title>
<link href="Frames.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
/*** Temporary text filler function. Remove when deploying template. ***/
var gibberish=["This is just some filler text", "Lorem ipsum dolor sit amet", "nothing to read here"]
function filltext(words){
for (var i=0; i<words; i++)
document.write(gibberish[Math.floor(Math.random()*3)]+" ")
}
</script>
</head>
<body>
<div id="framecontentLeft">
<div class="innertube">
<h3>Sample text here</h3>
</div>
</div>
<div id="framecontentTop">
<div class="innertube">
<h1>CSS Left and Top Frames Layout</h1>
<h3>Sample text here</h3>
</div>
</div>
<div id="maincontent">
<div class="innertube">
<h1>Content Title</h1>
<p><script type="text/javascript">filltext(255)</script></p>
</div>
</div>
</body>
</html>