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 11 of 11
  1. #1
    New to the CF scene
    Join Date
    Jan 2007
    Location
    Salem, Oregon
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    IE6 CSS Footer problem

    I have a small problem that only seems to occur in IE6.

    At the bottom of this website's pages (see this page as an example, which uses this CSS file) there is an absolutely-positioned footer which in theory hugs the bottom of the viewport or the document, whichever is lower.

    This works fine unless you're using IE6 and the height of the document changes after the HTML has finished loading (say, if I use Javascript to make a normally hidden DIV visible). If this happens, the bottom of the page "kicks out from under the footer", so to speak, and the footer stays put while the page gets longer, which occasionally causes the footer to obscure necessary information, or even the submit button.

    Code:
    
      +---------------+        +---------------+
      |               |        |               |
      |               |        |               |
      |  Normal Page  |        | Same Page     |
      |  w/ Footer    |        | w/ Normally   |
      |               |        | Hidden DIV    |
      |               |        | Now Visible   |
      |               |        |               |
      |               |        | (Content is   |
      +---------------+        +---------------+
      | Footer        |        | Footer        |
      +---------------+        +---------------+
                               | by unmoving   |
                               | footer...     |
                               |               |
                               +---------------+
    (Click "4" or "5" on the example page to see this happen. It won't work if your viewport is tall enough to accomodate the whole page, though, so you might need to try shrinking your browser window.)

    I know I can just wrap the form in a containing <div> with enough height to accomodate any potential height changes, but there are other pages on the site that are harder to predict. Is there any way to get Internet Explorer 6 to move a bottom-positioned <div> on the fly?

  • #2
    New to the CF scene
    Join Date
    Jan 2007
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Bump for I need an answer for this problem too.

  • #3
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,302
    Thanks
    28
    Thanked 276 Times in 270 Posts
    Quote Originally Posted by djublonskopf View Post
    there is an absolutely-positioned footer which in theory hugs the bottom of the viewport or the document, whichever is lower.
    That’s not what absolute positioning does by itself. Normally, absolutely positioned content is positioned relative to the initial viewport. Then if you scroll the page, the footer will remain in the same spot as in that diagram in your post. In order for the footer to work as requested, relatively absolute positioning is required:

    CSS:
    Code:
    html, body {
      height: 100%;
      }
    div#container {
      position: relative;
      min-height: 100%;
      padding-bottom: 1.2em;
      }
    * html div#container { /* IE6 star‐HTML exploit */
      height: 100%;
      }
    div#footer {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 1.2em;
      }
    HTML:
    Code:
    
    <html>
      
      <body>
        <div id="container">
          <div id="content"></div>
          <div id="footer"></div>
        </div>
      </body>
    </html>
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #4
    New to the CF scene
    Join Date
    Jan 2007
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for the reply, but that solution didn't work for me.

    What did work for me, though, was making IE load a separate CSS sheet with the following:

    Code:
    #footer
    {	
    	top: expression((document.body.offsetHeight - 60) + "px"); 
    }
    (60 is the height of my footer)

  • #5
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,302
    Thanks
    28
    Thanked 276 Times in 270 Posts
    Quote Originally Posted by dyzzy View Post
    What did work for me, though, was making IE load a separate CSS sheet with the following:

    Code:
    #footer
    {	
    	top: expression((document.body.offsetHeight - 60) + "px"); 
    }
    (60 is the height of my footer)
    I’d use real CSS if possible. Microsoft’s CSS expressions use JavaScript, so I assume that they wouldn’t work for users with JavaScript disabled.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #6
    New to the CF scene
    Join Date
    Jan 2007
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I have the same issue as the original poster.
    I needed a specific footer at the bottom of every page that needs to be at the bottom of the screen or the document, whichever is lower.

    Reading the advice here, I got that, now I have a new issue.
    My content needs to be centered on the page within an 800px table.

    However, if I position it to the bottom absolutely, I also need to set absolute left or right position, which does not work for me.

    Is there anyway to position my footer absolutely on the bottom while relatively centered on the page?

    Here is the site where I am trying to do it:
    http://www.echosales.ca

    Check the various pages to see the various different results I am getting.

    Thanks in advance to any that can help.

  • #7
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,302
    Thanks
    28
    Thanked 276 Times in 270 Posts
    Quote Originally Posted by MrMyles View Post
    However, if I position it to the bottom absolutely, I also need to set absolute left or right position, which does not work for me.

    Is there anyway to position my footer absolutely on the bottom while relatively centered on the page?
    Put the footer inside a div element. Give that element a width of 100% and absolutely position it zero from the left and bottom. Then, center the normally positioned footer inside of that.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #8
    New to the CF scene
    Join Date
    Jan 2007
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for the help, much appreciated.

    It works perfect for Opera and FF, but IE6 still sticks it on the left.

  • #9
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,302
    Thanks
    28
    Thanked 276 Times in 270 Posts
    I believe that you need to use text-align: center to center it in Internet Explorer 6’s quirks mode. You’re using the invalid align: center.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #10
    New to the CF scene
    Join Date
    Jan 2007
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Tried that too, IE just refuses to play nice.
    Thanks for the help.

  • #11
    New to the CF scene
    Join Date
    Jan 2007
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I see now.
    My problem rested with using tables.
    Soon as I removed the footer from it's prison cell, it worked perfectly.

    Thanks for the help!


  •  

    Posting Permissions

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