Firefox 89 Moves My Tabs To The Bottom - HELP!

User Help for Mozilla Firefox
Posts: 12
Joined: March 6th, 2011, 5:43 pm

Post Posted June 17th, 2021, 4:33 pm

DaggerDX wrote:Yes ArniVidar, when I tried each batch of code, I deleted any code in my userChrome.css file, pasted the new, and saved; I am not combining batches of code.

Well that sucks. I guess then I'd try the nuke option: Create a new, clean, FF profile, and then enable userChrome on that one, to see if it works. :( (backing up the old profile first, obviously, and then copying all the necessary things over to the new profile if that would work)

Oh, another st00pid idea: You wouldn't (like myself) happen to have some extension enabled that changes how FF looks? I used to have one that was called "Classic Tabs" or something like that, and I had to disable that because it would not play nice with the CSS code.

Posts: 55
Joined: September 29th, 2011, 3:22 pm

Post Posted June 20th, 2021, 8:49 am

Here is the CSS that I finally came to use. Not my creation. It puts Tabs under the Address bar (although they're a bit larger than I'd like), adjusts the Menu bar (if you use it) and puts a Status bar at the bottom (although it is still visible in Full Screen mode):


/* Source file ... 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

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

:root{ --uc-titlebar-padding: 0px; }
@media (-moz-os-version: windows-win7),(-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);
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 */
@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%; }

-moz-box-ordinal-group: 2;
-moz-appearance: none !important;
--tabs-navbar-shadow-size: 0px;

#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{ -moz-box-orient: vertical } }

/* 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 ... _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:not([sizemode="fullscreen"]){ --uc-window-control-width: 0px !important }

/* height if native titlebar is enabled, assumes empty menubar */
--uc-menubar-height: 22px;
/* height when native titlebar is disabled, more roomy so can fit buttons etc. */
--uc-menubar-height: 22px;

#navigator-toolbox{ padding-top: calc(var(--uc-menubar-height) + var(--uc-titlebar-padding,0px)) !important }
:root[sizemode="fullscreen"] #navigator-toolbox{ padding-top: 0px !important; }
position: fixed;
display: flex;
top: var(--uc-titlebar-padding,0px);
height: var(--uc-menubar-height);
width: 100%;
overflow: hidden;

#toolbar-menubar > .titlebar-buttonbox-container{ height: 100%; 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 }

/* Status-bar */
#browser-bottombox { height: 20px; border-top: solid 0px #505050; }
.browserContainer>statuspanel { left: 4px !important; bottom: 0px; transition-duration: 0s !important; transition-delay: 0s !important; }
.browserContainer>statuspanel>.statuspanel-inner>.statuspanel-label { margin-left: 0px !important; border: none !important; padding: 0px !important; }

window[inFullscreen="true"] #browser-bottombox { display:none !important; }
window[inFullscreen="true"] .browserContainer>statuspanel[type="overLink"] .statuspanel-label { display:none !important; }

#statuspanel #statuspanel-label {
-moz-appearance: none !important;
background-color: transparent !important;
border: 0px solid black !important;

#statuspanel {
background-color: transparent !important;
border: none !important;
bottom: 18px !important; /* adjust*/
height: 18px !important; /* adjust */
max-width: 30% !important; /* Change the value to suite your needs */
transition: none !important;

#PopupAutoCompleteRichResult {

display: none!important;


Posts: 4
Joined: July 1st, 2021, 6:51 am

Post Posted July 1st, 2021, 7:00 am


Posts: 62
Joined: November 10th, 2011, 1:31 pm

Post Posted January 14th, 2022, 11:20 pm

The file location has been changed to ... oolbar.css

Computer specifications:
Windows 10 x64|AMD Ryzen 3700X|ASUS Crosshair Hero VIII (WiFi)|16GB 3600MHz RAM|Nvidia Geforce 1070Ti 8GB|Corsair AX760 Power Supply

Return to Firefox Support

Who is online

Users browsing this forum: Bing [Bot] and 5 guests