Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    Regular Coder
    Join Date
    Mar 2005
    Posts
    115
    Thanks
    3
    Thanked 0 Times in 0 Posts

    wanting 2 footers and a header to remain on screen

    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:
    http://www.moonmilk.org/test/01testfoot.php

    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:
    http://www.moonmilk.org/test/01testfixit.php
    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.

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    Regular Coder
    Join Date
    Mar 2005
    Posts
    115
    Thanks
    3
    Thanked 0 Times in 0 Posts
    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.
    Last edited by pavinder; 06-08-2007 at 10:55 AM.

  • #4
    Regular Coder
    Join Date
    Mar 2005
    Posts
    115
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Almost there now....but one final infuriating issue I can't work out - a submenu positioning error.

    Example 1:
    http://www.moonmilk.org/test/fixed1.php
    css:
    http://www.moonmilk.org/test/styled/menufixed.css

    Example 2:
    http://www.moonmilk.org/test/fixed2.php
    css:
    http://www.moonmilk.org/test/styled/menufixed2.css

    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;
    display:block;
    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....

  • #5
    Regular Coder
    Join Date
    Mar 2005
    Posts
    115
    Thanks
    3
    Thanked 0 Times in 0 Posts
    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.
    http://www.moonmilk.org/test/01testfoot.php
    Why might this be?

  • #6
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by pavinder View Post
    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 by Anne van Kesteren.

  • #7
    Regular Coder
    Join Date
    Mar 2005
    Posts
    115
    Thanks
    3
    Thanked 0 Times in 0 Posts
    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?

    Thanks...
    Last edited by pavinder; 06-10-2007 at 04:23 AM.

  • #8
    Regular Coder
    Join Date
    Mar 2005
    Posts
    115
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Well, the disappearing scrollbar can be sorted by adjusting/removing the lines in the head:

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

    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.....
    Last edited by pavinder; 06-10-2007 at 04:32 AM.

  • #9
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    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
    Code:
    			<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.
    Last edited by _Aerospace_Eng_; 06-10-2007 at 11:17 PM.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #10
    Regular Coder
    Join Date
    Mar 2005
    Posts
    115
    Thanks
    3
    Thanked 0 Times in 0 Posts
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •