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.

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.

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.

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?

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?

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.

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

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

See also:

• https://support.mozilla.org/en-US/kb/forum-response-tabs-below-url-bar

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.

cor-el said

See also:

• https://support.mozilla.org/en-US/kb/forum-response-tabs-below-url-bar

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

Thank you.

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;}

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

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

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

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.

• Help -> Troubleshooting Information -> Profile Folder/Directory:
  Windows: Show Folder; Linux: Open Directory; Mac: Show in Finder
• https://support.mozilla.org/en-US/kb/Profiles

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

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;}

Try the updated CSS code in this solution:

• /questions/1276775 tabs on bottom release 72.0.1