Scheda di dimensionamento dinamico fatta di immagini

Question

Sto provando ad aggiungere una scheda alla mia pagina web che assomiglia a questa:

Utilizzando questo esempio come base, l'ho ottenuto parzialmente lavoro. Il mio caso differisce perché voglio che la sezione di testo sia risolta, ma la sezione di coda si ridimensiona in modo dinamico per occupare il resto del contenitore della scheda.

Sembra buono in IE 6, ma in realtà non occupa l'intera larghezza del contenitore. In Firefox 3 non viene visualizzato affatto: (il rosso è un'area vuota tra le campate ).

Come posso ottenere questo rendering correttamente in IE6 e Firefox per occupare l'intera larghezza specificata per #Tab? # Tab4 è l'area che mi piacerebbe ridimensionare per occupare più spazio possibile.

    <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

Questa è una versione semplificata che funziona:

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

Answer 2

Penso che la tecnica delle porte scorrevoli potrebbe essere ciò che stai cercando.

Answer 3

Questo strumento può essere d'aiuto.