Forum Moderators: not2easy
I have tried to troubleshoot my CSS frame layout for a while now and I am at my wit's end so I really do hope you guys can shed a light on this.
I am basically trying to accomplish a top, bottom and left frame.
The code works on Firefox but on IE, my left frame is missing.
What seems to be missing here?
Thanks in advance!
<!--Force IE6 into quirks mode with this comment tag-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Dynamic Drive: CSS Top and Bottom Frames Layout</title>
<style type="text/css">
body{
margin: 0;
padding: 0;
border: 0;
overflow: hidden;
height: 100%;
max-height: 100%;
}
#framecontentTop, #framecontentBottom{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 130px; /*Height of top frame div*/
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
background-color: navy;
color: white;
}
#framecontentBottom{
top: auto;
bottom: 0;
height: 110px; /*Height of bottom frame div*/
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
background-color: navy;
color: white;
}
#left{
position: absolute;
top: 130px; /*Set top value to HeightOfTopFrameDiv*/
bottom: 40px; /*Set bottom value to HeightOfBottomFrameDiv*/
width: 200px; /*Width of left frame div*/
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
background-color: red;
color: white;
}
#maincontent{
position: fixed;
top: 130px; /*Set top value to HeightOfTopFrameDiv*/
left: 200px;
right: 0;
bottom: 40px; /*Set bottom value to HeightOfBottomFrameDiv*/
overflow: auto;
background: #fff;
}
.innertube{
margin: 15px; /*Margins for inner DIV inside each DIV (to provide padding)*/
}
* html body{ /*IE6 hack*/
padding: 130px 0 110px 0; /*Set value to (HeightOfTopFrameDiv 0 HeightOfBottomFrameDiv 0)*/
}
* html #maincontent{ /*IE6 hack*/
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<div id="framecontentTop">
<div class="innertube">
<h1>CSS Frames </h1>
<h3>Top frame</h3>
</div>
</div>
<div id="framecontentBottom">
<div class="innertube">
<h3>Sample text here</h3>
</div>
</div>
<div id="left">
<div class="innertube">
This is the left frame
</div>
</div>
<div id="maincontent">
<div class="innertube">
<h2>CSS Main Frame</h2>
<p>If you don't see a red "frame" on the left, it is not working. </p>
<p><b class="codetitle">Source Code:</b></p>
<p>dummy</p><p>dummy</p><p>dummy</p><p>dummy</p>
<p>dummy</p><p>dummy</p><p>dummy</p><p>dummy</p>
<p>dummy</p><p>dummy</p><p>dummy</p><p>dummy</p>
</div>
</div>
</body>
</html>[edited by: encyclo at 1:44 am (utc) on June 20, 2007]
[edit reason] fixed side-scroll and formatting [/edit]
Have you considered using javascript for IE so that it can conform to the standards, instead of forcing it into quirks mode and using CSS hacks?
You say you don't get a left "frame"... I get one.
The problem is it's not stretched to the bottom. Another problem is that it's on top of (overlapping) the content. You'll need to put a padding-left or margin-left to fix that.
The stretch problem is because IE does not render both a top and a bottom position simultaniously (just as it doesn't do left and right). Just another one of those problems with IE.
You can do this job super easy if you design the page for firefox (and/or something else like opera, doesn't really matter), and then fix the IE problems with javascript.
IE7.js (you can google it) is a great fix for IE which will make it for the most part, standards compliant. If you don't want the ENTIRE script active (you probably don't need all it's features), it's really cool cause it's modular, and there's a bunch of little scripts you can use on their own to just fix one or two problems (such as support for position:fixed, and the top and bottom bug).
I don't know if I'm missing something, but it seems that an easier way to do the page you're making (considering you already forfeited the body scrollbar idea) is to just have the left div and content div set to float, and have the footer set to clear.
Also, the way the page is designed currently with pixels is likely problematic. It means that lots of text may get cut off if the user increases their font size.
An easy fix would be to just use em-sized divs, and/or use percentage values of the window.
[edited by: Xapti at 3:29 am (utc) on June 20, 2007]
