Вкладка динамического изменения размера из изображений

Я пытаюсь добавить на свою веб-страницу вкладку, которая выглядит так:

Используя этот пример в качестве основы, я получил его частично работающим. Мой случай отличается, потому что я хочу, чтобы текстовая секция была фиксированной, но хвостовая секция динамически изменяла размер, чтобы занять остальную часть контейнера вкладки.

Это хорошо выглядит в IE 6, но на самом деле не занимает всю ширину контейнера. В Firefox 3 это вообще не очень хорошо отображается: (красный цвет - пустая область между промежутками).

Как мне заставить это правильно отображаться как в IE6, так и в Firefox, чтобы занять всю ширину, указанную для #Tab? # Tab4 - это область, размер которой я хотел бы изменить, чтобы она занимала как можно больше места.

    <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;
        overflow: 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>