views:

40

answers:

1

I have created a tabbox using the following code (with a screenshot attached).

How do I set the size of the tab to be larger so there is padding around the label?

<tabbox>
    <tabs>
        <tab label="A LABEL"></tab>
    </tabs>
    <tabpanels>
        <button>
    </tabpanels>
</tabbox>

http://img38.imageshack.us/img38/2484/tabbox.png

I have tried the following CSS:

tab, tabs, tabbox {
    height: 2em;
    line-height: 20px;
    padding: 10px;
    margin: 10px;
}

However nothing changes, I've tried to also replace the label attribute with a child label element and a child description element, however that proves futile also.

Suggestions?

edit for searching: Unable to change styles for XUL elements in firefox on Mac OS X

+1  A: 

It is an OSX thing, which you can override with something like this :

<tabbox>
    <tabs>
        <tab style="-moz-appearance: none;">
            <label value="test1" style="font-size: 20px; padding: 5px;"/>
        </tab>
    </tabs>
    <tabpanels>
        <button/>
    </tabpanels>
</tabbox>

Now you can pretty much customize it to anything you like.

Here is a screenshot of something I did with tabs :

alt text

lithorus