Doctype problem

[edacsac]

I have a mess. I did a website for someone that wanted a fixed height, middle scrolling div setup, for sort of themed layout. I found a nice tutorial that had a fixed header and a fixed footer, with a scrolling middle div that uses a hack for IE with a top and bottom border to keep the scrolling div within bounds, depending on actual browser size. I also added a drop style menu that uses only css to create the drops. Tons of work involved, happy website owner.

So like most folks recommend, I develop in firefox, then test in IE. All was well. I tested in multiple versions ff, IE, konquer, safari, opera, flock, seamonkey and mozilla. (It's nice having a few computers laying around.) Of course IE7 shuts down the whole production...

So what I have now is a layout that relies on quirks mode, and a menu that requires standards mode for IE7. I think my head is going to explode. Either the layout is toast or no drop menu. Both are desired.

I've always stayed away from the particular design I did, just because it never worked for me when trying it in the past. But when I found the tutorial, I was all to eager to finally have that type of layout work.

Has anyone been successful with a fixed sized header attached to the top, fixed sized footer attached to the bottom and a scrolling, dynamic sized div in the middle? I'd like to keep this design, because frankly I think it's pretty sweet, but I fear I've failed again.

[Xapti]

That style of web design is not very flexible, some people may not like it, but if that's what you want, it's not that bad, so go ahead and keep it that way. It can be done quite easily in standards mode with a proper doctype, and using absolute positioning. You will need a javascript fix (conditional commented will work) for IE6 or lower though... although you could maybe use other methods which won't require it. The point is you don't need to be using quirks.
The reason it needs a fix is because IE6 and lower doesn't support simultanious use of both top and bottom (or left with right).
html,body{height:100%)
#header{height:?em}
#middle{position:absolute;top:?em;bottom:?em;overflow:auto}
#footer{position:absolute;bottom:0;height:?em}

[edacsac]

Thanks Xapti!

It's nice to know why this layout needs the fix at least. I didn't know that about using both top or bottom, etc. Makes sense really.

Once I put the page in standards mode, the behaviour is the same in IE 6 and IE7. The bottom declarations still are ignored. I would hate to use javascript to fix my layout. lol. Now that you mention conditional comments, I guess there are a alot of options. They're all pretty poor though.

#wrap {
display:block;
overflow:hidden;
position:absolute;
z-index:3;
top:0px;
bottom:5px;
width:822px;
height:100%;
max-height:100%;
margin-left:-419px;
left:50%;
background-image: url(../img/back2.gif);
background-repeat: repeat-y
}

#head{
display:block;
position:relative;
width:822px;
height:35px;
border:0px solid #000;
background:#000;
z-index:10;
background-image: url(../img/woodTop2.jpg);
text-align:center;
}

#content {
display:block;
overflow:auto;
position:absolute;
z-index:5;
top:172px;
bottom:24px;
* bottom:27px;
width:797px;
padding:0px;
margin-left:12px;
margin-bottom:724px;
border-left:0px solid #000;
border-right:0px solid #000;
background:#5f87f9;
}

* html #content {
top:0;
bottom:0;
height:100%;
width:799px;
margin-bottom:724px;
border-top:172px solid #5f87f9;
border-bottom:24px solid #5f87f9;
* border-bottom:27px solid #5f87f9;
}

#foot{
display:block;
position:absolute;
bottom:0;
width:822px;
height:25px;
/*height:40px;*/
border:0px solid #000;
background:#000;
z-index:10;
background-image: url(../img/woodBottom2.jpg);
}

[SuzyUK]

hi edacsac

is that your existing CSS.. and is the HTML laid out logically, and is there any sidebars?

<wrap>
..head
..content
..foot
</wrap>

do you fancy posting what you have (HTML too) even though it is quirks.. because I think the top/bottom border method should also work in strict mode

Xapti's, I think, talking about using all four co-ordinates for Absolute Positioning which would indeed make this type of layout much easier, but I don't *think* you should need to resort to it or JS hacks if you don't want to.. yet but it is one option if you need to ;)

-Suzy

[edacsac]

Hi Suzy,

Yes it's laid out logical. Below is the whole sh-bang for my layout. The example is in strict mode, so you can see it broken in ie 6 as well.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<HTML>
<HEAD>
<TITLE></TITLE>
<style>
html {
height:100%;
max-height:100%;
padding:0;
margin:0;
border:0;
background:rgb(209,205,193);
/*font-size:76%;
font-family:arial, georgia, palatino linotype, times new roman, serif;*/
font-size:13px;
font-family:tahoma, arial, georgia, palatino linotype, times new roman, serif;
color:#303030;
/* hide overflow:hidden from IE5/Mac */
/* \*/
/*overflow: hidden;*/
/* */
}

body {
height:100%;
max-height:100%;
overflow:hidden;
padding:0;
margin:0;
border:0;
background:#fff;
background-image: url(../img/grad.jpg);
background-repeat: repeat-x
}

#wrap {
display:block;
overflow:hidden;
position:absolute;
z-index:3;
top:0px;
bottom:5px;
width:822px;
height:100%;
max-height:100%;
margin-left:-419px;
left:50%;
background-image: url(../img/back2.gif);
background-repeat: repeat-y
}

#head{
display:block;
position:relative;
width:822px;
height:35px;
border:0px solid #000;
background:#000;
z-index:10;
background-image: url(../img/woodTop2.jpg);
text-align:center;
}

#logo {
display:block;
/*overflow:auto;*/
position:relative;
z-index:9;
/*top:151px;
bottom:52px;*/
width:796px;
height:90px;
margin-top:10px;
margin-left:12px;
background:#FFCC66;
}

#menuPos{
display:block;
/*overflow:auto;*/
position:relative;
width:795px; /*670px*/
height: 20px; /*was 23*/
margin-top:0px;
margin-left:12px; /*22*/
background:#FF66FF;
z-index:100;
}

#content {
display:block;
overflow:auto;
position:absolute;
z-index:5;
top:172px;
bottom:24px;
* bottom:27px;
width:797px;
padding:0px;
margin-left:12px;
border-left:0px solid #000;
border-right:0px solid #000;
background:#5f87f9;
}

* html #content {
top:0;
bottom:0;
height:100%;
width:799px;
margin-bottom:724px;
border-top:172px solid #5f87f9;
border-bottom:24px solid #5f87f9;
* border-bottom:27px solid #5f87f9;
}

#thin{
position:relative;
width:209px;
* width:209px;
padding:5px;
height:1600px;
margin-top:10px;
margin-bottom:5px;
margin-left:0px;
float:left;
background:#99CC66;
}

#thick{
position:relative;
width:542px;
* width:548px;
height:1600px;
margin-top:10px;
margin-bottom:5px;
margin-left:10px;
float:left;
background:#fff;
}

#foot{
display:block;
position:absolute;
bottom:0;
width:822px;
height:25px;
/*height:40px;*/
border:0px solid #000;
background:#000;
z-index:10;
background-image: url(../img/woodBottom2.jpg);
}
</style>

</HEAD>
<BODY>
<div id="wrap">
<div id="head"></div>
<div id="logo">Logo</div>

<div id="menuPos">
A list menu goes here, but has no affect on the layout problems
</div>

<div id="content">

<div id="thin" style="height:2000px;">
Div boxes with ads. No affect on layout
</div>

<div class="thick" id="thick" style="height:2000px;">
Main content.
</div>
</div>

<div id="foot"></div>
</div>

</BODY>
</HTML>