Forum Moderators: not2easy
<snip>
and listed below.
The point of my layout is to have the "prod" container expand vertically and the "photo" container expand horizontally as the browser window is expanded.
Everything is absolute positioning, no floating. It works great in IE8, Firefox, etc. In IE6 it's very messed up. For example, the "info" container ends up inside the "header" container, even though it's defined inside the "leftmiddle" container! I did searches for IE6 bugs and can't find the answer.
You might notice an unnecessary horizontal scroll. That's because if I add "overflow: hidden;" to the "middle" container, the entire middle section disappears in IE6 and thus you would not be able to see much. That's another IE6 bug I could not find a solution for.
Thirdly, the "prod" container is set to vertical scroll, which again works fine in newer browsers but not IE6.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>CSS Test</title>
<style type="text/css">
* {
margin:0px;
padding:0px;
}
#wrap {
position: absolute;
width:100%;
height: 100%;
border: none;
}
#header {
position: absolute;
height: 100px;
width: 100%;
top: 0px;
background-color: red;
border: none;
}
#footer {
position: absolute;
height: 20px;
width: 100%;
bottom: 0px;
background-color: red;
border: none;
}
#middle {
position: absolute;
width: 100%;
top: 100px;
bottom: 20px;
background-color: blue;
border: none;
}
#leftmiddle {
position: absolute;
width: 400px;
top: 0px;
bottom: 0px;
left: 0px;
background-color: pink;
border: none;
}
#cat {
position: absolute;
top: 0px;
height: 105px;
width: 400px;
background-color: yellow;
border: none;
}
#info {
position: absolute;
height: 60px;
width: 400px;
bottom: 0px;
background-color: lightblue;
border: none;
}
#prod {
position: absolute;
top: 105px;
bottom: 60px;
background-color: lightgreen;
width: 400px;
border: none;
overflow-y: scroll;
}
#photo {
position: absolute;
width:100%;
margin-left:400px;
top: 0px;
bottom:0px;
background-color: orange;
border: none;
}
</style>
</head>
<body>
<div id="wrap">
<div id="header">main menu</div>
<div id="middle">
<div id="leftmiddle">
<div id="cat" align=center>categories</div>
<div id="prod">
<ul>
<li>first product</li>
<li>products go here</li>
<li>products go here</li>
<li>products go here</li>
<li>products go here</li>
<li>products go here</li>
<li>products go here</li>
<li>products go here</li>
<li>products go here</li>
<li>products go here</li>
<li>products go here</li>
<li>products go here</li>
<li>products go here</li>
<li>products go here</li>
<li>products go here</li>
<li>products go here</li>
<li>products go here</li>
<li>products go here</li>
<li>products go here</li>
<li>products go here</li>
<li>products go here</li>
<li>products go here</li>
<li>products go here</li>
<li>products go here</li>
<li>products go here</li>
<li>products go here</li>
<li>products go here</li>
<li>products go here</li>
<li>products go here</li>
<li>products go here</li>
<li>products go here</li>
<li>products go here</li>
<li>last product</li>
</ul>
</div> <!-- prod -->
<div id="info">order information</div>
</div> <!-- leftmiddle -->
<div id="photo">
Photo goes here
</div> <!-- photo -->
</div> <!-- middle -->
<div id="footer" align=center>Copyright notice</div>
</div> <!-- wrap -->
</body>
</html>
[edited by: engine at 10:38 am (utc) on May 16, 2009]
[edit reason] See CSS Charter [/edit]
Colors: [w3.org...]
As to getting in trouble with absolute positioning with IE6:
IE6 doesn't support a number of things, one of them is setting the top and bottom of the same element.
To work around this, try IE7.js [code.google.com].
I did not know about the top/bottom issue with IE6. That is a royal pain.
I tried the javascript, but that made things even worse! The Prod and Footer containers disappeared entirely.
HTML Strict
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
with
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
no change. I also replaced other "illegal color names". I upgraded to CSE 9 and cleaned up other minor notices (still no errors).
The reason to use a full doctype is to make sure IE6 stays out of quirksmode.
Since you use top and bottom at the same time and IE6 out of the box doesn't do that, you need some scripted help. IE7.js gives you that (and more), but acts all funny if IE6 is in quirksmode, hence the suggestion to get out of quirksmode. [IE6 always behaves better out of quirksmode, in quirksmode it's like having IE5 all over again]
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
Putting the ie7.js line back in, it still doesn't work. Same result as before - the Prod container disappears.
