Mozilla VPN is currently experiencing an outage. Our team is actively working to resolve the issue. Please check the status page for real-time updates. Thank you for your patience.

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.

Avatar for Username

Buscar en Ayuda

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

Este tema ha sido archivado. Haz una nueva pregunta si necesitas ayuda.

I get spaces in my tab bar when I close tabs or open them from search

  • 2 respuestas
  • 1 tiene este problema
  • 1 visita
  • Última respuesta de carpevis

carpevis
carpevis
more options

I used a .css command to fix the width of my tabs in FF 71, which works fine, but now, the tabs don't close up together after closing tabs. I get odd spaces between them and even at the beginning of the tab bar. (see image).

I don't use plug-ins for the tab parameters/behaviors, they're all .css- based.

The things I want:

- tabs below the bookmark toolbar. - Bookmark toolbar below the below the address bar. - Fixed width tabs (100 px). - Less height being used by the bookmark tool bar. (~30px). - Tab height a little larger than the bookmark height (~40px).

Over the years, I've sort of piecemealed the .css code and it's probably a blazing mess right now for what I want to have. My old .css worked GREAT in FF 70, but it doesn't in FF71. I probably need to have it cleaned up by someone who had a lot more experience than I do.

Any help at least getting my tabs to slide together when one is closed would be great!

Below is the contents of my userChrome.css: 


/* Bookmark Sorting Menu */
#menu_unsortedBookmarks { display: none !important; }
#BMB_unsortedBookmarks { display: none !important; }

/* Show Tab Close buttons only when hovered */
#tabbrowser-tabs > .tabbrowser-tab:not([pinned="true"]) > .tab-stack > .tab-content > .tab-close-button {
  visibility: collapse !important;
  opacity: 0 !important;
  transition: all 250ms ease-in-out !important;
}
#tabbrowser-tabs > .tabbrowser-tab:not([pinned="true"]):hover > .tab-stack > .tab-content > .tab-close-button {
  visibility: visible !important;
  opacity: 1 !important;
  transition: all 250ms ease-in-out !important;;
}
#tabbrowser-tabs > .tabbrowser-tab:not([pinned="true"]) > .tab-stack > .tab-content > .tab-close-button {
  display: -moz-box !important;
}

/* Tab Max Width */

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


/*#tabbrowser-tabs {
  width: 99vw !important;
}*/
#main-window:not([chromehidden*="toolbar"]) #navigator-toolbox {padding-bottom: var(--tab-min-height) !important;}

/*#tabbrowser-tabs{
	max-width: 150px !important;}


/* Tabs On Bottom */
/* 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;
 position: absolute !important;
 bottom: 0 !important;
 width: 100vw !important;
}

#main-window:not([chromehidden*="toolbar"]) #navigator-toolbox {
 padding-bottom: var(--tab-min-height) !important;
}




#TabsToolbar #window-controls {
 display: none !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: 100px !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;
}

***THE BELOW WAS ADDED THAT RESULTED IN WEIRD TAB BEHAVIOR IN IMAGE**
/*Tab Max & Min Width */
.tabbrowser-tab:not([pinned]) {
max-width: 101px !important;
min-width: 100px !important;
}
I used a .css command to fix the width of my tabs in FF 71, which works fine, but now, the tabs don't close up together after closing tabs. I get odd spaces between them and even at the beginning of the tab bar. (see image). I don't use plug-ins for the tab parameters/behaviors, they're all .css- based. The things I want: - tabs below the bookmark toolbar. - Bookmark toolbar below the below the address bar. - Fixed width tabs (100 px). - Less height being used by the bookmark tool bar. (~30px). - Tab height a little larger than the bookmark height (~40px). Over the years, I've sort of piecemealed the .css code and it's probably a blazing mess right now for what I want to have. My old .css worked GREAT in FF 70, but it doesn't in FF71. I probably need to have it cleaned up by someone who had a lot more experience than I do. Any help at least getting my tabs to slide together when one is closed would be great! Below is the contents of my userChrome.css: <pre><nowiki>/* Bookmark Sorting Menu */ #menu_unsortedBookmarks { display: none !important; } #BMB_unsortedBookmarks { display: none !important; } /* Show Tab Close buttons only when hovered */ #tabbrowser-tabs > .tabbrowser-tab:not([pinned="true"]) > .tab-stack > .tab-content > .tab-close-button { visibility: collapse !important; opacity: 0 !important; transition: all 250ms ease-in-out !important; } #tabbrowser-tabs > .tabbrowser-tab:not([pinned="true"]):hover > .tab-stack > .tab-content > .tab-close-button { visibility: visible !important; opacity: 1 !important; transition: all 250ms ease-in-out !important;; } #tabbrowser-tabs > .tabbrowser-tab:not([pinned="true"]) > .tab-stack > .tab-content > .tab-close-button { display: -moz-box !important; } /* Tab Max Width */ #TabsToolbar { position: absolute !important; bottom: 0 !important; width: 100vw !important;5 } /*#tabbrowser-tabs { width: 99vw !important; }*/ #main-window:not([chromehidden*="toolbar"]) #navigator-toolbox {padding-bottom: var(--tab-min-height) !important;} /*#tabbrowser-tabs{ max-width: 150px !important;} /* Tabs On Bottom */ /* 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; position: absolute !important; bottom: 0 !important; width: 100vw !important; } #main-window:not([chromehidden*="toolbar"]) #navigator-toolbox { padding-bottom: var(--tab-min-height) !important; } #TabsToolbar #window-controls { display: none !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: 100px !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; } ***THE BELOW WAS ADDED THAT RESULTED IN WEIRD TAB BEHAVIOR IN IMAGE** /*Tab Max & Min Width */ .tabbrowser-tab:not([pinned]) { max-width: 101px !important; min-width: 100px !important; }</nowiki></pre>
Capturas de pantalla adjuntas

Modificadas por cor-el el

Solución elegida

Try this code instead: 

.tabbrowser-tab[fadein]:not([pinned]) {
 max-width: 101px !important;
 min-width: 100px !important; 
}


Looks that something went wrong here where you started a comment. Anyway #tabbrowser-tabs is for the full tab bar and not for individual tabs (.tabbrowser-tab), so you can remove this code to avoid confusion 

/*#tabbrowser-tabs{

max-width: 150px !important;}

Leer esta respuesta en su contexto 👍 0

Todas las respuestas (2)

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

Solución elegida

Try this code instead: 

.tabbrowser-tab[fadein]:not([pinned]) {
 max-width: 101px !important;
 min-width: 100px !important; 
}


Looks that something went wrong here where you started a comment. Anyway #tabbrowser-tabs is for the full tab bar and not for individual tabs (.tabbrowser-tab), so you can remove this code to avoid confusion 

/*#tabbrowser-tabs{

max-width: 150px !important;}

carpevis
carpevis Autor de la pregunta
more options

You are my hero, cor-el! Works great! TYVM!