Web Analytics Made Easy - StatCounter How to float a button bar? - CodingForum

Announcement

Collapse
No announcement yet.

How to float a button bar?

Collapse
X
Collapse
 
  • Page of 1
  • Filter
  • Time
  • Show
Clear All
new posts
Previous template Next
  • #1

    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>
    Tags: None
  • #2
    Try:
    <style>
    .floatButtons {
    background-position: bottom center;
    }
    </style>
    Zoobie or not Zoobie...That is the problem.
    <body onUnload="flush( ! )">

    Comment

    • #3
      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.

      Comment

      • #4
        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; Feb 11, 2004, 08:50 AM.
        Regards,
        Ronald.
        ronaldvanderwijden.com

        Comment

        • #5
          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.

          Comment

          • #6
            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

            Comment

            • #7
              Thanks B.C.;
              Now I gotta learn how to do events in IE. Where did I put that link to the JavaScript Doc?......

              Comment

              Previous template Next
              Working...
              X