nextpleaseOptions.css

tabbox.vert-tabs {
    -moz-box-orient: horizontal !important;
    border: 5 !important;
}

tabs.vert-tabs {
    -moz-box-orient: vertical !important;
    background: red;
}

part of nextpleaseOptions.xul

<tabbox flex="1" class="vert-tabs">
                    <tabs class="vert-tabs">
                        <tab label="&options.next;" class="vert-tabs"/>
                        <tab label="&options.prev;" class="vert-tabs"/>
                        <tab label="&options.first;" class="vert-tabs"/>
                        <tab label="&options.last;" class="vert-tabs"/>
                    </tabs>
                    <tabpanels flex="1" class="vert-tabs">
                        <tabpanel flex="1" class="vert-tabs">
                            <vbox align="left" flex="1">
                                <listbox id="nextfields" seltype="multiple"/>
                                <hbox align="center" flex="1">
                                    <textbox id="addnextfield" type="text" flex="1" maxlength="256" />
                                    <button id="addnextbutton" class="dialog" label="&options.add;"
                                        oncommand="nextplease.addToListbox('addnextfield', 'nextfields'); return false;" />
                                </hbox>
                                <hbox>
                                    <spacer flex="1" />
                                    <button class="dialog" label="&options.removeSelected;"
                                        oncommand="nextplease.removeSelectedFromListbox('nextfields'); return false;" />
                                </hbox>
                            </vbox>
                        </tabpanel>
                        <tabpanel flex="1" class="vert-tabs">
                            <vbox align="left" flex="1">
                                <listbox id="prevfields" seltype="multiple"/>
                                <hbox align="center" flex="1">
                                    <textbox id="addprevfield" type="text" flex="1" maxlength="256" />
                                    <button id="addprevbutton" class="dialog" label="&options.add;"
                                        oncommand="nextplease.addToListbox('addprevfield', 'prevfields'); return false;" />
                                </hbox>
                                <hbox>
                                    <spacer flex="1" />
                                    <button class="dialog" label="&options.removeSelected;"
                                        oncommand="nextplease.removeSelectedFromListbox('prevfields'); return false;" />
                                </hbox>
                            </vbox>
                        </tabpanel>
                        <tabpanel flex="1" class="vert-tabs">
                            <vbox align="left" flex="1">
                                <listbox id="firstfields" seltype="multiple"/>
                                <hbox align="center" flex="1">
                                    <textbox id="addfirstfield" type="text" flex="1" maxlength="256" />
                                    <button id="addfirstbutton" class="dialog" label="&options.add;"
                                        oncommand="nextplease.addToListbox('addfirstfield', 'firstfields'); return false;" />
                                </hbox>
                                <hbox>
                                    <spacer flex="1" />
                                    <button class="dialog" label="&options.removeSelected;"
                                        oncommand="nextplease.removeSelectedFromListbox('firstfields'); return false;" />
                                </hbox>
                            </vbox>
                        </tabpanel>
                        <tabpanel flex="1" class="vert-tabs">
                            <vbox align="left" flex="1">
                                <listbox id="lastfields" seltype="multiple"/>
                                <hbox align="center" flex="1">
                                    <textbox id="addlastfield" type="text" flex="1" maxlength="256" />
                                    <button id="addlastbutton" class="dialog" label="&options.add;"
                                        oncommand="nextplease.addToListbox('addlastfield', 'lastfields'); return false;" />
                                </hbox>
                                <hbox>
                                    <spacer flex="1" />
                                    <button class="dialog" label="&options.removeSelected;"
                                        oncommand="nextplease.removeSelectedFromListbox('lastfields'); return false;" />
                                </hbox>
                            </vbox>
                        </tabpanel>
                    </tabpanels>
                </tabbox>

See http://www.flickr.com/photos/30094975@N08/5118161319/ for results: I get horizontal orientation without border for tabbox, red background and horizontal orientation for tabs (i.e. 1 of 2 lines seems to have effect for both). Why would this happen? Setting orient as an attribute on XUL works fine.

Works fine, but looks quite bad, that is, which is why I tried to play around with CSS. See Tabs at http://www.hevanet.com/acorbin/xul/top.xul for an example.