FF57 Broke Tab Height <Dead Space> .css Help

[jetspeedz]

FF57 is great with one exception. No matter what parameter I change in the CSS tab height, I can't get rid of this extra Dead space which did not exist on FF56 or lower rev.


https://imgur.com/jVwt7Fh

I do not want to install any add-ons, I would like this to be fixed in the CSS if possible. Any help is appreciated.

Ive played with the .CSS and nothing affects this blank space, even negative values do not affect the height.

This is the original I've been using for 10 years
#tabbrowser-tabs {
min-height: 18px !important;
height: 18px !important;}

The above did not work so I played around with below and other variations and nothing seems to work:
#tabbrowser-tabs {
height: 5px !important;
max-height: 5px !important;
padding-top: 0px !important;
padding-bottom: -10px !important;}

[jetspeedz]

For anyone who wants to duplicate my compact and clean setup here is the entire code.

@namespace url(http://www.mozilla.org/keymaster/gateke ... s.only.xul);
#TabsToolbar { margin-top: 0px !important;
margin-left: -15px !important;
margin-right: -20px !important; }

#context-inspect,
#inspect-separator
{display: none !important; }

tab .tab-close-button
{display: none !important;}

tab:hover .tab-close-button
{display: -moz-box !important;}

tab:not([selected="true"]) {
background-color: rgb(245,245,245) !important;
color: rgb(105,105,105) !important;}

tab[selected="true"] {
font-weight: bold !important;
background-color: black !important;
color: white !important;}

toolbarbutton {
padding-top: 0px !important;
padding-bottom: 0px !important;}

#toolbar-menubar {
min-height: 17px !important;
max-height: 17px !important;}

#TabsToolbar{-moz-box-ordinal-group:90000!important}
.tab-background {
opacity: 0!important;}

#tabbrowser-tabs {
min-height: 18px !important;
height: 18px !important;}

.tab-content {
margin-top: -14px !important;}

.tabbrowser-tab {
border-top: 1px #F0F0F0 solid !important;
border-radius: 0px !important ;
background: #CECECE !important;}

.tabs-newtab-button {
display: -moz-box !important;
visibility: visible !important;
margin-top: -14px !important;
background: unset!important;}

.tabbrowser-tab:not([selected]):hover {
text-decoration: underline !important;}

#PanelUI-button {
display: none !important;}

#urlbar .autocomplete-textbox-container,
#urlbar > .autocomplete-textbox-container {
-moz-box-ordinal-group: 2 !important;
}

#urlbar .autocomplete-history-dropmarker,
#urlbar > .autocomplete-history-dropmarker {
-moz-box-ordinal-group: 3 !important;
}

#urlbar-reload-button,
#urlbar-stop-button,
#urlbar-go-button {
-moz-margin-start: 8px !important;
transform: scale(1.2, 1.2) !important;
}
#notification-popup-box {
-moz-box-ordinal-group: 3 !important;
-moz-margin-start: -2px !important;
-moz-margin-end: 2px !important;}

[Blacklab]

Hi jetspeedz Nice CSS

I run a ragtag mix of Add-ons + Stylish scripts + ChromEdit CSS + direct CSS... but it works for me... until today of course!

Regret can't answer your query yet... but I'd start looking in two places ... assuming a good selection of search queries come up with nowt?

1. Download Aris' huge collection of FF57 CSS from GitHub: https://github.com/Aris-t2/CustomCSSforFx - he has a walk-through but some more explanations on Ghacks: https://www.ghacks.net/2017/11/13/custo ... -with-css/

2. Try old favourite 'how the hell does this CSS work?/what has placeholder changed to now?' option... paste 'chrome://browser/skin/browser.css' into a new tab and start scrolling down to find out how the new skin CSS in FF57 is laid out... lots and lots of scrolling...

[jetspeedz]

Hi jetspeedz Nice CSS

I run a ragtag mix of Add-ons + Stylish scripts + ChromEdit CSS + direct CSS... but it works for me... until today of course!

Regret can't answer your query yet... but I'd start looking in two places ... assuming a good selection of search queries come up with nowt?

1. Download Aris' huge collection of FF57 CSS from GitHub: https://github.com/Aris-t2/CustomCSSforFx - he has a walk-through but some more explanations on Ghacks: https://www.ghacks.net/2017/11/13/custo ... -with-css/

2. Try old favourite 'how the hell does this CSS work?/what has placeholder changed to now?' option... paste 'chrome://browser/skin/browser.css' into a new tab and start scrolling down to find out how the new skin CSS in FF57 is laid out... lots and lots of scrolling...

Thanks I can't take credit for all of it. I modified the hell out of it to make it as compact and slick as possible.

I looked at the links you provided and I don't think I have an issue with syntax or the argument calls, I just think that dead space below the tab is something else not controlled within CSS. Unfortunately I don't like loading up FF with too many add-ons to avoid slowing down the browser and sucking up memory which FF is really good at doing.

I was hoping there was a magic bullet that I missed but it sounds like as an expert yourself nothing jumps out at you so likely someone smarter than myself might have a solution. I'll keep tinkering with it but every logical argument under tabbrowser-tabs I've changed and it did not remove the dead space.

thanks for your help

[JonnyOne]

Hello to all the community, i'm trying to find a fix for the last mozilla "broking-something-on-every-release" politic.
In Firefox 56 i was using a css for making more smaller tabs in height.
The css have in syntax:
.tabbrowser-tabs {min-height: 23px !important;}

I have tryed:
tab {max-height: 23px !important;}

The tab is more tighter, but i have a extra margin on bottom between tabs and toolbar.

someone know how to fix this on Firefox 57?

P.s.: if someone find useful, i share a code for the toolbar:
#nav-bar-customization-target > toolbaritem textbox {margin: 0 !important;}

[JonnyOne]

I have found a fix!
Many thanks to a user (Poonkraft) on this github page: https://github.com/Aris-t2/CustomCSSforFx
I have slightly reduced the code that Poonkraft suggested me, to make it essential.
Here it is what i am using:

#tabbrowser-tabs, #tabbrowser-tabs > .tabbrowser-arrowscrollbox {min-height: 23px !important;}
.tabs-newtab-button .toolbarbutton-icon {width: 16px !important; height: 16px !important; padding: 1px !important;}

the only "bug" that i have found is that when there are many tabs opened, and the arrowscroll appear, the tabs slightly grow in size, but they returns on custom size when you close some tabs (and the arrowscroll disappear)

edit: ultimate fix. needs also to set the "max-heigth":
#tabbrowser-tabs, #tabbrowser-tabs > .tabbrowser-arrowscrollbox {min-height: 23px !important; max-height: 23px !important;}

edit 2:
sadly i discovered that adding "max-height" as above, when i drag left/right any tab, the tab bar completely mess up

[jetspeedz]

So the issue i posted is still not resolved. nice effort but no dice

[JonnyOne]

So the issue i posted is still not resolved. nice effort but no dice

for my flavours, i'm fine with the two strings i have posted, but i will be more satisfied if i can fix the arrowscroll behaviour

edit: ok i have finally found the right code to strip down the height of the tabs without any bug. here it is
#TabsToolbar > toolbarpaletteitem, #TabsToolbar > toolbarbutton {margin: unset !important;}
#TabsToolbar > toolbarpaletteitem .toolbarbutton-icon, #TabsToolbar > toolbarbutton .toolbarbutton-icon {height: 23px !important;}
#tabbrowser-tabs, #tabbrowser-tabs > .tabbrowser-arrowscrollbox {min-height: 23px !important;}
.tabs-newtab-button .toolbarbutton-icon {width: 16px !important; height: 16px !important; padding: 1px !important;}

if someone as me needs also to reduce the toolbar height, here it is the code:
#nav-bar-customization-target > toolbaritem textbox {margin: 0 !important;}

[therube]

Do you have an empty Bookmarks Toolbar in there, & that is what you are seeing?

[jetspeedz]

Do you have an empty Bookmarks Toolbar in there, & that is what you are seeing?

No I don't, i believe Frank tried the code and it made no difference either

[jetspeedz]

Frank was generous enough to fix this problem in the other thread. Please close or delete this thread.

Please review: http://forums.mozillazine.org/viewtopic ... #p14778565

Close this thread.