Question

This thread was archived. Əgər kömək lazımdırsa lütfən yeni sual verin.

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

2 cavab
1 has this problem
29 views
Last reply by carpevis

5 years ago

17.12.19 02:12

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>

Attached screenshots

Modified 17 dekabr 2019 03:08:01 -0800 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;}

👍 0

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

cor-el

Moderator
Top 10 Contributor

17.12.19 03:04

Seçilmiş Həll

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 Question owner

17.12.19 03:08

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

Chosen solution

All Replies (2)

Seçilmiş Həll

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

Chosen solution

All Replies (2)

Seçilmiş Həll