dynamically sizing add-on finished images

i'm perplexing supplement add-on web page looks this:

using basis, i've gotten partially working. box differs since i wish calm domain bound with, nonetheless tail domain boldly resize take adult rest tab's container.

it looks good ie 6, nonetheless doesn't unequivocally take adult full extent container.
in firefox 3 doesn't news good during all: (the red vacant area between spans).

how i news morally both ie6 firefox take adult full extent specified #tab? #tab4 area i'd distance take adult many room possible.

    <style type="text/css">
    #tab
    {
        width: 300px;
    }

    #tab1
    {
        background: #000 url(bluetabsprite.png) no-repeat 0 -136px;
        display: inline-block;
        height: 23px;
        padding-left: 4px;
    }

    #tab2
    {
        background: #000 url(bluetabsprite.png) repeat-x 0 -242px;
        display: inline-block;
         : hidden;
        padding-top: 4px;
        height: 19px;
        width: 100px;
    }

    #tab3
    {
        background: #000 url(bluetabsprite.png) no-repeat right -30px;
        display: inline-block;
        height: 23px;
        padding-right: 6px;
    }

    #tab4
    {
        background: #000 url(bluetabsprite.png) repeat-x 0 -83px;
        display: inline-block;
        height: 23px;
        width:60%
    }

    #tab5
    {
        background: #000 url(bluetabsprite.png) no-repeat right -189px;
        display: inline-block;
        height: 23px;
        padding-right:6px;
    }
</style>
<div id="tab">
    <span id="tab1">
        <span id="tab3">
            <span id="tab2">test tab</span>
        </span>
    </span>
    <span id="tab5">
        <span id="tab4"></span>
    </span>
</div>