CSS drop down menu in CSS frame problem.

I have a drop down menu in the header frame of my website.
For Firefox and IE7 everything is OK but in IE6 the middle frame overlaps the menu.
I guess that the problem is the position: fixed problem of IE6.
This is the CSS for the frames:
/* for internet explorer */
* html body {
padding:150px 0 80px 0;
}

#container {
position:fixed;
top:150px;
left:0;
bottom:80px;
right:0;
overflow:auto;
padding:20px;
text-align:center;
z-index:1;
}

* html #container {
height:100%;
width:100%;
z-index:1;
}

#header {
position:absolute;
top:0;
left:0;
width:100%;
height:150px;
overflow:auto;
z-index:2;
}
* html #header {height:150; z-index:2;}

#footer {
position:absolute;
bottom:0;
left:0;
width:100%;
height:80px;
text-align:right;
border-top: 1px solid rgb(200,200,200);
background-color: #fff;
z-index: 50;
}

* html #footer {height:80px; z-index:50;}



For the menu:

#wrapper {
background: #fff url(images/nav_bg.png) repeat-x;
width: 100%;
margin: 0px auto;
z-index:200;
position: fixed;
}

* html #wrapper {
position: absolute;
height:150;
z-index:200;
}

......menu...



In the HTML file:

<div id="header">
<div id="wrapper">
...menu...
</div></div>



I cannot see the problem and I hope you'll help me guys.

 

CSS Frame? CSS doesn't HAVE frames. Are you using the page as a frameset or using iFrames? or are you just mislabelling DIV's?

Right now - I can see problems just from EVERYTHING seeming to be position:absolute - it makes me suspect you are using the wrong type of positioning to build the site in the first place.

Because you have so much absolute positioning, to get the absolute positioned dropdown menu to appear over the absolute positioned headers/footers and content (NONE of which should be absolute positioned BTW), you'll have to slap z-index on all of them.

If you have more complete HTML to go with that CSS - or a demo URL up, we could probably point you at writing the page PROPERLY without all that absolute positioning nonsense (and position fixed on the content which is a REAL problem)

 

Here you can see a webpage that shows the problem.
Works fine with Firefox and IE7 but not with IE6.

http://free.hit.bg/fiesta


Also you can find html and css files attached.

 

Also, could you tell us which parts of the site you're trying to make stay while the client scrolls? I have seen this technique with the 150px padding on the body before, but IE6 plays by different rules anyway.

Is it the header that needs to stay? Or do you want the whole page fixed and just the content scrolling with a scrollbar?

*edit okay I think I see it. You only need the header and footer in place.
http://www.pmob.co.uk/temp/
search for "fixed" in your search box, and there are templates which are a little old but still work. The problem with some is that they rely on IE6 to be in Quirks mode. There's another Dan just sent me from Soulscratch/Ininimo or whoever... but I've got to search for that one.

 

Tnx for the interest, Stomme poes.

I want the hole page fixed and just the content scrolling with a scrollbar.

If you use firefox or IE7 you should see the page as I want to be.

 

Here's the one I was looking for.
http://www.soulscratch.com/code/css/header-footer-fixed2.html

It's not in quirks mode and works.

If you want, you can use a site/placeholder I did as a guide, but it's got a sidebar:

www.stichtinglevenzonderzorg.com

With this one, a print designer wanted the website to be as stable as print. ha, ha. So that's what I did. There's a scrollbar in the menu if the text is enlarged, as well as room for text to grow in the main area. The sidebar will eventually pop out, but that's okay, people who really super-enlarge text know the pages will start looking funny at some point anyway. But I forgot to re-add back overflow:hidden for the h1. So now it's poking out in the menu, and I don't have access to the CSS sheet anymore : (

 

Well... first off your menu seems to bomb in every browser here (opera is even doing the collapsing content bug) - looking over what you are trying to do, I'm going to suggest something I rarely EVER suggest. In fact a few people around here are gonna plotz that I even MENTION the idea of doing the layout this way.

This layout behavior calls for javascript, not CSS.

Why? because the depth sorting issues and nesting issues of absolute and relative positioning are going to be the death of you. Getting absolutes to obey z-index when one is a 'nephew' (which the dropdown could be considered) is a pain in the backside and usually won't fly cross browser without throwing hordes of hacks at it... .js would simplify the process, work in all browsers (even IE) and allow for graceful degredation. If you weren't doing a dropdown menu, the CSS would be fine. With the dropdown - it's too much hassle and headaches.

I would make html and body height:100%; overflow:hidden; - then wrap the whole page in a container DIV set to height:100%; overflow:auto. Set all other items on the page back to normal behavior with no positioning as if it was going to be a flat site. THEN, set the 'content' area that will have the scrollbar to overflow:auto... after this it's pure javascript.

At this point the page would behave 'normally' - so first we use the javascript to set the container to overflow:hidden to remove it's scrollbar. Doing this in the javascript means if .js isn't present, the page functions normally.

Then you pull from #header and #footer their heights, and add them together - store this in a variable for use inside our function. The function would read clientHeight off the browser, subtract our header and footer heights, then make the content area (which we set to overflow:auto in the CSS) that fixed height. We then assign this function to trip on a resize, and then once manually so we nab page-load. I would suggest loading the library at the END of the document just before the </body></html> instead of using onload, because the effect will get applied before images load making the rendering look much smoother. (I'm really starting to dislike onload on those grounds)

The script would be something like:

/* grab the height of the header and footer */
var fixedHeight=
	document.getElementById('header').offsetHeight+
	document.getElementById('footer').offsetHeight;

function adjustHeight() {
	document.getElementById('contentWrapper').style.height=(document.body.clientHeight-fixedHeight)+"px";
}

/* setting this here means script off, we get 'normal' behavior */
document.getElementById('container').style.overflow="hidden";

/* Trap window resizes */
if (window.addEventListener){ 
	window.addEventListener('resize',adjustHeight,false);
} else if (window.attachEvent){ 
		window.attachEvent("onresize",adjustHeight); 
} else { 
		window.onresize=adjustHeight;
} 

/* Do it once at load */
adjustHeight();

Code (markup):

Let's see... I'll toss together a rewrite using the above script to show how it's done. YES, it means people without javascript will get a 'normal' page with non-fixed headers and footers... that's not a bad thing if it means the people with .js enabled get the effect you desire - because how many people with browsers capable of all that fancy absolute positioning are browsing with .js completely disabled?

-- edit -- if the footer and header heights might change with the width of the browser (unlikely), you'd want to calculate their heights inside the function instead of pre-calc. Just a warning.

 

... and here's how I'd approach that.
http://battletech.hopto.org/for_others/blizzardofoz/template.html

as with all my examples the directory is unlocked
http://battletech.hopto.org/for_others/blizzardofoz/

so you can grab all the gooey bits. I totally reworked the menu code into something simpler - the whole thing being built out of two images instead of nine (or was it twelve?) - I also axed ALL of the tables from the design, using simple float rules. Excuse all the text being changed into alphas, for some reason NONE of the text editors I have wanted to work with Cyrillic.

Validates XHTML 1.0 strict, WOULD validate the CSS if mainstream gecko didn't have it's head up it's ass about inline-block (thankfully that IS fixed in FF3 - though I'd suggest including the other code for at least two years) and the behavior file I put in there so IE6/earlier will make the dropdown menu.

Tested working in IE 6 & 7, Opera, Safari and Firefox. IE 5.5 has some layout issues due to the buggy box model (OH WELL)

-- edit --

There was a safari bug I was able to squash by making the .js read document.body.offsetHeight into a variable for no good reason - allegedly it also fixes some gecko bugs too.

-- edit edit -- Ok, this is REALLY screwy - it works fine locally, but the header is all messed up when uploaded to the server.

-- edit edit edit -- NM. All fixed.

 

Oh, I styled the H1 with a dummy span for image-replacement - I kind of 'assumed' you were planning on putting a image there over that text, given the sheer volumn of white-space you put around it.

 

Thank you very much guys!