Динамический размер вкладки из изображений

Question

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

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

В 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>

Answer 1

Я думаю, Техника для раздвижных дверей может быть тем, что вы ищете.

Answer 2

Этот инструмент может помочь.

Answer 3

Это упрощенная версия, которая работает:

<div style="background: url('BlueTabSprite.png') no-repeat; width: 290px; min-width: 120px; max-width: 290px; height: 23px;">
<div style="float: right; background: url('BlueTabSprite.png') top right no-repeat; width: 10px; height: 23px;"></div>
Test
</div>