حيوي تحجيم التبويب مصنوعة من الصور

Question

وأنا أحاول إضافة علامة تبويب إلى صفحة الويب الخاصة بي التي تبدو مثل هذا:

هذا المثال كأساس، لقد حصلت جزئيا عمل. حالتي تختلف لأنني أريد قسم النص المراد ثابت مع، ولكن ذيل لتغيير حجم حيوي لتولي بقية الحاويات في التبويب و.

ويبدو جيد في IE 6، ولكن لا يأخذ حقا حتى في العرض الكامل للحاوية. في فايرفوكس 3 انه لا يجعل جيدا على الإطلاق: (الأحمر هي منطقة فارغة بين يمتد ).

وكيف يمكنني الحصول على هذا لتقديم بشكل صحيح في كل IE6 وفايرفوكس لتناول العرض الكامل المحدد لل#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

وهذا هو نسخة مبسطة تعمل:

<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

وأعتقد أن الأبواب تقنية انزلاق قد يكون ما كنت تبحث عنه.

Answer 3

قد تكون عونا.