The solution in /this post worked

add this to your ucserChrome.css

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

edit type, it is uscerChrome.css and not chromeuser.css

See also:

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

cor-el, as usual, you came through. Thank you so much for your invaluable assistance.

After updating to 71.0 early this AM (UK time) I discovered once again, again, again... the (Unwritable words) have messed with my carefully positioned Tabs... Obviously I want them below the toolbars.

Thankfully a kind person has posted a fix and saved my stress levels.

Thanks, much appreciated.

Dave

Using FF 71.0. Tried all of the solutions above to get tabs below the other bars, but they are not working. This occurred after an update around noon. I used the browser this morning and tabs were below, after update, not. Also, I see that there is a blank bar where I want the tabs, but the tabs are above. Attached screenshot. Help?

In Firefox 69 and later you need to set this pref to true on the about:config page to enable userChrome.css and userContent.css in the chrome folder.

• toolkit.legacyUserProfileCustomizations.stylesheets = true
• https://www.userchrome.org/firefox-changes-userchrome-css.html

I did check that setting and found it set to "true", as it would have to be to allow the tabs to be located below the bars prior to the update.

In recent Firefox since "someone" with nothing better to fix messed with the about:config display, it is a miracle if you can find anything in there anyway.

But then I'm an old man and I'll grump about anything.  :-)

Ax

Mmmnnn! Closely related to this ongoing annoyance, in my general reading about FireFox and its future, rumour has it that the Moz Devs will eventually excise the ability to have any UI manipulation via userChrome.

Is this for real, or is it just more fake news?

Thanks Ax

arturox said

... rumour has it that the Moz Devs will eventually excise the ability to have any UI manipulation via userChrome. Is this for real, or is it just more fake news?

I am curious about the URL of where you read that?

My personal opinion, based upon a couple of Bugzilla reports that I read shortly after Quantum Firefox 57 was released on November 14, 2017, is that Mozilla may decide to greatly limit what userChrome.css can do or maybe eliminate that file from even being used any longer. At that time the consensus from developers was to do nothing, except for possible extracting the userChrome.css files and inspecting what users were modifying via userChrome.

I have been doing very minor tweaks via userChrome.css since 2004, and would miss having that file available or blocked. BTW, I am 70 yo, thus an "old man", too.

Currently only userChrome.css and userContent.css are disabled by default in new profiles and you need to flip a pref on the about:config page to enable these files.

• toolkit.legacyUserProfileCustomizations.stylesheets = true

It works for me in regular browser mode, but not in private widow mode. In private widow mode it puts both the address bar and tabs on top. Weird. I think I have some strange about:config settings. Check attached. userpro and userprof might be set incorrectly or should not exist. They might have been added by mistake. Not sure? toolkit.legacyUserProfileCustomizations.stylesheets is set on TRUE.

Any help appreciated,

I have the code to fix this problem but can't post the code in this reply. Is there away to post the code here?

You should be able to copy and paste into your reply.

Make sure to enclose your code with PRE tags (<pre> (code) </pre>).

The only code that I changed from what code I had was:

#TabsToolbar {
 position: absolute !important;
 bottom: 0 !important;
 width: 100vw !important;
}

Copy and paste the code below into userChrome.css

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

#TabsToolbar {
  position: absolute !important;
  bottom: 0 !important;
  width: 100vw !important;
  display: block !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;
}

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

Or you can copy and paste code from https://pastebin.com/zppeXbpJ

i copied and paste the code but did not work

@ Tr89

Did you make sure you created userChrome.css in the correct location and that there isn't a hidden .css or .txt appended ?

See also:

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

In Firefox 69 and later you need to set this pref to true on the about:config page to enable userChrome.css and userContent.css in the chrome folder.

• toolkit.legacyUserProfileCustomizations.stylesheets = true
• https://www.userchrome.org/firefox-changes-userchrome-css.html

Thank you for all of our assistance. My problem has been solved. Cor-El came to the rescue on the 3rd of December and it has been smooth sailing since.

Thank you Cor-El and all the others.

Merry Christmas.