Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

How can I get tabs below in firefox 71.0?

  • 18 replies
  • 1 has this problem
  • 73 views
  • Last reply by cor-el

more options

Since the new update, tabs are on top again. And the fix for the last time it no longer worked (as usual) is not valid anymore. What must I do now? And why is firefox so set on placing the tabs on top? Thanks

Since the new update, tabs are on top again. And the fix for the last time it no longer worked (as usual) is not valid anymore. What must I do now? And why is firefox so set on placing the tabs on top? Thanks

Chosen solution

To make sure I'm understanding, your userChrome.css fix isn't working at the moment? I found this solution for re-enabling tabs on bottom for FF71

Note that there is a change in Firefox 71 that requires to add a "display: block;" rule to the #TabsToolbar container to get the tab on bottom. https://www.reddit.com/r/FirefoxCSS/c.../psa_for_nightly_users_potential_breakage_or_even/ /* required for Firefox 71+ */ #TabsToolbar { position: absolute !important; bottom: 0 !important; width: 100vw !important; display: block !important; }

From what I understand, Firefox dropped tab location as an option due to not wanting to maintain extra code. See this response:

That option was removed in Firefox 29 due to the need to maintain dual coding, one for the default of "tabs on top" and the older UI scheme of "tabs on bottom". && From Fx 29 thru Fx 56 you were probably using the old legacy Classic Theme Restorer which only worked with the Australis versions of Firefox. Quantum doesn't provide for legacy extension such as the Classic Theme Restorer extension. && If you have been using a userChrome.css batch of code with Firefox 57-plus, a slight CSS change was made to the syntax for "tabs". So, you need updated code that works in Fx 65-plus versions.

Let me know what you find out.

Read this answer in context 👍 1

All Replies (18)

more options

Chosen Solution

To make sure I'm understanding, your userChrome.css fix isn't working at the moment? I found this solution for re-enabling tabs on bottom for FF71

Note that there is a change in Firefox 71 that requires to add a "display: block;" rule to the #TabsToolbar container to get the tab on bottom. https://www.reddit.com/r/FirefoxCSS/c.../psa_for_nightly_users_potential_breakage_or_even/ /* required for Firefox 71+ */ #TabsToolbar { position: absolute !important; bottom: 0 !important; width: 100vw !important; display: block !important; }

From what I understand, Firefox dropped tab location as an option due to not wanting to maintain extra code. See this response:

That option was removed in Firefox 29 due to the need to maintain dual coding, one for the default of "tabs on top" and the older UI scheme of "tabs on bottom". && From Fx 29 thru Fx 56 you were probably using the old legacy Classic Theme Restorer which only worked with the Australis versions of Firefox. Quantum doesn't provide for legacy extension such as the Classic Theme Restorer extension. && If you have been using a userChrome.css batch of code with Firefox 57-plus, a slight CSS change was made to the syntax for "tabs". So, you need updated code that works in Fx 65-plus versions.

Let me know what you find out.

Modified by Eve

more options

Thanks for the fix. I know nothing about code and very little about modifying the css.chrome file. But I took the command provided and placed it in the css file. It didn't work at first because there was no # at the beginning of it. The actual line (code) that worked is: #TabsToolbar { position: absolute !important; bottom: 0 !important; width: 100vw !important; display: block !important; } I noticed other lines had # before them and added it.

more options

Glad it helped! I know messing around with code can be intimidating but it sounds like you approached it from a problem solving sense and resolved it so good work! I'll add the "#" to it in-case someone else runs across this. Thanks for that feedback.

more options

If I make a new userChrome.css file with the text "#TabsToolbar { position: absolute !important; bottom: 0 !important; width: 100vw !important; display: block !important; }" without the qoutes and insert it into the Chrome folder (after first deleting the old userChrome.css file) the tabs are now trying to overwrite the bookmarks even after restarting Firefox.

What's wrong?

Modified by oldtraveler

more options

Hi oldtraveler, I don't think that is the complete recipe. It certainly doesn't give an attractive result on mine (Windows, with the default settings of Title Bar and Menu Bar turned off). There must be some further context (more rules) in the Reddit thread?

more options

I tried adding my former Title Bar and Menu Bar text to this new text. It still overwrites the bookmarks. I think you are correct that there needs to be some additional text.

more options

I updated the extract from Aris' "Classic" rule set on my site:

https://www.userchrome.org/what-is-userchrome-css.html#movetabbar

more options
more options

jscher2000 said

I updated the extract from Aris' "Classic" rule set on my site: https://www.userchrome.org/what-is-userchrome-css.html#movetabbar

You seem to have solved it, but I don't understand what text I should add from the extract.

more options

cor-el said

See also:

Putting this text into the userChrome.css file works. Hurrah!

Thank you.

Modified by oldtraveler

more options

I added

/* required for Firefox 71+ */ 
#TabsToolbar {
 position: absolute !important; 
 bottom: 0 !important;
 width: 100vw !important; 
 display: block !important; } 

No difference. The tabs are still on top. Then I examined the code, and thought maybe that snip needed to be at the beginning, so I moved it. Still no help.

I'm attaching part of my userChrome.css file, as it does have a lot in it.


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

/* required for Firefox 71+ */ 
#TabsToolbar { position: absolute !important; 
bottom: 0 !important; 
width: 100vw !important; display: block !important; } 

/* TABS: on bottom */
#navigator-toolbox toolbar:not(#nav-bar):not(#toolbar-menubar) {-moz-box-ordinal-group:10}
#TabsToolbar {-moz-box-ordinal-group:1000!important}

#tabbrowser-tabs {
  width: 100vw !important;
}
#main-window:not([chromehidden*="toolbar"]) #navigator-toolbox {padding-bottom: var(--tab-min-height) !important;}

/* TABS: height */
:root {
 --tab-toolbar-navbar-overlap: 0px !important;
 --tab-min-height: 33px !important; /* adjust to suit your needs */
}
:root #tabbrowser-tabs {
 --tab-min-height: 33px !important; /* needs to be the same as above under :root */
 --tab-min-width: 80px !important;
}



#TabsToolbar {
 height: var(--tab-min-height) !important;
 margin-bottom: 1px !important;
 box-shadow: ThreeDShadow 0 -1px inset, -moz-dialog 0 1px !important;
 background-color: var(--toolbar-bgcolor) !important;
}

#tabbrowser-tabs,
#tabbrowser-tabs > .tabbrowser-arrowscrollbox,
.tabbrowser-tabs[positionpinnedtabs] > .tabbrowser-tab[pinned] {
  min-height: var(--tab-min-height) !important;
  max-height: var(--tab-min-height) !important;
}

/* drag space */
.titlebar-spacer[type="pre-tabs"],
.titlebar-spacer[type="post-tabs"] {
  width: 40px;
}

/* Override vertical shifts when moving a tab */
#navigator-toolbox[movingtab] > #titlebar > #TabsToolbar {
  padding-bottom: unset !important;
}
#navigator-toolbox[movingtab] #tabbrowser-tabs {
  padding-bottom: unset !important;
  margin-bottom: unset !important;
}
#navigator-toolbox[movingtab] > #nav-bar {
  margin-top: unset !important;
}

/* hide windows-controls */
#TabsToolbar #window-controls {display:none!important;}

/* move caption buttons to right of Tab bar */
#main-window[tabsintitlebar]:not([inFullscreen="true"]) #toolbar-menubar[autohide="true"] ~ #TabsToolbar .titlebar-buttonbox-container {
 position: fixed !important;
 right: 0 !important;
 top: calc(6px + var(--tab-min-height)) !important;
 display: block !important;
 visibility: visible !important;
}
#toolbar-menubar[autohide="true"] ~ #TabsToolbar {padding-right: 100px !important;}

Modified by cor-el

more options

Hi rosawood, could you add the contents of the excerpt file to the end your userChrome.css and see whether it works? There are separate links for Windows/Linux and MacOS:

https://www.userchrome.org/what-is-userchrome-css.html#movetabbar

more options

Added the entire file to the end of my userChrome.css. No change. Tabs still on top.

Modified by rosawood

more options

Hi rosawood, could you double-check steps 1, 2, and 6 just to make sure everything is where Firefox wants to find it and Firefox is set to look for the file at startup:

https://www.userchrome.org/how-create-userchrome-css.html

more options

Also make sure the file is in the chrome folder in the "AppData\Roaming" profile location and that the file doesn't have a hidden .css or .txt file extension (userChrome.css.css or userChrome.css.txt).

You can use the button on the "Help -> Troubleshooting Information" (about:support) page to go to the current Firefox profile folder or use the about:profiles page.

Modified by cor-el

more options

The issue is resolved. Someone posted code for 71 and it works. Thanks to all.

more options

Today is 07 April 2020. A couple of days ago the latest Firefox update again killed the "tabs on bottom" css file option.

Here's how managed - for now - to fix that.

First - Install Firefox "Extended Support Release" You'll have to create a new profile, but this change retains bookmarks and everything else, near as I can tell.

Second - use this content in your userChrome.css file (I'll let you find how to create this file elsewhere):

/* TABS on bottom */ @-moz-document url(chrome://browser/content/browser.xul), url(chrome://browser/content/browser.xhtml) {

} /* TABS: on bottom */

  1. navigator-toolbox toolbar:not(#nav-bar):not(#toolbar-menubar) {-moz-box-ordinal-group:10}
  2. TabsToolbar {-moz-box-ordinal-group:1000!important}
  1. TabsToolbar {

display: block !important; position: absolute !important; bottom: 0 !important; width: 100vw !important; }

  1. tabbrowser-tabs {

width: 100vw !important; }

  1. main-window:not([chromehidden*="toolbar"]) #navigator-toolbox {padding-bottom: var(--tab-min-height) !important;}
more options

Try the updated CSS code in this solution: