This site will have limited functionality while we undergo maintenance to improve your experience. If an article doesn't solve your issue and you want to ask a question, we have our support community waiting to help you at @FirefoxSupport on Twitter and/r/firefox on Reddit.

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

Tabs on Bottom broke again

more options

Hi

Well Firefox did it again. I had tabs on the bottom where I wanted them and they broke this again in the update I just got.

Any idea how to move them back down to the bottom? This is the userchrome.css coding I was using that worked fine before the update

@import url(userChrome-color_bookmark_folders_Proton89.css);


/* 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 }

}

  1. toolbar-menubar[autohide="true"] > .titlebar-buttonbox-container,
  2. TabsToolbar > .titlebar-buttonbox-container{

position: fixed; display: block; top: var(--uc-titlebar-padding,0px); right:0; height: 35px; } /* 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: 30px }
  1. toolbar-menubar[inactive] > .titlebar-buttonbox-container{ opacity: 0 }
  1. navigator-toolbox{ padding-top: var(--uc-titlebar-padding,0px) !important; }

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

  1. titlebar{

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

.titlebar-placeholder,

  1. TabsToolbar .titlebar-spacer{ display: none; }

/* Also hide the toolbox bottom border which isn't at bottom with this setup */

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

  1. 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 }
  1. navigator-toolbox{ padding-top: calc(29px + var(--uc-titlebar-padding,0px)) !important }
  1. toolbar-menubar{

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

  1. toolbar-menubar > .titlebar-buttonbox-container{ height: 29px; order: 100; }
  1. toolbar-menubar > [flex]{ flex-grow: 100; }
  2. toolbar-menubar > spacer[flex]{

order: 99; flex-grow: 1; min-width: var(--uc-window-drag-space-width,20px); }

  1. toolbar-menubar .titlebar-button{ padding: 2px 17px !important; }
  1. toolbar-menubar .toolbarbutton-1 { --toolbarbutton-inner-padding: 3px }

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

  1. tabbrowser-tabs {

width: 100vw !important; }

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

Hi Well Firefox did it again. I had tabs on the bottom where I wanted them and they broke this again in the update I just got. Any idea how to move them back down to the bottom? This is the userchrome.css coding I was using that worked fine before the update @import url(userChrome-color_bookmark_folders_Proton89.css); /* 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: 35px; } /* 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: 30px } #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{ -moz-box-ordinal-group: 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{ -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 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: 25px; 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: 20px !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; }

Modified by scottish2

Chosen solution

Does it look like this:

https://github.com/MrOtherGuy/firefox-csshacks/issues/262

If you have a Github account, you can post an issue there.

Read this answer in context 👍 1

All Replies (10)

more options

You need to go to Mr OG's site and download the new version.

more options

Terry said

You need to go to Mr OG's site and download the new version.

Unfortunately the one he has doesn't work properly as what happens is it moves the tabs to the bottom but it also takes the menu bar along with it so this is the order I want and had yesterday prior to the update

Menu Bar Search/URL Bar Bookmarks bar Tabs bar

but the code he has for tabs on bottom does it this way

Search/URL Bar Bookmarks bar Menu Bar Tabs bar

I would be fine with it if the menu bar didn't move with the tabs.

more options

Another user mentioned this over on r/FirefoxCSS:

https://www.reddit.com/r/FirefoxCSS/comments/13dfxh8/once_again_my_tabs_are_at_the_top_and_bookmarks/jjkeg0j/

Actually, you might need to return to the full thread for fuller context, but I think it's the same issue.

more options

jscher2000 - Support Volunteer said

Another user mentioned this over on r/FirefoxCSS: https://www.reddit.com/r/FirefoxCSS/comments/13dfxh8/once_again_my_tabs_are_at_the_top_and_bookmarks/jjkeg0j/ Actually, you might need to return to the full thread for fuller context, but I think it's the same issue.

Tried the patch which is what is suggested if I want the menu bar at the top but it seems to drag the tabs back with it it's like this new update for FF has the menubar and tabs glued together.

more options

If you use the rule set from It_Was_The_Other_Guy, you can post your question there to him. Unfortunately, I don't have time to install and test his various rules to see where you need to make the change.

more options

jscher2000 - Support Volunteer said

If you use the rule set from It_Was_The_Other_Guy, you can post your question there to him. Unfortunately, I don't have time to install and test his various rules to see where you need to make the change.

i'll have to create a reddit account then as don't have one.

more options

Seçilmiş Həll

Does it look like this:

https://github.com/MrOtherGuy/firefox-csshacks/issues/262

If you have a Github account, you can post an issue there.

more options

jscher2000 - Support Volunteer said

Does it look like this: https://github.com/MrOtherGuy/firefox-csshacks/issues/262 If you have a Github account, you can post an issue there.

You're a gem that did the trick as I tried something with that and what I was getting and tabs are back now on the bottom as are the menu bar at top.

Thanks as always!!

And in case it helps anyone else out this was my final code including the menu on top patch.


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

/* 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 Use tabs_on_bottom_menubar_on_top_patch.css if you have menubar permanently enabled and want it on top

  • /
  1. toolbar-menubar[autohide="true"] > .titlebar-buttonbox-container,
  2. TabsToolbar > .titlebar-buttonbox-container{
 position: fixed;
 display: block;
 top: 0px;
 right:0;
 height: 40px;

} @media (-moz-gtk-csd-reversed-placement),

      (-moz-platform: macos){
 .titlebar-buttonbox-container{ left:0; right: unset !important; }

} @supports -moz-bool-pref("userchrome.force-window-controls-on-left.enabled"){

 .titlebar-buttonbox-container{ left:0; right: unset !important; }

}

root[uidensity="compact"] #TabsToolbar > .titlebar-buttonbox-container{ height: 32px }
  1. toolbar-menubar[inactive] > .titlebar-buttonbox-container{ opacity: 0 }

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

  1. titlebar{
 -moz-box-ordinal-group: 2; /* Fx <112 compatibility */
 order: 2;
 -moz-appearance: none !important;
 --tabs-navbar-shadow-size: 0px;
 --uc-menubar-vertical-overlap: 19px; /* for hide_tabs_with_one_tab_w_window_controls.css compatibility */

} /* Re-order window and tab notification boxes */

  1. navigator-toolbox > div{ display: contents }

.global-notificationbox,

  1. tab-notification-deck{
 -moz-box-ordinal-group: 2; /* Fx <112 compatibility */
 order: 2;

}

  1. TabsToolbar .titlebar-spacer{ display: none; }

/* Also hide the toolbox bottom border which isn't at bottom with this setup */

  1. navigator-toolbox::after{ display: none !important; }

@media (-moz-gtk-csd-close-button){

 .titlebar-button{
   -moz-box-orient: vertical; /* Fx <112 compatibility */
   flex-direction: column;
 }

}

/* At Activated Menubar */

root:not([chromehidden~="menubar"], [sizemode="fullscreen"]) #toolbar-menubar:not([autohide="true"]) + #TabsToolbar > .titlebar-buttonbox-container {
 display: block !important;

}

  1. toolbar-menubar:not([autohide="true"]) > .titlebar-buttonbox-container {
 visibility: hidden;

}

/* These exist only for compatibility with autohide-tabstoolbar.css */ toolbox#navigator-toolbox > toolbar#nav-bar.browser-toolbar{ animation: none; }

  1. navigator-toolbox:hover #TabsToolbar{ animation: slidein ease-out 48ms 1 }
  2. TabsToolbar > .titlebar-buttonbox-container{ visibility: visible }
  3. navigator-toolbox:not(:-moz-lwtheme){ background-color: -moz-dialog }

/* Uncomment the following if you want bookmarks toolbar to be below tabs */ /*

  1. PersonalToolbar{
 -moz-box-ordinal-group: 2;
 order: 2;

}

  • /

/* 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:not([sizemode="fullscreen"]){ --uc-window-control-width: 0px !important }
root{
  /* height if native titlebar is enabled, assumes empty menubar */
 --uc-menubar-height: 20px;

}

root[tabsintitlebar]{
 /* height when native titlebar is disabled, more roomy so can fit buttons etc. */
 --uc-menubar-height: 29px;

}

root:is([sizemode="fullscreen"],[chromehidden~="menubar"]){
 --uc-menubar-height: 0px;

} /* Since menubar is statically at top, remove fake drag-space that might be set by window_control_placeholder_support.css */

root:not([sizemode="fullscreen"]) #nav-bar{ border-inline-width: 0 }
  1. navigator-toolbox{
 -moz-window-dragging: drag;
 padding-top: var(--uc-menubar-height) !important;

}

/* Remove window dragging from notification boxes */

  1. tab-notification-deck,

.global-notificationbox{

 -moz-window-dragging: no-drag;

}

  1. toolbar-menubar{
 position: fixed;
 display: flex;
 top: 0px;
 height: var(--uc-menubar-height);
 width: 100%;
 overflow: hidden;

}

  1. toolbar-menubar > .titlebar-buttonbox-container{ height: 100%; order: 100; }
  1. toolbar-menubar > [flex]{ flex-grow: 100; }
  2. toolbar-menubar > spacer[flex]{
 order: 99;
 flex-grow: 1;
 min-width: var(--uc-window-drag-space-post,20px);

}

  1. toolbar-menubar .toolbarbutton-1 { --toolbarbutton-inner-padding: 3px }
root:not([sizemode="fullscreen"]) #toolbar-menubar.browser-toolbar > .titlebar-buttonbox-container{
 visibility: visible;

}

root:not([chromehidden~="menubar"], [sizemode="fullscreen"]) #TabsToolbar#TabsToolbar#TabsToolbar > .titlebar-buttonbox-container {
 display: none !important;

}

more options

FIREFOX has just lost me as a user. I've used FF -forever- and put up with all their "improvements" over the past years. I'm 'stuck on' V88 as I got tired of having to -fix- all of their FU'S. I occasionally do a -swap- to the newest version to see what new thing has been FU'D and how difficult it is to -FIX-, usually more CSS file manipulation, then wind up swapping back. My gripes are bookmark/list spacing and constant TABS change. The continual ICON changes is also annoying. Who in their right mind would want tabs way up at the top above everything else, it should be -connected- to the page you are on not in outer space. Apparently everyone in FF development. I will use v88 until I start running into things that won't work, then I'm HISTORY. Unless FF decides to return the 'user flexibility' of old. But I doubt FF has long to live. Such a good browser . . . . . . destroyed by those who think they 'know better' about what everyone wants.

Modified by AEinstein

more options

Hi AEinstein, I know it's inconvenient to swim against the tide of user interface changes, especially since Firefox 57 because add-ons lost the ability to reposition toolbars. I know you don't consider userChrome.css rules to be a type of "user flexibility" but I think it works miracles if you have solid instructions for using it.

In case you change your mind someday:

Most of the rules I posted for fixing the spacing issues in Firefox 89 two years ago are still relevant, so I'll refer you to my page here about that: https://www.userchrome.org/firefox-89-styling-proton-ui.html