No replies
GhodMode
Offline
newbie
Last seen: 18 years 11 weeks ago
Timezone: GMT-5
Joined: 2004-09-14
Posts: 1
Points: 0

My users want their web page to work kinda like MS Excel, with the tabs along the bottom Evil. So, I've created a DIV with a buncha links inside it and used absolute positioning to put it on the bottom.

The DIV doesn't wrap, so it ends up really wide. I've also created some links with embedded JavaScript function calls to change the the DIV's left position. It starts out at 0, then if someone clicks on the "scroll right" link, a little bit of javascript decreases the left position of the "tabs" by 1/4 of the client width.

It works fine in IE, but I can't seem to get it to work in Firefox. The JavaScript console does not report any errors. The W3C spec. says that negative numbers are allowed.

Does anyone have any ideas on how to get this to work in Firefox? The code's below.

Thank you,
GM

-- CSS stuff
    #controls {
        position: absolute;
        bottom: 22px;
        left: 0px;
        float: bottom;
        background: #EEEEEE;
        overflow: hidden;
        width: 100%;
    }

    .cbutton {
        font: normal 7pt sans-serif;
        line-height: 12px;
        background: #CCCCCC;
        border: 2px outset silver;
        color: black;
        padding-left: 2px;
        padding-right: 2px;
    }

    #begin {
        float: left;
    }

    #left {
        float: left;
    }

    #right {
        float: right;
    }

    #end {
        float: right;
    }

    #tabs {
        position: absolute;
        background: #BBBBBB;
        overflow: visible;
        width: 100%;
        bottom: 0px;
        white-space: nowrap;
        padding-bottom: 3px;
        padding-left: 0px;
        padding-right: 0px;
        padding-top: 0px;
        float: bottom;
    }

...
-- JavaScript stuff
    function scroll_left( tabs_name ) {
        var tabs = new getObj( tabs_name );

        if ( !tabs ) return;

        left_pos += scroll_amt;

        if ( left_pos > 0 ) {
            left_pos = 0;
        }

        tabs.style.left = left_pos;
        document.selection.tab_pos.value = left_pos;
    }

    function reset_left( tabs_name ) {
        var tabs = new getObj( tabs_name );

        if ( !tabs ) return;

        left_pos = 0;
        tabs.style.left = left_pos;
        document.selection.tab_pos.value = left_pos;
    }

    function right_end( tabs_name ) {
        var tabs = new getObj( tabs_name );

        if ( !tabs ) return;

        left_pos = tabs_right;

        tabs.style.left = left_pos;
        document.selection.tab_pos.value = left_pos;
    }

...

    <div id="controls">

        <a class="cbutton" id="begin" href="javascript:reset_left('tabs');">│◄</a>
        <a class="cbutton" id="left" href="javascript:scroll_left('tabs');">◄</a>
        <a class="cbutton" id="end" href="javascript:right_end('tabs');">►│</a>
        <a class="cbutton" id="right" href="javascript:scroll_right('tabs');">►</a>
    </div>

...
-- HTML stuff
    <div id="tabs" style="left: 0;">
    <span>&nbsp;</span>
    
        <a
            href="javascript:;"
            onclick="select_tab( '0' ); return false;"
            class="active_tab"
        >Renewals Completed This Year</a>
        
        <a
            href="javascript:;"
            onclick="select_tab( '1' ); return false;"
            class="tab"
        >Renewals Completed This Year - Details</a>
        
-- There's more tabs, but you get the idea
    </div>