Firefox タブバーの下の二重線を表示したままタブバーの高さを変えるには

普段使うブラウザをSleipnirからFirefoxに変えたのですが
タブとタブバーの高さの変更方法がよくわからず困っています。

最初はuserChrome.cssに下のように書いてみたのですが
添付画像の上半分にあるとおりタブの高さだけが低くなって、
タブバー下の二重線とタブとのあいだに隙間ができてしまいました。
tab {
font-size:13px !important;
height:15px !important;
max-height:15px !important;
}

そのあとタブバーの幅を変更すればいいと思い下のように追加してみたのですが
今度は添付画像の下半分のとおり、二重線が見えなくなってしまいました。
.tabbrowser-strip{
min-height:18px !important;
max-height:18px !important;
}

二重線を表示したままタブバーの高さを変更するにはどうしたらいいでしょうか。
よろしくお願いします。

No.3 ベストアンサー 回答者： neddoheny 回答日時： 2009/05/30 00:35

＞Tab Mix Plus

やっぱりTab Mix Plusを入れてましたか。

一応、Tab Mix Plus対応の　コードを書いてみました。

.tabbrowser-tab, .tabs-alltabs-button, .tabs-newtab-button,
.tabs-closebutton, .scrollbutton-up, .scrollbutton-down {
font-size:13px !important;
max-height:15px !important;
}
.tabs-container {
height: 22px !important;
}

上記のコードで、全て差し替えてください。
これでTab Mix Plusでも動作するはずです。（検証済み）
タブの多段表示設定でも動作します。

この回答へのお礼

回答ありがとうございます。
その通り差し替えたところTab Mix Plusを入れたまま
変更することができました！
No.1、No.4と合わせて大変お世話になりました。

お礼日時：2009/05/30 14:13

No.4 回答者： neddoheny 回答日時： 2009/05/30 01:25

勘違いしてるといけないので、補足。

質問者さんが書いたコードはすべて削除して、

.tabbrowser-tab, .tabs-alltabs-button, .tabs-newtab-button,
.tabs-closebutton, .scrollbutton-up, .scrollbutton-down {
font-size:13px !important;
max-height:15px !important;
}
.tabs-container {
height: 22px !important;
}

だけを記述してください。
ということです。

No.2 回答者： noname#101087 回答日時： 2009/05/29 22:40

当方、Tab Mix Plus 使用。

…で、theme の \chrome\chrome.jar\browser\browser.css をじかに書き替えて、つじつまをあわせてます。けっこう、苦労しました。
直なので "important!" をつけてませんが、つければ userChrome.css で使えるかも。

.tabbrowser-tabs {
background: transparent url("chrome://browser/skin/tabbrowser/tabbrowser-tabs-bkgnd.png") repeat-x;
height: 22px;
}

の "height" の 22px がタブ高さ。

.tabbrowser-tab {
-moz-appearance: none;
background: url("chrome://browser/skin/tabbrowser/tab-bkgnd.png") repeat-x;
margin: 1px 0px 1px;
.....
}

の "margin" 3 番目の 1px を書き換えると、問題のギャップ幅を変えられるのでは？

たとえば、

.tabbrowser-tab {
margin-bottom: *px important!;
}

…かな？
　

この回答へのお礼

お礼が遅くなりすみません。
なんとか二重線の位置（ギャップ幅というんですね）
を変更することができました。
回答ありがとうございました。

お礼日時：2009/05/30 14:10

No.1 回答者： neddoheny 回答日時： 2009/05/29 18:48

とりあえず、

.tabs-container {
height: 22px !important;
}

を記述してみてください。

尚、タブ関係のアドオンを入れると
効果がなくなる可能性もあるので注意。

この回答へのお礼

回答ありがとうございます。
二重線の位置が変わりました！
高さの調整もしてぴったりにすることができたのですが
おっしゃるとおりタブ関係のアドオンがあると反映されないのですね。
Tab Mix Plusが色々便利だと思っていたので残念です…

お礼日時：2009/05/29 19:42