Dynamisch Größentab von Bildern gemacht

Question

Ich versuche, eine Registerkarte auf meine Web-Seite hinzufügen, die wie folgt aussehen:

Mit diesem Beispiel als Grundlage , habe ich es teilweise bekommen Arbeiten. Mein Fall unterscheidet, weil ich den Textabschnitt soll eine feste mit, aber der Heckteil werden, um dynamisch die Größe zu nehmen, den Rest der Registerkarte des Containers.

Es sieht gut aus in IE 6, aber nimm nicht wirklich über die gesamte Breite des Behälters. In Firefox 3 es nicht gut überhaupt nicht machen: (die roten ein leerer Bereich zwischen den Spannweiten ).

Wie bekomme ich diese richtig in beide IE6 und Firefox zu machen über die volle Breite für #tab angegeben aufzunehmen? # Tab4 ist der Bereich, den ich von der Größe möchten so viel Platz wie möglich in Anspruch nehmen.

    <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

Dies ist eine vereinfachte Version, die funktioniert:

<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

Ich denke, die Schiebetüren Technik sein kann, was Sie suchen.

Answer 3

Das Tool rel="nofollow eine Hilfe sein kann.