Sun, 2003-09-28 22:18
Hi there!
I've been struggling to get this style to work with IE6 lately. The problem is positioning containers with CSS2 style position: absolute. With Gecko-based browsers the page looks fine, but with IE6 the containers only extend as far as the content of the container go. The point is that the containers should extend over the entire browser window. The page (very short and simple) at:
http://folk.uio.no/bark/container.shtml
and the css-file:
http://folk.uio.no/bark/container.css
Also, here is a screenshot of how it should look (this is galeon 1.2.7).
http://folk.uio.no/bark/pics/container-correct.png
Does anybody know a solution to this problem?
Mon, 2003-09-29 22:34
#1
Positioning absolute elements - Gecko vs. IE
Hi,
Unfortunately IE doesn't like the width of its container to be set by using the margins only.
You could workaround it like this, although it's not quite the same.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/\xhtml1/DTD/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=ISO-8859-1" />
<title> CSS-test </title>
<style type="text/css">
html,body {height:100%;}
body {
color: #FFFFD1;
background-color: #606060;
margin:0;padding:0;
}
#sidebar {
width: 13em;
position: absolute;
top: 1em;
left: 1em;
background-color: #424242;
border: thin solid black;
height:93%;
}
#main {
margin-left: 16em;
margin-top: 1em;
margin-right: 1em;
background-color: #424242;
border: thin solid black;
height:93%;
overflow: auto;
}
</style>
</head>
<body>
<div id="main"> Main left </div>
<div id="sidebar"> Sidebar right </div>
</body>
</html>
Hope that helps.
Paul