I get spaces in my tab bar when I close tabs or open them from search
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>
Modified by cor-el
Chosen solution
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;}
Read this answer in context 👍 0All Replies (2)
Chosen Solution
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;}
You are my hero, cor-el! Works great! TYVM!