Я пытаюсь добиться вот этого:
Для этого и изменил стили, подключив свои перевернутые картинки:
Код:
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
#s_browser_bottom > tabbox {-moz-box-direction: reverse;}
#s_browser_bottom .tabbrowser-tab > .tab-image-left
{background: url("skin/icons/tab-left.png") no-repeat;}
#s_browser_bottom .tabbrowser-tab[chromedir="rtl"] > .tab-image-left
{background: url("skin/icons/tab-right.png") no-repeat;}
#s_browser_bottom .tabbrowser-tab:not([selected="true"]) > .tab-image-left
{background: url("skin/icons/tab-left-bkgnd.png") no-repeat;}
#s_browser_bottom .tabbrowser-tab[chromedir="rtl"]:not([selected="true"]) > .tab-image-left
{background: url("skin/icons/tab-right-bkgnd.png") no-repeat;}
#s_browser_bottom .tabbrowser-tab:hover:not([selected="true"]) > .tab-image-left
{background: url("skin/icons/tab-left-hover.png") no-repeat;}
#s_browser_bottom .tabbrowser-tab[chromedir="rtl"]:hover:not([selected="true"]) > .tab-image-left
{background: url("skin/icons/tab-right-hover.png") no-repeat;}
#s_browser_bottom .tabbrowser-tab > .tab-image-middle
{background: url("skin/icons/tab-middle.png") repeat-x;}
#s_browser_bottom .tabbrowser-tab:not([selected="true"]) > .tab-image-middle
{background: url("skin/icons/tab-middle-bkgnd.png") repeat-x;}
#s_browser_bottom .tabbrowser-tab:hover:not([selected="true"]) > .tab-image-middle
{background: url("skin/icons/tab-middle-hover.png") repeat-x;}
#s_browser_bottom .tabbrowser-tab > .tab-image-right
{background: url("skin/icons/tab-right.png") no-repeat;}
#s_browser_bottom .tabbrowser-tab[chromedir="rtl"] > .tab-image-right
{background: url("skin/icons/tab-left.png") no-repeat;}
#s_browser_bottom .tabbrowser-tab:not([selected="true"]) > .tab-image-right
{background: url("skin/icons/tab-right-bkgnd.png") no-repeat;}
#s_browser_bottom .tabbrowser-tab[chromedir="rtl"]:not([selected="true"]) > .tab-image-right
{background: url("skin/icons/tab-left-bkgnd.png") no-repeat;}
#s_browser_bottom .tabbrowser-tab:hover:not([selected="true"]) > .tab-image-right
{background: url("skin/icons/tab-right-hover.png") no-repeat;}
#s_browser_bottom .tabbrowser-tab[chromedir="rtl"]:hover:not([selected="true"]) > .tab-image-right
{background: url("skin/icons/tab-left-hover.png") no-repeat;}
#s_browser_bottom .tabbrowser-tab > .tab-close-button
{background-image: url("skin/icons/tab-middle-bkgnd.png");}
#s_browser_bottom .tabbrowser-tab:hover > .tab-close-button
{background-image: url("skin/icons/tab-middle-hover.png");}
#s_browser_bottom .tabbrowser-tab[selected="true"] > .tab-close-button
{background-image: url("skin/icons/tab-middle.png");}Но у меня осталась единственная проблемма, я не могу перевернуть вот это полоску:
Что мне нужно сделать, чтобы она оказалась на своем месте (как на первом рисунке) ?
Может нужно делать что-то вроде:
Но это в данном случае не помогает.
P.S. Google не помог мне в решении этого вороса 
покопался инспектором, поковырял chrome...
скрывает полоску с табов, с фона убрать не смог...
скрывает полоску с табов, с фона убрать не смог...
Убрать эту полоску я могу, это делается вот так:
Но задача состоит не в этом, чтоб ее убрать. А в том, что ее всетаки нужно разместить сверху от вкладок.
а если так:
а если так:
Не помогает, реакции ноль.
Я решил вопрос вот так:
Код:
#s_browser_bottom .tabbrowser-tabs
{border-top: 1px solid red/*threedshadow*/;
background: -moz-dialog url("skin/icons/tabstrip-bottom.png") repeat !important;
margin: 1px !important;}
#s_browser_bottom .tabs-bottom
{border-top: 1px solid red/*threedshadow*/;
border-bottom: 0px solid green/*threedshadow*/;
height: 26px !important;
margin: 0px !important;}Не помогает, реакции ноль.
У меня сработало: http://forum.mozilla-russia.org/uploaded/tbr.png
кстати в чатзилле тожа ж табики снизу сидит как раз как вам надо посмотрите может там ещё проще