View Full Version : wanting 2 footers and a header to remain on screen

06-06-2007, 09:41 AM
Have done some serious searching but can't find a workable solution...

I have a vertical menu at top left on screen, and 2 different footers at bottom left and bottom right.

As I scroll down the content, or as the window is resized I want all 3 of these to remain in the same positions relative to the window.

Easy to do in Firefox/Safari by means of fixed positioning as in my test page:

Of course IE doesn't work.

Searching has found many solutions for keeping the footer at the bottom of the content (footerstickalt for example), or ways of having a single 100% width footer remaining in the viewing window. But I can't seem to find a way to have 2 different footer divs and the menu all fixed in position in IE.

An attempt based on a cssplay.com example resulted in:
but then new problems appeared in all browsers, including strange scrollbars on menus, and no main scrollbar at all in Firefox. Seemed to be creating more problems than it solved, and involved a lot of specific definitions of div widths, heights etc.

Is there a simple way to keep things "fixed" in IE? And something that isn't going to behave differently in different versions!

Thanks in advance for any guidance you can offer.

06-06-2007, 09:50 AM

View the source of the pages.

06-06-2007, 12:04 PM
My second example was based on the first of the pages you suggest, Aerospace, but I'll check for a 9th time, as something obviously hasn't translated.

06-08-2007, 11:10 AM
Almost there now....but one final infuriating issue I can't work out - a submenu positioning error.

Example 1:

Example 2:

The relevant css seems to be the positioning declaration:

In example 1:
#menu ul ul ul,
#menu ul ul ul ul,
#menu ul ul ul ul ul {
position: absolute;
top: 0;
left: 100%;
width: 100%;

In this example ALL the submenus are aligned with the top of the menu.
Whether I use top: 0; or top: 0px; the same occurs.

In example 2:
#menu ul ul ul,
#menu ul ul ul ul,
#menu ul ul ul ul ul {
position: absolute;
top: 1;
left: 100%;
width: 100%;

Now ALL the submenus appear aligned with the menu element BELOW that being rolled over.
Whether I use top: 1; or top: 10; the same occurs. I'm confused - not sure WHY this is happening.
If I add "px" e.g. top: 10px; ALL the submenus simply appear that pixel count from the top of the menu.

Various combinations of having display: block; there or not make no difference.

There's obviously some conflict going on somewhere, a little guidance would be much appreciated.

Thanks in advance for any help....

06-08-2007, 11:28 AM
Just to clarify, I realise why the declaration top:0 might be displaying submenus where it is (i.e.top=0!)

However this is exactly the same code which displayed the submenus in their correct positions in the example in my initial post on this thread.
Why might this be?

06-09-2007, 02:38 AM
My second example was based on the first of the pages you suggest, Aerospace, but I'll check for a 9th time, as something obviously hasn't translated.
I would question whether the method for fixed positioning in IE 6 by Stu Nicholls at cssplay is better than using a dynamic property.

Did you notice that you are losing the vertical scroll bar when you make the browser window narrower?

With JavaScript enabled, IE 6 supports fixed positioning through a dynamic property. You can try out a simple example (http://annevankesteren.nl/test/examples/ie/position-fixed.html) by Anne van Kesteren.

06-09-2007, 11:17 AM
I hadn't noticed the scrollbar missing. Thanks for pointing that out.

The example you link to does seem a valid alternative to Stu Nicholls...it's certainly a simple piece of code although I must admit with my limited knowledge I can't see any obvious benefits of using a dynamic property (Stu's works in various browsers too) and in fact in Firefox on Mac isn't correctly assigning the bottom position - it leaves a gap even if bottom is set to 0.

Back to the matter at hand, it is also using fixed/absolute positioning and doesn't improve the way my submenus are incorrectly displaying. Any ideas for this?


06-10-2007, 03:36 AM
Well, the disappearing scrollbar can be sorted by adjusting/removing the lines in the head:

<!--[if lte IE 6]>
<style type="text/css">
html {overflow-x:auto; overflow-y:hidden;}

although of course once this is done then the footer scrolls with the page in IE6 which will necessitate yet another different IE patch/fix.

Really fed up with this.

And still the submenu positioning issue....can anybody suggest what's going on with that? I'm guessing it's to do with the menu now no longer using relative positioning (as that was causing problems in IE to begin with in my original page, so I therefore changed it) but what's a valid workaround?

Any suggestions, please.....

06-10-2007, 11:12 PM
Hmm now I see what you were saying about the examples. The problem with the examples is it makes anything position:relative or position:absolute fixed so your menu won't work. I'm afraid now you will have to use a JS solution. I took a look at your code a bit more and notice you have things like this

<div class="newsitem"> If a butterfly flaps its wings in the rain forest, it will, if nothing else, set off an infinite chain reaction in the minds of Alejandro González Iñárritu and his creative collaborator, Guillermo Arriaga. The director and screenwriter have a thing for causal connections, which, in "Babel," they literally track to the ends of the Earth.</div>
<div class="newsgap"></div>
What is the point of the empty div with class="newgap"? Why not just add a bottom margin to newsitem? I found this site: http://www.doxdesk.com/software/js/fixed.html
It has a js file that you add in between your head tags. It will fix position:fixed in IE. The only issue is the fixed elements jump about 1px then back down but you might have to live with that.

06-11-2007, 10:50 AM
Thanks for confirming what I'm trying to do isn't going to be straightforward.

I appreciate the suggestion, Aerospace - I'll give this a shot.