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>
-
IE7 indeed interprets 100% as the full page height. Can't you let the left hand menu start at top: 0px and let it have a padding-top of 100px?
Also, change left hand menu to
fixedfromabsolute.Robert Harvey : Didn't work. It's padding as expected, but the second scroll bar is still there, exhibiting the same behavior.Robert Harvey : The padding is now causing it. It looks like what I need is height: 100% minus 100 pixels.Pekka : Can you post a link?Pekka : 100% minus 100 Pixels = Not possible I'm afraid..... How about fixed positioning of the left hand menu?Robert Harvey : It's not posted. If you have IE7 you can paste the code above into an HTML and CSS file, and the problem will show up immediately.Robert Harvey : If I change #FrameContentLeft to fixed, I get an empty scroll bar. That's better than before, but I'd still like there to be no scroll bar there at all, unless the content in the left menu requires it.Pekka : Correct me if I'm wrong, but AFAIK IE7 is never capable of not showing a scrollbar at all. There always is one.From Pekka
0 comments:
Post a Comment