Avatar for Username

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

Hierdie gesprek is in die argief. Vra asseblief 'n nuwe vraag as jy hulp nodig het.

Tab titles and close button missing (Firefox 72)

  • 5 antwoorde
  • 1 het hierdie probleem
  • 1 view
  • Laaste antwoord deur cor-el

OrangeMelon
OrangeMelon
more options

I had an update to Firefox 72 today which required messing around with the Chrome.css code again to get my tabs back below the searchbar. I followed the advice on this page: https://support.mozilla.org/en-US/questions/1274416?page=2 , but the format of the tabs is now a complete mess. As the image below shows, text is set awkwardly below the page icon rather than in-line, or set below view if it's over a certain length. The closs button is also set slightly above, rather than in-line with text and is missing altogether depending on the length of text. This is also the case when I remove the .CSS code to reset the tabs to above the searchbar. Any help would be much appreciated.

I had an update to Firefox 72 today which required messing around with the Chrome.css code again to get my tabs back below the searchbar. I followed the advice on this page: https://support.mozilla.org/en-US/questions/1274416?page=2 , but the format of the tabs is now a complete mess. As the image below shows, text is set awkwardly below the page icon rather than in-line, or set below view if it's over a certain length. The closs button is also set slightly above, rather than in-line with text and is missing altogether depending on the length of text. This is also the case when I remove the .CSS code to reset the tabs to above the searchbar. Any help would be much appreciated.
Aangehegde skermkiekies

Gewysig op deur OrangeMelon

All Replies (5)

cor-el
cor-el
  • Moderator
  • Top 10 Contributor
more options

You probably have other code in userChrome.css that is causing this issue. From the screenshot it may seem that the title is push down and thus appears below the Tab bar and is not visible.

Do you have other code that deals with the tab bar or text in individual tabs?

OrangeMelon
OrangeMelon Vraag-eienaar
more options

Hi Cor-el!

This is the full code I'm using: 

/* 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 {
 display: block !important; /*required for 71+*/
 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;
}

I'm no expert in userChrome.css and have mostly done what others have suggested, coupled with a bit of trail and error (read - I don't know what I'm doing!)

Gewysig op deur cor-el

cor-el
cor-el
  • Moderator
  • Top 10 Contributor
more options 
#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;
}

This code probably won't work properly because shadow DOM is used for the tabs (you can't cross a shadow DOM barrier).

You can try this code (not tested): 

#tabbrowser-tabs,
.tabbrowser-arrowscrollbox,
.tabbrowser-tab[pinned] {
  min-height: var(--tab-min-height) !important;
  max-height: var(--tab-min-height) !important;
}
OrangeMelon
OrangeMelon Vraag-eienaar
more options

Much appreciated, but sadly no better. It seems odd that the problem persists even when I remove all userChrome.css code and revert back to tabs on top.

cor-el
cor-el
  • Moderator
  • Top 10 Contributor
more options

You can start Firefox in Safe Mode to check if one of the extensions ("3-bar" menu button or Tools -> Add-ons -> Extensions) or if hardware acceleration is causing the problem.

  • switch to the DEFAULT theme: "3-bar" menu button or Tools -> Add-ons -> Themes
  • do NOT click the "Refresh Firefox" button on the Safe Mode start window

You can also try different Density settings in customize mode.