If your using "userChrome.css" you will have to look or ask at the site you got it from to see what happened. And if this was your custom "userChrome.css" you will have to post it or somehow someone is going to have to analyze it to find the problem in the css file.

In Firefox 65 they have moved the main Menu bar and the Tab bar in one #titlebar container. This makes it impossible to use a simple -moz-box-ordinal-group rule to move the Tab bar to the bottom position.

See:

• /questions/1241659 Tab toolbar should be below bookmarks bar - post quantum fix bricked by version 65 again
• https://github.com/Aris-t2/CustomCSSforFx/issues/164

cor-el said

In Firefox 65 they have moved the main Menu bar and the Tab bar in one #titlebar container. This makes it impossible to use a simple -moz-box-ordinal-group rule to move the Tab bar to the bottom position. See:

• /questions/1241659 Tab toolbar should be below bookmarks bar - post quantum fix bricked by version 65 again
• https://github.com/Aris-t2/CustomCSSforFx/issues/164

I checked both those links. But I'm not too literate when it comes to programing. So I'm having a hard time following their solutions.

Try the code I posted in this thread. It works for me on Linux, but I don't know about other platforms.

• /questions/1248277 Reposition Tabs at bottom, directly above web page in Firefox 65.0?

We have been researching this and fighting this since Firefox, in the "infinite wisdom" decided to, once again move things around. We WANT a solution to putting our TABS on Bottom, a permanent solution.

Firefox is supposed to be a more User Friendly interface, one that we Do Not have to fight with, like you typically have to do with Windows. Please, provide an Easy, or at least Simple solution.

It's not just putting the tabs on the top in an awkward place, but they are totally square so you cannot tell them apart easily and cannot use certain themes, as the tabs are barely visible. Chrome has them on top, but they are much more visible and rounded.

Have no idea what's up with Mozilla, but they don't seem to mind losing users, or they would not make it more difficult to use the browser. They really should have a big sign in the office that says 'If it isn't broken, don't fix it.'

This is really starting to annoy me. Firefox should have tabs below the bookmarks bar directly above the content by default as this is a much better user experience. Tabs at the top is a horrible layout. Every time I update I have to fix this and It is driving me nuts.

TBH, I'm starting to lose faith in Firefox as every update seems to cause me problems and I honestly don't think the browser has got better over time. Firefox used to be simple and straight forward but over the last couple of years its consistantly got more and more complicated and frustrating. I've lost count of the powerful add-ons that made firefox special that no longer work due to the Quantum changes. Think I'm gonna test the brave browser as at least I'll get paid for using it.

I have sent in Donations from time to time. I really think my money was wasted now. From a programmers standpoint, why can't they make a little tweak for us, who use their product, recommend their product to others. Why is Firefox going the way Bill Gates did, when he only did things HIS way. We love using Firefox and would gladly donate more money, but let us have the product the way we WANT it.

montanamoss said

I have sent in Donations from time to time. I really think my money was wasted now. From a programmers standpoint, why can't they make a little tweak for us, who use their product, recommend their product to others. Why is Firefox going the way Bill Gates did, when he only did things HIS way. We love using Firefox and would gladly donate more money, but let us have the product the way we WANT it.

For those of us who have for years been extremely loyal Mozilla adherents, I feel like they are totally ignoring the users. They don't seem to care about user input--just competing for speed. The browsers all seem about the same speed to me anyhow--I did not notice any pick-up in speed from the browser updates that have moved the tabs around.

As a researcher, I have found you can contact anyone if you try hard enough. I have not found any way to contact this organization, though.

Does anyone have any GOOD replacement ideas for Foxfire? Perhaps if they understand that we are willing to change from Firefox, they will get the idea. Personally, I don't want to change, but this is getting ridiculous. Why won't they provide a FIX, a permanent FIX. I like being able to pick add ons that allowed me to tweak of customize Firefox. Or course we can't do that now. The good ones that I used to use are no longer available.

montanamoss said

We have been researching this and fighting this since Firefox, in the "infinite wisdom" decided to, once again move things around. We WANT a solution to putting our TABS on Bottom, a permanent solution. Firefox is supposed to be a more User Friendly interface, one that we Do Not have to fight with, like you typically have to do with Windows. Please, provide an Easy, or at least Simple solution.

I've been dealing with this for several years now. I'm guessing that it's a minority of people that prefer tabs on the bottom, and so Mozilla does not consider it a priority.

I'm posting this in all the threads I can find since all the solutions are leaving out important information, like where to find userChrome.css.

• Click 'Help' from the menu at the top of Firefox.
• Click 'Troubleshooting Information'.
• Look for an option that says 'Open Folder' next to 'Profile Folder'. This will open a new explorer window.
• There should be a folder there called 'Chrome'.
• In this folder, you might find userChrome.css. If not, hold down the shift key, right click in the empty space, and select 'Open command window here'. You will get a black window with white text. Type the following command and hit enter:

type nul > userChrome.css

• Now open the userChrome.css file, paste the following code over anything in there already and save the file:

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* only needed once */

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

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

Note that the name of the folder where userChrome.css is located is all lowercase 'chrome'.

Thank you for all the assistance. For now, until Firefox is "tinkered" with again, our tabs are where they were MEANT to be, on the bottom.

AM

Has anyone found a complete code that works for Mac IOS? I am now having tabs 'crash' because I'm grabbing them when I try to grab the browser.

I hate this--I've tried it their way--tabs on top and it sucks.

Mozilla appears to be completely oblivious to this issue--and do seem to be working against their loyal consumers. I've been using Chrome more--at least you can tell the tabs apart!

I have it on 3 computers and it syncs. If I downgrade to v64, will this sync to the browsers on the other computers, or do I have to do each one separately?

It is a shame though--I've used Firefox forever.

/* this is for Multirow Bookmarks % Tabs below Bookmarks / Tabs on bottom **************/
    /* for Firefox 65+ userChrome.css *************/
    /* put userChrome.css to *******/
    /* C:\Users\USER\AppData\Roaming\Mozilla\Firefox\Profiles\xx\chrome\HERE ***************/
    /* put your username for USER and put file HERE **************/
    /* *****************/
    /* if you like this solution you are very very welcome to send 1 EUR to paypal**********/
    /* paypal address is [email protected] **********/
    /* I will not answer any email to this address *****************************************/
    /* no warranty, use at your own risk *******/
    /* works fine for me, what you do is your risk ******/
    /* **********************/
    /* I collected two scripts from the opensource net and combined them *******************/
    /* I leave nearly 99% untouched, also the following introduction text ******************/
    /* ************************/

     
    /* Firefox 57+ userChrome.css tweaks ****************************************************/
    /* code mostly taken from 'Classic Theme Restorer' & 'Classic Toolbar Buttons' add-ons **/
    /* by Aris ([email protected])*********************************************************/
    /* Github: https://github.com/aris-t2/customcssforfx ************************************/
    /****************************************************************************************/
     
     
    #personal-bookmarks {
      display: block;
    }
     
    #personal-bookmarks #PlacesToolbar {
      display: block;
      min-height: 0px;
      overflow-x: hidden;
      overflow-y: auto;
      max-height: 999px;
    }
     
    #personal-bookmarks #PlacesToolbar > hbox {
      display: -moz-stack !important;
      left: 0px;
      right: 0px;
      width: 100%;
    }
     
    #personal-bookmarks #PlacesToolbar #PlacesToolbarItems {
      overflow-x: visible;
      overflow-y: visible;
    }
     
    #personal-bookmarks #PlacesToolbar #PlacesToolbarItems > box {
      display: block;
    }
     
    #personal-bookmarks #PlacesToolbar > .bookmark-item{
      visibility: visible !important;
    }
     
    #personal-bookmarks #PlacesToolbar .chevron{
      display: none;
    }
     
    #personal-bookmarks #PlacesToolbar > hbox > hbox{
      overflow-x: hidden;
      overflow-y: hidden;
    }
     
    #personal-bookmarks #PlacesToolbar #PlacesToolbarDropIndicator[collapsed="true"],
    #personal-bookmarks #PlacesToolbar #PlacesToolbarDropIndicator{
      display: none;
    }
     
    #personal-bookmarks #PlacesToolbar toolbarbutton.bookmark-item{
      padding-top: 2px;
      padding-bottom: 2px;
      /*margin-left: -4px !important;
      padding-right: 9.5px !important;*/
    }
     
    #personal-bookmarks #PlacesToolbar toolbarbutton.bookmark-item:hover:active:not([disabled="true"]),
    #personal-bookmarks #PlacesToolbar toolbarbutton.bookmark-item[open="true"] {
      padding-top: 2px !important;
      padding-bottom: 2px !important;
      /*-moz-padding-start: 4px;
      -moz-padding-end: 2px;*/
    }
     
    #personal-bookmarks #PlacesToolbar toolbarseparator{
      -moz-appearance: none !important;
      visibility: visible !important;
      display: inline;
      text-shadow: none !important;
      border-left: 3px solid ThreeDShadow !important;
      border-right: 3px solid ThreeDHighlight !important;
      vertical-align: middle;
    }
     
    #personal-bookmarks toolbarbutton.bookmark-item[dragover][open]{
      -moz-appearance: toolbarbutton;
    }
     
    #navigator-toolbox toolbar:not(#nav-bar):not(#toolbar-menubar):not(#TabsToolbar) { 
      max-height: 999px !important;
    }

    /**********************Tabs below navigation toolbar*******************************/
     
  /* Combined userChrome.css taken from aris-t2's code /*
/* Firefox Quantum userChrome.css tweaks ************************************************/
/* Github: https://github.com/aris-t2/customcssforfx ************************************/
/****************************************************************************************/


:root {
  --colored_menubar_background_image: linear-gradient(#f9f9fa,#f9f9fa);
  --general_toolbar_color_toolbars: linear-gradient(#f9f9fa,#f9f9fa);
  --general_toolbar_color_navbar: linear-gradient(#f9f9fa,#f9f9fa);
  --tabs_toolbar_color_tabs_not_on_top: linear-gradient(#f9f9fa,#f9f9fa);
  --tabs_toolbar_border-tnot_normal_mode_size: 1px;
  --tabs_toolbar_border-tnot_normal_mode: var(--tabs-border-color);
  --classic_squared_tabs_tab_text_color: black;
  --classic_squared_tabs_new_tab_icon_color: black;
  --classic_squared_tabs_tab_text_shadow: transparent;
  --tab-min-height_tnot: 32px;
}

:root[uidensity=compact]  {
  --tab-min-height_tnot: 28px;
}

:root[uidensity=touch] {
  --tab-min-height_tnot: 40px;
}

/* tabs toolbar adjustment */
#main-window[tabsintitlebar] #toolbar-menubar[autohide="true"][inactive="true"] ~ #TabsToolbar,
#main-window[tabsintitlebar][sizemode="maximized"] #toolbar-menubar[autohide="true"][inactive="true"] ~ #TabsToolbar,
#main-window[uidensity=compact][tabsintitlebar] #toolbar-menubar[autohide="true"][inactive="true"] ~ #TabsToolbar,
#main-window[uidensity=compact][tabsintitlebar][sizemode="maximized"] #toolbar-menubar[autohide="true"][inactive="true"] ~ #TabsToolbar,
#TabsToolbar {
  -moz-padding-start: 2px !important;
}

#main-window[tabsintitlebar] #toolbar-menubar[autohide="true"][inactive="true"] ~ #TabsToolbar:-moz-lwtheme,
#main-window[tabsintitlebar][sizemode="maximized"] #toolbar-menubar[autohide="true"][inactive="true"] ~ #TabsToolbar:-moz-lwtheme,
#main-window[uidensity=compact][tabsintitlebar] #toolbar-menubar[autohide="true"][inactive="true"] ~ #TabsToolbar:-moz-lwtheme,
#main-window[uidensity=compact][tabsintitlebar][sizemode="maximized"] #toolbar-menubar[autohide="true"][inactive="true"] ~ #TabsToolbar:-moz-lwtheme,
#TabsToolbar:-moz-lwtheme,
#main-window[tabsintitlebar][sizemode="maximized"] #toolbar-menubar[autohide="true"][inactive="true"] ~ #TabsToolbar,
#main-window[uidensity=compact][tabsintitlebar][sizemode="maximized"] #toolbar-menubar[autohide="true"][inactive="true"] ~ #TabsToolbar,
#main-window[sizemode="maximized"] #TabsToolbar,
#main-window[tabsintitlebar]:not([style*='--lwt-header-image']):-moz-lwtheme #navigator-toolbox #toolbar-menubar[autohide="true"][inactive="true"] ~ #TabsToolbar,
#main-window[tabsintitlebar][sizemode="maximized"]:not([style*='--lwt-header-image']):-moz-lwtheme #toolbar-menubar[autohide="true"][inactive="true"] ~ #TabsToolbar,
#main-window[uidensity=compact][tabsintitlebar]:not([style*='--lwt-header-image']):-moz-lwtheme #toolbar-menubar[autohide="true"][inactive="true"] ~ #TabsToolbar,
#main-window[uidensity=compact][tabsintitlebar][sizemode="maximized"]:not([style*='--lwt-header-image']):-moz-lwtheme #toolbar-menubar[autohide="true"][inactive="true"] ~ #TabsToolbar,
#main-window[tabsintitlebar]:not([style*='--lwt-header-image']):-moz-lwtheme #TabsToolbar {
  -moz-padding-start: 0px !important;
}

#main-window[tabsintitlebar][sizemode="normal"]:not([sizemode="fullscreen"]) #TabsToolbar {
  margin-top: 0px !important;
}

#main-window[tabsintitlebar][sizemode="normal"][chromehidden~="menubar"] #TabsToolbar,
#main-window[tabsintitlebar][sizemode="normal"] #toolbar-menubar[autohide="true"][inactive] + #TabsToolbar,
#main-window[tabsintitlebar][sizemode="maximized"][chromehidden~="menubar"] #TabsToolbar,
#main-window[tabsintitlebar][sizemode="maximized"] #toolbar-menubar[autohide="true"][inactive] + #TabsToolbar {
  padding-top: 0px !important;
}

#main-window[tabsintitlebar] #toolbar-menubar[autohide="true"]:not([inactive="true"]) ~ #TabsToolbar,
#main-window[tabsintitlebar] #toolbar-menubar[autohide="false"] ~ #TabsToolbar{
  margin-top: 0px !important;
}

/* tab title in titlebar support */
#main-window[tabsintitlebar][sizemode="normal"] #navigator-toolbox #TabsToolbar,
#main-window[uidensity=compact][tabsintitlebar][sizemode="normal"] #navigator-toolbox #TabsToolbar,
#main-window[tabsintitlebar][sizemode="maximized"] #navigator-toolbox #TabsToolbar,
#main-window[uidensity=compact][tabsintitlebar][sizemode="maximized"] #navigator-toolbox #TabsToolbar,
#main-window[tabsintitlebar][sizemode="normal"] #navigator-toolbox #toolbar-menubar[autohide="true"][inactive="true"] ~ #TabsToolbar,
#main-window[uidensity=compact][tabsintitlebar][sizemode="normal"] #navigator-toolbox #toolbar-menubar[autohide="true"][inactive="true"] ~ #TabsToolbar,
#main-window[tabsintitlebar][sizemode="maximized"] #navigator-toolbox #toolbar-menubar[autohide="true"][inactive="true"] ~ #TabsToolbar,
#main-window[uidensity=compact][tabsintitlebar][sizemode="maximized"] #navigator-toolbox #toolbar-menubar[autohide="true"][inactive="true"] ~ #TabsToolbar{
  margin-top: 0px !important;
}

/* titlebar button support */
#main-window[tabsintitlebar] #toolbar-menubar[autohide="true"][inactive="true"] ~ #nav-bar{
  margin-top: 2px !important;
}

/* fix for application/hamburger button in titlebar */
#main-window[tabsintitlebar][sizemode="fullscreen"] #toolbar-menubar[autohide="true"][inactive="true"] ~ #nav-bar #PanelUI-button {
  visibility: collapse !important;
}

#main-window[inDOMFullscreen="true"] #TabsToolbar {
  opacity: 0 !important;
}

/* tab height */
#tabbrowser-tabs,
#tabbrowser-tabs > .tabbrowser-arrowscrollbox,
.tabbrowser-tabs[positionpinnedtabs] > .tabbrowser-tab[pinned] {
  min-height: var(--tab-min-height_tnot) !important;
}

/* toolbar order (start) *********

Using a userChrome.css entry found elsewhere on this site, I kept my tabs on the bottom of the bookmarks bar. After the FF 67.0.2 update the tabs went back to the top of the browser. I tried every suggested program in forums but nothing worked. An internet search came up with this site, "http://forums.mozillazine.org/viewtopic.php?f=38&t=3046394&start=30#" and it's chrome entry code worked perfectly. My tabs are back on the bottom where they belong and the browser fonts are nice and bright. This is the code:

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* only needed once */

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

#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: 27px !important; /* adjust to suit your needs */
}
:root #tabbrowser-tabs {
 --tab-min-height: 27px !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;
}

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

/* Remove Haze NavBar */
#nav-bar,
#PersonalToolbar {
  background: transparent !important;
}