2 replies [Last post]
warrensomebody
Offline
newbie
Last seen: 16 years 42 weeks ago
Joined: 2004-07-21
Posts: 2
Points: 0

I'm trying to create a frameset-like display using div tags. I want a fixed header and footer area, and 2 proportional frames in the middle. My code works in Firefox, but not IE6:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Strict//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>test</title>
<link href="qstyle.css" rel="stylesheet" type="text/css">
</head>

<style>
body {
	margin-left: 0px;
	margin-right: 0px;
	margin-top: 0px;
	margin-bottom: 0;
}

#header {
	position: absolute;
	width: 100%;
	height: 60px;
	top: 0px;
	background-color: rgb(239, 236, 223);
}

#top {
	position: absolute;
	width: 100%;
	top: 60px;
	bottom: 60%;
	background-color: pink;
	overflow: auto;
}

#bottom {
	position: absolute;
	width: 100%;
	top: 40%;
	bottom: 30px;
	background-color: tan;
	overflow: auto;
}

#footer {
	position: absolute;
	width: 100%;
	height: 30px;
	bottom: 0px;
	background-color: rgb(239, 236, 223);
}
</style>

<body>

<div id="header">
</div>

<div id="top">
Bunch of text<br>
Bunch of text<br>
Bunch of text<br>
Bunch of text<br>
Bunch of text<br>
Bunch of text<br>
Bunch of text<br>
Bunch of text<br>
Bunch of text<br>
Bunch of text<br>
Bunch of text<br>
Bunch of text<br>
Bunch of text<br>
Bunch of text<br>
Bunch of text<br>
Bunch of text<br>
Bunch of text<br>
Bunch of text<br>
Bunch of text<br>
Bunch of text<br>
Bunch of text<br>
Bunch of text<br>
Bunch of text<br>
Bunch of text<br>
Bunch of text<br>
</div>

<div id="bottom">
Some other stuff<br>
Some other stuff<br>
Some other stuff<br>
Some other stuff<br>
Some other stuff<br>
Some other stuff<br>
Some other stuff<br>
Some other stuff<br>
Some other stuff<br>
Some other stuff<br>
Some other stuff<br>
Some other stuff<br>
Some other stuff<br>
Some other stuff<br>
Some other stuff<br>
Some other stuff<br>
Some other stuff<br>
Some other stuff<br>
Some other stuff<br>
Some other stuff<br>
Some other stuff<br>
Some other stuff<br>
Some other stuff<br>
Some other stuff<br>
Some other stuff<br>
</div>

<div id="footer">
</div>

</body>
</html>

I suppose I don't care that much about the center frames being defined by percentages, but changing things to make the top one fixed size and the bottom one fill the remaining area doesn't seem to work either:

#top {
	position: absolute;
	width: 100%;
	top: 60px;
	height: 100px;
	background-color: pink;
	overflow: auto;
}

#bottom {
	position: absolute;
	width: 100%;
	top: 160px;
	bottom: 30px;
	background-color: tan;
	overflow: auto;
}

IE ends up with a scroll bar for the whole page, and the bottom frame extends under the footer.

Any suggestions would be much appreciated.

W

Stu
Stu's picture
Offline
Enthusiast
Bristol uk
Last seen: 17 years 16 weeks ago
Bristol uk
Joined: 2004-01-20
Posts: 282
Points: 0

absolute positioning bug in IE?

It's not what you do it's the way that you do it.
So do it with STYLE
http://www.s7u.co.uk

warrensomebody
Offline
newbie
Last seen: 16 years 42 weeks ago
Joined: 2004-07-21
Posts: 2
Points: 0

absolute positioning bug in IE?

Thanks for pointing that out, but I don't think it will work for me. It uses an IE hack of adjusting the border width to position the frame contents, but that won't work to position 2 frames with a 40/60 split (or fix + rest split) since one border will end up covering the other frame.

Still looking...

W