搜尋 Mozilla 技術支援網站

防止技術支援詐騙。我們絕對不會要求您撥打電話或發送簡訊,或是提供個人資訊。請用「回報濫用」功能回報可疑的行為。

了解更多

userChrome.css Tabs at Bottom covering content

  • 8 回覆
  • 1 有這個問題
  • 1 次檢視
  • 最近回覆由 abt

more options

I have moved the tabs to the bottom but now the tabs are covering some useful content. Is there a way to pad the content bottom or some other way to move the content up to make way for the tabs? I've tried everything.

Here's my current code:

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); 

#main-window:not([inFullscreen]) #content-deck {margin-bottom: 32px !important;}
#main-window[inFullscreen] #content-deck {margin-bottom: 0px !important;}

#TabsToolbar
{
   position: fixed !important;
   bottom: 0px !important;
   width: 100% !important;
}

#tabbrowser-tabs {width: 96% !important;}
#TabsToolbar[inFullscreen]
#TabsToolbar { background-color: #4d4d4d !important }
#tabbrowser-tabs { background-color: #4d4d4d !important }

I have moved the tabs to the bottom but now the tabs are covering some useful content. Is there a way to pad the content bottom or some other way to move the content up to make way for the tabs? I've tried everything. Here's my current code: <pre> @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); #main-window:not([inFullscreen]) #content-deck {margin-bottom: 32px !important;} #main-window[inFullscreen] #content-deck {margin-bottom: 0px !important;} #TabsToolbar { position: fixed !important; bottom: 0px !important; width: 100% !important; } #tabbrowser-tabs {width: 96% !important;} #TabsToolbar[inFullscreen] #TabsToolbar { background-color: #4d4d4d !important } #tabbrowser-tabs { background-color: #4d4d4d !important } </pre>

由 abt 於 修改

被選擇的解決方法

As you may know, the author of Classic Theme Restorer maintains a large set of CSS files with intricately detailed rules for moving the tab bar. The ones to move the tab bar below the content start here, and incorporate several additional files:

https://github.com/Aris-t2/CustomCSSforFx/blob/master/classic/userChrome.css#L423

I have not tried it myself.

從原來的回覆中察看解決方案 👍 0

所有回覆 (8)

more options

Hi abt, it might be beneficial to follow up with the source of the rules you're using, to make sure they are current with the latest release of Firefox. Do you recall where you got them?

P.S. Use <pre> before and </pre> after your code to preserve its integrity.

#main-window:not([inFullscreen]) #content-deck {margin-bottom: 32px !important;}
#main-window[inFullscreen] #content-deck {margin-bottom: 0px !important;}

#TabsToolbar
{
   position: fixed !important;
   bottom: 0px !important;
   width: 100% !important;
}

#tabbrowser-tabs {width: 96% !important;}
#TabsToolbar[inFullscreen]
#TabsToolbar { background-color: #4d4d4d !important }
#tabbrowser-tabs { background-color: #4d4d4d !important }
more options

@jscher2000 Thanks.

No, I don't recall where I got the code other than I searched, found, and tried lots of different ways and this is what I went with. Many of them worked but they all have the same problem, the tabs cover the content.

Duly noted on using the pre tag. I have edited my post.

由 abt 於 修改

more options

Try to add a "display:block !important;" rule:

#TabsToolbar
{
  display: block !important;
  position: fixed !important;
  bottom: 0px !important;
  width: 100% !important;
}
more options

cor-el said

Try to add a "display:block !important;" rule:
#TabsToolbar
{
  display: block !important;
  position: fixed !important;
  bottom: 0px !important;
  width: 100% !important;
}


Thanks. No luck with that. I the problem is that this moves the tabs tools bar and what I'm trying to do is resize the content so that the tabs aren't over the top of it.

more options

Can you attach a screenshot?

See also:

more options

Okay, so I think I may have been misleading with my post (sorry!). When I said I want the tabs on the bottom I meant the bottom of the screen not the bottom of the navbar.

I've attached screenshot of what I mean by the tabs covering the content.

由 abt 於 修改

more options

選擇的解決方法

As you may know, the author of Classic Theme Restorer maintains a large set of CSS files with intricately detailed rules for moving the tab bar. The ones to move the tab bar below the content start here, and incorporate several additional files:

https://github.com/Aris-t2/CustomCSSforFx/blob/master/classic/userChrome.css#L423

I have not tried it myself.

more options

jscher2000 said

As you may know, the author of Classic Theme Restorer maintains a large set of CSS files with intricately detailed rules for moving the tab bar. The ones to move the tab bar below the content start here, and incorporate several additional files: https://github.com/Aris-t2/CustomCSSforFx/blob/master/classic/userChrome.css#L423 I have not tried it myself.

THANKS @jscher2000! That worked.

Here's the link to the code is case someone reads this:

https://github.com/Aris-t2/CustomCSSforFx/blob/master/classic/css/tabs/tabs_below_main_content.css