Question

Wo archive tread sia. Meɖekuku bia biabia yeye ne ehia kpeɖeŋu.

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

2 ŋuɖoɖowo
1 masɔmasɔ sia le esi
1 view
Nuɖoɖo mlɔetɔ carpevis

4 ƒe siwo va yi

ŋdi ga 2:12 12/17/19

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>

Screen ƒe photowo kpe ɖe eŋu

cor-el trɔe ŋdi ga 3:08:01 -0800 dzome 17 lia 2019

Ŋuɖoɖo si wotia

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

👍 0

Answer 1 · 2019-12-17 02:12:16

cor-el

Moderator
Top 10 Contributor

ŋdi ga 3:04 12/17/19

Ɖɔɖɔɖo si wotia

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

Answer 2 · 2019-12-17 02:12:16

carpevis Biabia la

ŋdi ga 3:08 12/17/19

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

Search Support

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

Ŋuɖoɖo si wotia

All Replies (2)

Ɖɔɖɔɖo si wotia

Explore by product

Explore by topic

Browse by product

Browse all forum threads by topic

Get help with

Search Support

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

Ŋuɖoɖo si wotia

All Replies (2)

Ɖɔɖɔɖo si wotia