Firefox: negative CSS position values for elements

[Ghodmode]

My users want their web page to work kinda like MS Excel, with the tabs along the bottom . 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');">&#9474;&#9668;</a>
        <a class="cbutton" id="left" href="javascript:scroll_left('tabs');">&#9668;</a>
        <a class="cbutton" id="end" href="javascript:right_end('tabs');">&#9658;&#9474;</a>
        <a class="cbutton" id="right" href="javascript:scroll_right('tabs');">&#9658;</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>

--
-- GhodMode

 

[LFI]

Code for JavaScript functions getObj(...) and select_tab(...) please.

--Dave

 

[Ghodmode]

    // From quirksmode.org
    function getObj( name )
    {
        if ( document.getElementById ) {
            this.obj   = document.getElementById( name );
            this.style = document.getElementById( name ).style;
        } else if ( document.all ) {
            this.obj   = document.all[name];
            this.style = document.all[name].style;
        } else if ( document.layers ) {
            this.obj   = document.layers[name];
            this.style = document.layers[name];
        }
    }
...

    function select_tab( tab_value ) {
        var current_tab = new getObj( 'current_tab' );
        current_tab.obj.value = tab_value;
        document.selection.submit();
    }

--
-- GhodMode

 

[LFI]

Thanks, but even with that, it is difficult to test since I don't have enough HTML to build the page at this end. I don't have any object called 'current_tab' to grab or other JavaScript functions mentioned in this code.

Can you post ALL the source code or a link to the page?

Thanks.

--Dave

 

[Ghodmode]

Here's 99% of the whole thing...

<html>
<head>
    <meta http-equiv="content-style-type" content="text/css">
    <meta http-equiv="content-script-type" content="text/javascript">
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="expires" content="-1">

    <title>Contract Management</title>
<script type="text/javascript">
    // From quirksmode.org
    function getObj( name )
    {
        if ( document.getElementById ) {
            this.obj   = document.getElementById( name );
            this.style = document.getElementById( name ).style;
        } else if ( document.all ) {
            this.obj   = document.all[name];
            this.style = document.all[name].style;
        } else if ( document.layers ) {
            this.obj   = document.layers[name];
            this.style = document.layers[name];
        }
    }

    var client_width  = 0;
    var client_height = 0;
    var left_pos      = 0;
    var scroll_amt    = 0;
    var tabs_width    = 0;
    var tabs_right    = 0;

    function init()
    {
        DHTML = ( document.getElementById || document.all || document.layers )
        if ( !DHTML ) return;

        // Get the object and the window height and width
        client_height = document.body.clientHeight;
        client_width  = document.body.clientWidth;
        scroll_amt    = client_width / 4;

        var x = new getObj( 'tabs' );

        tabs_width = x.obj.offsetWidth;
        tabs_right = 0 - (tabs_width - client_width);

        //x.style.left   = 0;
        x.style.bottom = 0;
        x.style.width  = client_width;

        var r = new getObj( 'results' );
        if ( ! r ) return;
        r.style.height = client_height - 64;
    }

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

        if ( !tabs ) return;

        left_pos -= scroll_amt;

        if ( left_pos < tabs_right ) {
            left_pos = tabs_right;
        }

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

    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;
    }

    function select_tab( tab_value ) {
        var current_tab = new getObj( 'current_tab' );
        current_tab.obj.value = tab_value;
        document.selection.submit();
    }

    function resize_me( obj_name ) {
        my_obj = new getObj( obj_name );
        my_obj.height = client_height - 60;
    }
</script>
        <style type="text/css">
    body {
        margin: 0px;
        overflow: hidden;
        font-family: Verdana, Helvetica, sans-serif;
    }

    a {
        text-decoration: none;
        color: blue;
    }

    a:hover {
        text-decoration: underline;
    }

    table {
        clear: left;
    }

    td.heading {
        font-weight: bold;
        border-bottom: 2px solid black;
        border-right : 15px solid white;
    }

    td {
        font-size: 8pt;
        padding-right: 5px;
        white-space: nowrap;
    }

    #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;
    }

    .active_tab {
        background: navy;
        border: 3px inset gray;
        border-top: none;
        color: white;
        padding-left: 1em;
        padding-right: 1em;
        margin-left: 1px;
        margin-right: 1px;
    }

    .tab {
        background: gray;
        border: 3px outset gray;
        border-top: none;
        color: white;
        padding-left: 1em;
        padding-right: 1em;
        margin-left: 1px;
        margin-right: 1px;
    }

    #title {
        font-size: large;
        font-weight: bold;
        font-style: italic;
        text-decoration: underline;
        font-variant: small-caps;
    }

    #welcome {
        font-style: italic;
        font-size: x-small;
        margin: 10px;
    }

    #results {
        position: absolute;
        top: 25px;
        bottom: 0px;
        left: 0px;
        right: 0px;
        width: 100%;
        overflow: auto;
    }
</style>
    </head>
    <body onload="init()" onresize="init()">
    
    <div id='welcome'>
        Welcome <i>&lt;NTLM Authorized User&gt;</i> ...
        <a href="/webquery">Return to the first page.</a>
    </div><br />
    
    <div id="controls">
        <a class="cbutton" id="begin" href="javascript:reset_left('tabs');">&#9474;&#9668;</a>
        <a class="cbutton" id="left" href="javascript:scroll_left('tabs');">&#9668;</a>
        <a class="cbutton" id="end" href="javascript:right_end('tabs');">&#9658;&#9474;</a>
        <a class="cbutton" id="right" href="javascript:scroll_right('tabs');">&#9658;</a>
    </div>
    <form method="post" action="/cgi-bin/cm.pl" enctype="application/x-[URL unfurl="true"]www-form-urlencoded"[/URL] name="selection">

    <input type="hidden" id="current_tab" name="current_tab" value="0" />
    <input type="hidden" id="tab_pos" name="tab_pos" value="0" />
    <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>
        
        <a
            href="javascript:;"
            onclick="select_tab( '2' ); return false;"
            class="tab"
        >Contracts Ending</a>
        
        <a
            href="javascript:;"
            onclick="select_tab( '3' ); return false;"
            class="tab"
        >Contracts Ending - Details</a>
        
        <a
            href="javascript:;"
            onclick="select_tab( '4' ); return false;"
            class="tab"
        >Contracts Ending This/Next Year</a>
        
        <a
            href="javascript:;"
            onclick="select_tab( '5' ); return false;"
            class="tab"
        >Contracts Ending This Year - Details</a>
        
        <a
            href="javascript:;"
            onclick="select_tab( '6' ); return false;"
            class="tab"
        >Renewals Completed Last Month</a>
        
        <a
            href="javascript:;"
            onclick="select_tab( '7' ); return false;"
            class="tab"
        >Renewals Completed Last Month - Details</a>
        
        <a
            href="javascript:;"
            onclick="select_tab( '8' ); return false;"
            class="tab"
        >Disconnect Request Last Month</a>
        
        <a
            href="javascript:;"
            onclick="select_tab( '9' ); return false;"
            class="tab"
        >Disconnect Request Last Month - Details</a>
        
        <a
            href="javascript:;"
            onclick="select_tab( '10' ); return false;"
            class="tab"
        >Disconnect Done Last Month</a>
        
        <a
            href="javascript:;"
            onclick="select_tab( '11' ); return false;"
            class="tab"
        >Disconnect Done Last Month - Details</a>
        
        <a
            href="javascript:;"
            onclick="select_tab( '12' ); return false;"
            class="tab"
        >Auto-Renewals</a>
        
        <a
            href="javascript:;"
            onclick="select_tab( '13' ); return false;"
            class="tab"
        >Auto Renewals - Details</a>
        <span>&nbsp;</span>
</div>
</form>
<div id='results'>
<table>
<tr><td class='heading'>All of my company's closely guarded secrets go here <img src="[URL unfurl="true"]http://www.tipmaster.com/images/thumbsup2.gif"[/URL] /></td></tr>
</table>
</div>

Thanks,

--
-- GhodMode

 

[LFI]

Okay, I had to download Firefox. I've never used it before, but I think I found your problem (it really did help that you posted so much of your source code).

IE explorer interprets this line (in init()):

tabs_right = 0 - (tabs_width - client_width);

as (for example):

-3227 = 0 - (4247 - 1020)

...while Firefox sees it as:

0 = 0 - (1024 - 1024)

In other words, it appears that IE sees the whole size of the DIV while Firefox only sees that part which is on the screen.

This means that in function tabs_right(...), the following code:

        if ( left_pos < tabs_right ) {
            left_pos = tabs_right;
        }

...ALWAYS fires, with tabs_right = 0. In other words, when the next line of code (tabs.style.left = left_pos;) fires, left_pos has been set equal to 0, thus never moving the tabs-DIV.

To prove this to yourself, immediately after the line in init() [tabs_right = 0 - (tabs_width - client_width);
], hard-code tabs_right = -3227; in there and watch your page work for you!

I'm not exactly sure how to solve the problem, but KNOWING what the problem is (you need a way to get the "correct" value for x.obj.offsetWidth), hopefully, gets you on the path to solving this.

Good luck! If I were you, I'd post a new question specifically asking about this.

--Dave