That is the Find bar (findbar in userChrome.css). In Firefox 113, -moz-box-ordinal-group is no longer supported with the change to using flex boxes for the user interface. With a flex box you use the order CSS property with a value one less than -moz-box-ordinal-group (-moz-box-ordinal-group is 1 and flex is 0 by default).

• https://developer.mozilla.org/en-US/docs/Web/CSS/order

New code for 113+:

/* Find Bar on TOP */
.browserContainer > findbar {
  order:-1 !important;
  border-top: none !important;
  border-bottom: 1px solid ThreeDShadow !important;
}

Thank you for the prompt reply. I believe you have responded to be in the past. Forgive me for being brief but I just had cataract surgery on both eyes and I’m not seeing well yet.

I fully admit I do not understand any of: In Firefox 113, -moz-box-ordinal-group is no longer supported with the change to using flex boxes for the user interface. With a flex box you use the order CSS property with a value one less than -moz-box-ordinal-group (-moz-box-ordinal-group is 1 and flex is 0 by default).

And I will have to put that off for a month or so.

But I am guessing that the “New code for 113+” can be inserted into my userChrome.css file.

Am I correct?

What CSS code do you currently have in userChrome.css for the findbar ?

/* Move Find Bar above the page - I added 07-17-2020 */ .browserContainer > findbar {

 -moz-box-ordinal-group: 0;

}

Replace -moz-box-ordinal-group: 0; with order:-1 !important;

Was:

/* Move Find Bar above the page - I added 07-17-2020 */ .browserContainer > findbar {

 -moz-box-ordinal-group: 0;

Per your instructions:

Replace -moz-box-ordinal-group: 0; with order:-1 !important;

As replaced:

/* Move Find Bar above the page - I added 07-17-2020 */ .browserContainer > findbar {

 order:-1 !important; 

Restarted FireFox - no change

Rebooted desktop - no change

Did i do something wrong?

Do you have other code in userChrome.css and is this feature still enabled ? Is the file still in the correct location and doesn't have a hidden .txt file extension ?

Can you post the full content of userChrome.css ?

It is not that difficult to create userChrome.css if you have never used it.

The first step is to open the "Help -> Troubleshooting Information" page and find the button to access the profile folder with the random name (xxxxxxxx.default-release).

• https://support.mozilla.org/en-US/kb/use-troubleshooting-information-page-fix-firefox

You can find the button to go to the profile folder under the "Application Basics" section as "Profile Folder -> Open Folder". If you click this button then you open the profile folder in the Windows File Explorer. You need to create a folder with the name chrome in the profile folder with the random name (name is all lowercase). In the chrome folder you need to create a plain text file with the name userChrome.css (name is case sensitive). In this userChrome.css text file you paste the text posted. On Mac you can use the TextEdit utility to create the userChrome.css file as a plain text file.

In Windows saving the file is usually the only time things get more complicated because Windows can silently add a .txt file extension and you end up with a file named userChrome.css.txt. To avoid this you need to make sure to select "All files" in the dialog to save the file in the text editor using "Save File as".

You need to close (Quit/Exit) and restart Firefox when you create or modify the userChrome.css file.

More info about userChrome.css/userContent.css in case you are not familiar: *https://www.userchrome.org/what-is-userchrome-css.html

• https://www.userchrome.org/how-create-userchrome-css.html
• https://www.userchrome.org/firefox-changes-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.

• about:config => toolkit.legacyUserProfileCustomizations.stylesheets = true
• https://support.mozilla.org/en-US/kb/about-config-editor-firefox

Sorry for the delay in responding, eyes are still adapting to the surgery and not everything I type of read is anywhere near 100%.

userChrome.css is posted below (with out your suggested changes).

userChrome.css must be enabled since everything (except the Find toolbar) works just like it has for the last 2 or so years. I haven't had to change the file in that amount of time and I'm not up to re-learning just yet.

Ditto for the location.

Also, there are no other copies, anywhere, of userChrome.css.

• * * * *

/*AGENT_SHEET*/

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





/* Tab bar below Navigation & Bookmarks Toolbars */
#nav-bar { /* main toolbar */
  -moz-box-ordinal-group: 1 !important;
  box-shadow: none !important;
}
#PersonalToolbar { /* bookmarks toolbar */
  -moz-box-ordinal-group: 2 !important;
}
#TabsToolbar { /* tab bar */
  -moz-box-ordinal-group: 3 !important;
  padding-top: 0 !important;
}
/* Clean up spacing */
.titlebar-placeholder {
  display: none !important;
}
toolbarbutton.bookmark-item {
  padding-top: 2px !important;
  padding-bottom: 2px !important;
}

/* If you display either:
   (1) The title bar, or
   (2) On Windows, the menu bar
   You might not want the following extra space above the main toolbar. 
   In that case, delete the following rule:
*/
#navigator-toolbox {
  padding-top: 20px !important;
}

/* Background for Light and Dark themes */
#main-window[lwthemetextcolor="bright"] #TabsToolbar, 
#main-window[lwthemetextcolor="dark"] #TabsToolbar {
  background-color: var(--chrome-secondary-background-color) !important;
  background-image: none !important;
}
#main-window[lwthemetextcolor="dark"] .scrollbutton-up,
#main-window[lwthemetextcolor="dark"] .scrollbutton-down,
#main-window[lwthemetextcolor="dark"] .tabs-newtab-button,
#main-window[lwthemetextcolor="dark"] #new-tab-button,
#main-window[lwthemetextcolor="dark"] #alltabs-button {
  fill: var(--lwt-text-color) !important;
}
/* Left and right borders on Win 7 & 8, but not on 10 and later: */
@media (-moz-os-version: windows-win7), (-moz-os-version: windows-win8) {
  /* Vertical toolbar border */
  #main-window[sizemode=normal] #navigator-toolbox > toolbar#TabsToolbar {
    border-left: 1px solid hsla(240,5%,5%,0.3) !important;;
    border-right: 1px solid hsla(240,5%,5%,0.3) !important;;
    background-clip: padding-box;
  }
}

/* Override vertical shifts when moving a tab (9 Jan 2018) */
#TabsToolbar[movingtab] {
  padding-bottom: 0 !important;
}
#TabsToolbar[movingtab] > .tabbrowser-tabs {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}
#TabsToolbar[movingtab] + #nav-bar {
  margin-top: 0 !important;
}

/* Move Find Bar above the page*/
.browserContainer > findbar {
  -moz-box-ordinal-group: 0;
}

:root {
  --tab-min-height_tnot: 32px;
}

#print-preview-toolbar,
#printedit-toolbar,
#titlebar {
  -moz-box-ordinal-group: 0 ;
}

#navigator-toolbox #toolbar-menubar {
  -moz-box-ordinal-group: 1 ;
}

#navigator-toolbox #nav-bar {
  -moz-box-ordinal-group: 2 ;
}

#navigator-toolbox #PersonalToolbar {
  -moz-box-ordinal-group: 3 ;
}

#navigator-toolbox toolbar {
  -moz-box-ordinal-group: 10 ;
}

#navigator-toolbox #TabsToolbar {
  -moz-box-ordinal-group: 100 ;
}

#main-window:not([chromehidden*="toolbar"]) #navigator-toolbox {
  padding-bottom: calc(1px + var(--tab-min-height_tnot)) ;
}

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

#tabbrowser-tabs {
  width: 100vw ;
}

This code is rather old and requires a lot of changes, so best would be to get the latest updates from Aris.

• https://github.com/aris-t2/customcssforfx

They might also be able to help you on the subreddit forum.

• https://www.reddit.com/r/FirefoxCSS/