absolute positioning bug in IE?

2 replies [Last post]

Wed, 2004-07-21 19:28

warrensomebody

Offline

newbie

Last seen: 17 years 43 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.

Tags:

Beginners CSS Questions

Wed, 2004-07-21 19:35

Stu

Offline

Enthusiast

Bristol uk

Last seen: 18 years 17 weeks ago

Bristol uk

Joined: 2004-01-20

Posts: 282

Points: 0