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

Cuireadh an snáithe seo sa chartlann. Cuir ceist nua má tá cabhair uait.

Firefox 113 - tab bar moved to above tool bar

  • 14 freagra
  • 13 leis an bhfadhb seo
  • 1887 views
  • Freagra is déanaí ó markbot

more options

I've just installed Firefox 113.0 and my tab bar is now above the toolbar and bookmarks bar. Up until 112, the tab bar was below the bookmarks bar. I have no changed anything in UserChrome and in fact that file is still dated 2020. I've searched but haven't found an explanation. Anyone know what changed or is this just a bug? Thanks

I've just installed Firefox 113.0 and my tab bar is now above the toolbar and bookmarks bar. Up until 112, the tab bar was below the bookmarks bar. I have no changed anything in UserChrome and in fact that file is still dated 2020. I've searched but haven't found an explanation. Anyone know what changed or is this just a bug? Thanks

Réiteach roghnaithe

I'm not sure if you can make this code work properly with all toolbar combination. It works if I hide the menu bar and move the titlebar container to the bottom.

#titlebar { 
    order: 2 !important; 
}
/* main toolbar */
#nav-bar { 
    order: 0 !important; 
    border-top-width: 0px !important; 
} 
 /* bookmarks toolbar */
#PersonalToolbar { 
    order: 1 !important; 
} 
	/* Tabs bar */
#TabsToolbar {
    order: 2 !important; 
}

Read this answer in context 👍 1

All Replies (14)

more options

Firefox 113 continues the process of standardizing the user interface code and removing legacy elements. The latest change removed some proprietary properties (-moz-box-*) that were previously used to change the order of elements (up or down). You'll need to update your code.

How can you update your rules to start working again?

(1) Return to your original source. The person/site that provided the original code (often on Github) usually has already updated to account for the changes. These include the MrOtherGuy repository and Aris' CustomCSSforFx repository on Github.

(2) Ask for help on the FirefoxCSS subreddit. If you are a DIY coder, check out the sticky post with the technical background explanation, and if you want more help, try reading through the latest threads and/or starting a new one.

=> Sticky background thread: https://www.reddit.com/r/FirefoxCSS/comments/11odffm/psa_incoming_changes_to_default_element/

=> Latest discussions on r/FirefoxCSS: https://www.reddit.com/r/FirefoxCSS/new/

more options

Thank you for your reply. I've been researching using what you sent as a starting point and while I've found entries with specifically my problem, none of their solutions has fixed mine. I will keep trying.

more options

The userChrome.css code for doing that has to be updated so you should go to the site where you got it and update it.

more options

What code are you using in userChrome.css ?

You can look at this thread for CSS code in userChrome.css for Firefox 112+ to move the tabs to below the Navigation Toolbar.

more options

Thank you all for your replies but it's still not working. I've gone into all the references and it seemed that the solution was to change -moz-box-ordinal-group: 0 -> order: -1 along with any other use of -moz-box-ordinal-group. I did that and no joy. Note that I have the appropriate about:config setting and Firefox is able to get to my userChrome.css because everything was fine up until 113. I've had this set for so long that I have no idea where I got it from. Here's what I have now. The top section is the sequence. Hopefully nothing else messes things up. The only other change I made was -moz-box -> display: flex What have I missed?

@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
/* ^ The above line needs to be there. */
/* Use 10-point text for most of the interface */
* { font-size: 10pt !important; }
/* Tab bar below Navigation & Bookmarks Toolbars /*
/* For best results, show Title Bar or Menu Bar */ 
#titlebar { 
    order: -1 !important; 
}
/* main toolbar */
#nav-bar { 
    order: 0 !important; 
    border-top-width: 0px !important; 
} 
 /* bookmarks toolbar */
#PersonalToolbar { 
    order: 1 !important; 
} 
	/* Tabs bar */
#TabsToolbar {
    order: 2 !important; 
}
/* bookmark toolbar */
 #personal-bookmarks .bookmark-item > .toolbarbutton-text { font-size:10pt !important; } 
 #personal-bookmarks .bookmark-item > .toolbarbutton-icon { height:23px !important; width:18px !important; }
#main-window[windowtype="navigator:browser"] {
    background-color: transparent !important;
} 
/* width of tab when you have too many open tabs */
.tabbrowser-tab {
min-width: 200px !important;
max-width: 200px !important; 
}
.tabbrowser-tab:not([fadein])
{
max-width: 1px !important;
min-width: 1px !important;
max-width: 1px;
min-width: 1px;
}
/* close button inside a tab */
.tab-close-button
{
width: 25px !important;
height: 25px !important;
}
/* Close button on hover */
.tabbrowser-tab:not([selected]):not([pinned]) .tab-close-button {
        visibility: hidden !important;
        margin-left: -16px !important;
}
.tabbrowser-tab:not([selected]):not([pinned]):hover .tab-close-button {
        visibility: visible !important; 
        margin-left: 0px !important;
        display: flex !important;
}

Athraithe ag cor-el ar

more options

Don't know if it makes a difference but I'm running Firefox on a 2020 27" iMac with Ventura 13.3.1 (a).

more options

Réiteach Roghnaithe

I'm not sure if you can make this code work properly with all toolbar combination. It works if I hide the menu bar and move the titlebar container to the bottom.

#titlebar { 
    order: 2 !important; 
}
/* main toolbar */
#nav-bar { 
    order: 0 !important; 
    border-top-width: 0px !important; 
} 
 /* bookmarks toolbar */
#PersonalToolbar { 
    order: 1 !important; 
} 
	/* Tabs bar */
#TabsToolbar {
    order: 2 !important; 
}

more options

If your code is from Mr Other Guy and you use the menu bar, you need his menu bar patch.

more options

cor-el, thank you. The change you suggested did the trick for me. I guess I didn't understand exactly what the various entries meant. I'll keep this in mind if (when?) it gets changed again. Thank you again.

Update: Just an add-on. I don't know if it makes a difference, but since I'm on a Mac, the menubar is always on top of the monitor workspace. I don't think that can be changed. Thanks again.

Athraithe ag bobbd ar

more options

Thank you cor-el. Works just fine with Windows 10 running on an HP ProDesk 400.

more options

I'm a 70 year old not-too-tech-savvy Grandma--replacing and saving userChrome.css file with this cut/paste text worked like a charm for me. Be sure to save a backup copy of the original by renaming, should you need to restore:

/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/tabs_on_bottom.css made available under Mozilla Public License v. 2.0
See the above repository for updates as well as full license text. */

/* Modify to change window drag space width */
/*
Use tabs_on_bottom_menubar_on_top_patch.css if you
have menubar permanently enabled and want it on top
*/

/* IMPORTANT */
/*
Get window_control_placeholder_support.css
Window controls will be all wrong without it.
Additionally on Linux, you may need to get:
linux_gtk_window_control_patch.css
*/

:root{ --uc-titlebar-padding: 0px; }
@media (-moz-os-version: windows-win10){
:root[sizemode="maximized"][tabsintitlebar]{ --uc-titlebar-padding: 8px }
}
#toolbar-menubar[autohide="true"] > .titlebar-buttonbox-container,
#TabsToolbar > .titlebar-buttonbox-container{
position: fixed;
display: block;
top: var(--uc-titlebar-padding,0px);
right:0;
height: 40px;
}
/* Mac specific. You should set that font-smoothing pref to true if you are on any platform where window controls are on left */
u/supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled"){
:root{ --uc-titlebar-padding: 0px !important }
.titlebar-buttonbox-container{ left:0; right: unset !important; }
}

:root[uidensity="compact"] #TabsToolbar > .titlebar-buttonbox-container{ height: 32px }

#toolbar-menubar[inactive] > .titlebar-buttonbox-container{ opacity: 0 }

#navigator-toolbox{ padding-top: var(--uc-titlebar-padding,0px) !important; }

.titlebar-buttonbox-container > .titlebar-buttonbox{ height: 100%; }

#titlebar{
order: 2;
-moz-appearance: none !important;
--tabs-navbar-shadow-size: 0px;
}

.titlebar-placeholder,
#TabsToolbar .titlebar-spacer{ display: none; }
/* Also hide the toolbox bottom border which isn't at bottom with this setup */
#navigator-toolbox::after{ display: none !important; }

@media (-moz-gtk-csd-close-button){ .titlebar-button{ flex-direction: column } }

/* These exist only for compatibility with autohide-tabstoolbar.css */
toolbox#navigator-toolbox > toolbar#nav-bar.browser-toolbar{ animation: none; }
#navigator-toolbox:hover #TabsToolbar{ animation: slidein ease-out 48ms 1 }

/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/tabs_on_bottom_menubar_on_top_patch.css made available under Mozilla Public License v. 2.0
See the above repository for updates as well as full license text. */

/* Menubar on top patch - use with tabs_on_bottom.css */
/* Only really useful if menubar is ALWAYS visible */

:root{ --uc-window-control-width: 0px !important }

#navigator-toolbox{ padding-top: calc(29px + var(--uc-titlebar-padding,0px)) !important }

#toolbar-menubar{
position: fixed;
display: flex;
top: var(--uc-titlebar-padding,0px);
height: 29px;
width: 100%;
overflow: hidden;
}

#toolbar-menubar > .titlebar-buttonbox-container{ height: 29px; order: 100; }

#toolbar-menubar > [flex]{ flex-grow: 100; }
#toolbar-menubar > spacer[flex]{
order: 99;
flex-grow: 1;
min-width: var(--uc-window-drag-space-width,20px);
}

#toolbar-menubar .titlebar-button{ padding: 2px 17px !important; }

#toolbar-menubar .toolbarbutton-1 { --toolbarbutton-inner-padding: 3px }

/* TABS: height */*|*:root { --tab-toolbar-navbar-overlap: 0px !important; --tab-min-height: 25px !important;
--tab-min-width: 80px !important;

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

.tab-background {
border-radius: 8px 8px 0px 0px !important; border-image: none !important;
}
.tab-line {
display: none;
}

.tab-close-button {
color: red!important;
}

/* Outline inactive tabs */
@media (-moz-proton) {
.tab-background:not([selected=true]):not([multiselected=true]) {
border: 1px solid rgba(0, 0, 0, .10) !important;
}
}

Athraithe ag cor-el ar

more options

This is the UserChrome CSS customization I use (sourced from another author, not me) to put the Tab Bar below everything else. (But see the screenshot in the image below for what the code should look like; it seems that Firefox is messing with my formatting, and replacing # with 1.[space] - sorry about that.)

/* Tab bar BELOW Navigation & Bookmarks Toolbars with DISPLAYED Bookmarks Toolbar */

#navigator-toolbox, #nav-bar, #PersonalToolbar {
  position: relative;
}
#navigator-toolbox {
  height: 105px !important;
}
#TabsToolbar { /* tabs bar */
  padding-top: 65px !important;
}
#toolbar-menubar[autohide="false"] ~ #TabsToolbar { /* tabs bar */
  padding-top: 46px !important;
}
#nav-bar { /* main toolbar */
  box-shadow: none !important;
  margin-top: -104px !important;
}

Athraithe ag cor-el ar

more options

Please delete this post

Athraithe ag Rick W ar

more options

Susanoz, thank you.

 I just saved the code you posted as my new userchrome.css and it worked like a charm.
We'll see how long this fix works. 
After v111 broke Tabs on Bottom, I had to scrounge around the Web for a fix. (Which I found at Mr Other Guy -- and somehow I can't find it on that site again.)
What continues to amaze me is how Mozilla, imperious to things its users actually want, still flatly refuses to offer "Tabs on Bottom" as a Preference option. (Don't even think about making it the default as it is in Safari.) 

Instead it blows its money on things like "Pocket," which I tried and found useless.