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

Remove Space Below Tab Bar

  • 9 replies
  • 1 has this problem
  • 168 views
  • Last reply by tunescool

id like to remove this space, i have a userchrome file

id like to remove this space, i have a userchrome file
Attached screenshots

Chosen solution

I've updated the CSS code you posted above with new code for Firefox 72, so you can replace your current userChrome.css with that new code.

Read this answer in context 👍 1

All Replies (9)

I'm not sure what space you mean.

Do you mean the gray line under the selected Tab ?

theres a space there

in the pic, cirlced is a space. im sure you can find it

Are you currently using code in userChrome.css to style the appearance of the Tab bar ?

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

/* TABS: on bottom - code for Firefox 66-73 */
#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;
  display: block !important;
}

#tabbrowser-tabs {
  width: 100vw !important;
}

/* navigator-toolbox - padding */
*|*:root:not([chromehidden*="toolbar"]) #navigator-toolbox {
  padding-bottom: calc(var(--tab-min-height) + 0px) !important; /*adjust*/
}

/* TabsToolbar with menubar and titlebar hidden */
*|*:root[tabsintitlebar]:not([inFullscreen="true"]):not([sizemode="maximized"])
 #toolbar-menubar[autohide="true"] ~ #TabsToolbar{
  bottom: var(--tab-min-height) !important;
  padding-top: calc(var(--tab-min-height) - 22px) !important; /*adjust*/
}

/* TABS: height */
*|*:root {
 --tab-toolbar-navbar-overlap: 0px !important;
 --tab-min-height: 33px !important; /* adjust to suit your needs */
 --tab-min-width:  80px !important; /* adjust to suit your needs */
}

#TabsToolbar {
  height: var(--tab-min-height) !important;
  margin-bottom: 0px !important;
  box-shadow: ThreeDShadow 0 -1px inset, -moz-dialog 0 1px !important; /* omit */
  background-color: var(--toolbar-bgcolor) !important;
  color: var(--toolbar-color) !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 window-controls */
#TabsToolbar #window-controls {display:none!important;}

/* move caption buttons to right end of Tab bar with menu bar and title bar hidden */
*|*:root[tabsintitlebar]:not([inFullscreen="true"])
 #toolbar-menubar[autohide="true"] ~ #TabsToolbar
 .titlebar-buttonbox-container {
  position: fixed !important;
  display: block !important;
  right: 0 !important;
  top: calc(6px + var(--tab-min-height)) !important; /*adjust*/
  visibility: visible !important;
}

*|*:root[tabsintitlebar]:not([inFullscreen="true"])
 #toolbar-menubar[autohide="true"] ~  #TabsToolbar {
   padding-right: 100px !important; /*adjust*/
}

#personal-bookmarks {
  margin: 0px !important;
  padding-bottom: 5px !important;
}

#TabsToolbar .tabbrowser-tab[selected] .tab-line {
  display: none !important;
}

Modified by cor-el

Maybe this?


#TabsToolbar{
  margin-bottom: 0px !important;
  border-bottom: 1px solid #5f7181 !important;
}

Adjust as necessary, if it is the correct bit of chrome.

You might want to remove or comment out the @namespace definition if you are having other issues, i see reports it can break things and is at least unnecessary in userChrome.css.

that didnt do anything

Chosen Solution

I've updated the CSS code you posted above with new code for Firefox 72, so you can replace your current userChrome.css with that new code.

yea that did it thanks