Question

Αυτό το νήμα αρχειοθετήθηκε. Παρακαλούμε κάντε νέα ερώτηση αν χρειάζεστε βοήθεια.

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

2 απαντήσεις
1 έχει αυτό το πρόβλημα
29 προβολές
Τελευταία απάντηση από carpevis

5 έτη πριν

17/12/19, 2: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>

Συνημμένα στιγμιότυπα

Τροποποιήθηκε στις 17 Δεκεμβρίου 2019 - 3:08:01 π.μ. -0800 από τον/την cor-el

Επιλεγμένη λύση

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, 3:04 π.μ.

Επιλεγμένη λύση

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 Ιδιοκτήτης ερώτησης

17/12/19, 3:08 π.μ.

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

Αναζήτηση στην υποστήριξη

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

Επιλεγμένη λύση

Όλες οι απαντήσεις (2)

Επιλεγμένη λύση

Εξερεύνηση ανά προϊόν

Εξερεύνηση ανά θέμα

Περιήγηση κατά προϊόν

Περιήγηση σε όλα τα νήματα του φόρουμ ανά θέμα

Λάβετε βοήθεια για

Αναζήτηση στην υποστήριξη

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

Επιλεγμένη λύση

Όλες οι απαντήσεις (2)

Επιλεγμένη λύση