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 7 of 7
  1. #1
    Regular Coder
    Join Date
    Jun 2002
    Location
    Round Rock, Texas
    Posts
    443
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question How to float a button bar?

    New to positioning using CSS

    I want the row of buttons, currently fixed at the bottom of my page, to "float" at the bottom of the browser window. In Other words, the buttons are always displayed at the bottom of the window as I scroll the document.

    My problem: "position: fixed" does not seem to have any effect. The buttons remain in their original position.

    I'm using IE 6 in Windoze XP.

    Here's my code skeleton.
    Code:
    <html>
     <head>
      <style>
        .floatButtons {
           position: fixed;
           bottom: 10%;
        }
      </style>
     </head>
    
     <body>
       <form>
         <table class='floatButtons' ...>
            <tr>
              <td>
                  <input type='submit'...>
              </td>
              <td>
                  <input type='reset'...>
                  <input type='hidden' ...> 
              </td>
            </tr>
          </table>
        </form>
       </body>
    </html>

  • #2
    Senior Coder
    Join Date
    Jun 2002
    Location
    ColoRockyz
    Posts
    1,646
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Try:
    <style>
    .floatButtons {
    background-position: bottom center;
    }
    </style>
    Zoobie or not Zoobie...That is the problem.
    <body onUnload="flush( ! )">

  • #3
    Regular Coder
    Join Date
    Jun 2002
    Location
    Round Rock, Texas
    Posts
    443
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Sorry Zubie, didn't work. The button-table stayed put.

    There's gotta be something fundamental that I'm missing...

    I took the buttons (<input> tags) out of the <table> and put them in a separate <div> - same tag nesting level as the <table>. Still same non-results.

    When using the <div> I tried writing the code as given by Zubie, and as I had it originally. No effect in either case.

    "position: relative;" and "position: absolute;" do affect the placement, but "fixed" seems to have no effect.

  • #4
    Senior Coder
    Join Date
    Jun 2002
    Location
    The Netherlands, Baarn, Ut.
    Posts
    4,252
    Thanks
    0
    Thanked 0 Times in 0 Posts

    IE again...

    Older versions of IE don't support position: fixed; not sure about IE6, though. Maybe you failed to supply an appropriate doctype, causing it to go into quirks mode.
    There is a cross browser alternative, by the way, using abs positioning; I just saw it yesterday. Have to look it up, be back soon.

    Update:

    Hah, of course it was A List Apart: "Exploring footers" .
    Last edited by ronaldb66; 02-11-2004 at 01:50 PM.
    Regards,
    Ronald.
    ronaldvanderwijden.com

  • #5
    Regular Coder
    Join Date
    Jun 2002
    Location
    Round Rock, Texas
    Posts
    443
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ronald;
    None of the examples in that article did what I want. The referenced article shows how to consistantly display a footer at the bottom of some content. However when the window is resized such that the content goes below the the window, the footer is not seen. This is fine for footer behavior, but that's not quite what I have in mind.

  • #6
    Senior Coder
    Join Date
    Jun 2002
    Location
    near Oswestry
    Posts
    4,508
    Thanks
    0
    Thanked 0 Times in 0 Posts
    No version of Internet Explorer supports position fixed. But you can emulate it in javascript with something like this:
    Code:
    window.attachEvent('onscroll',function()
    {
    	obj.style.top=document.body.scrollTop+'px';
    });
    "Why bother with accessibility? ... Because deep down you know that the web is attractive to people who aren't exactly like you." - Joe Clark

  • #7
    Regular Coder
    Join Date
    Jun 2002
    Location
    Round Rock, Texas
    Posts
    443
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks B.C.;
    Now I gotta learn how to do events in IE. Where did I put that link to the JavaScript Doc?......


  •  

    Posting Permissions

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