FF57 Broke Tab Height <Dead Space> .css Help

[jetspeedz]

Not much support on support page so posting in this forum:

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.

Image


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

[smsmith]

Unfortunately, I cannot see your images. Might be blocked on my end.

Instead of padding-bottom: -10px, try using margin-bottom.

[therube]

https://i.imgur.com/jVwt7Fh.png

DUPLICATE -> http://forums.mozillazine.org/viewtopic ... &t=3035176

[jetspeedz]

I tried that but it made no difference unfortunately.

It's really disappointing the standard CSS arguments is no longer supported on FF57. Hopefully there is a smoking gun but I've had no luck with this. I went back to FF56 for now.

https://i.imgur.com/jVwt7Fh.png

[jetspeedz]

This is driving me nuts, I just went back to FF57 to try one more trick and no luck. That dead space is just sitting there under the tabs taunting me lol

Any other suggestions?

[smsmith]

Post the entirety of your code so I can try it and see what it might be doing.

[jetspeedz]

Thanks for your help, this is the original which has worked since FF57. Only issue is the dead space under the tab. It is a really clean and compact look.

Code: Select all

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

[smsmith]

Try adjusting this part:

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

I switched it to -4px and it didn't look bad.

[jetspeedz]

I already played with that, it just moves the text further down into the dead space. I want to get rid of the dead space like FF56 and prior. I don't understand why the standard CSS arguments don't work for the tabs as one would expect.

[Frank Lion]

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

It's really disappointing the standard CSS arguments is no longer supported on FF57. Hopefully there is a smoking gun but I've had no luck with this. I went back to FF56 for now.

Yeah? Since when was a negative padding value ever a standard CSS argument? Never.

The .css and userChrome.css in Firefox 57 works fine and I can reduce the height to 5px, if needed.

You probably have something holding up the height of the #TabsToolbar and as you move the tab content around you're left with your 'dead space'.

Whatever the problem is, it's not Firefox 57.

[jetspeedz]

Frank,

The entire code is posted, tell me what you changed to get rid of the dead space? In terms of negative values, I was simply pointing out I've tried every scenario possible even non conventional changes which does not work. This exact code work on FF56 and Prior with no issues. If you are telling me its not FF57 than what is it?

Code: Select all

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

[Frank Lion]

Frank,

The entire code is posted, tell me what you changed to get rid of the dead space? In terms of negative values, I was simply pointing out I've tried every scenario possible even non conventional changes which does not work. This exact code work on FF56 and Prior with no issues. If you are telling me its not FF57 than what is it?

Something at your end that you've missed somewhere. Even the code you just posted should get a result. Not how I would write it and you don't need that neg margin at all, but glancing at it, it should work. Btw, don't truncate your namespace line.

Go into Customise and make 100% sure you have no toolbarbuttons, etc. sitting on that tabstoolbar - you've got something holding that tab height up. Check out general toolbar rules as well. Then comment out all tab references and look it afresh again tomorrow and you'll fix it. After more than a 2/3 hour session at this game you get brainfade and just can't see what's in front of you. Fresh start sorts it.

Just know that there's nothing wrong with 57 - that sort of doubt can nag at you when you're coding and stop you thinking sharply. Honestly, it'll turn out to be something really minor at play here.

Edit - that dead space looks wrong to me and that toolbar should flex even with buttons on it. I reckon it could be the original toolbar height not being overridden anywhere. Try -

Code: Select all

#TabsToolbar { 
-moz-appearance: none !important;
	height: 20px !important;
}

[jetspeedz]

Frank,

The entire code is posted, tell me what you changed to get rid of the dead space? In terms of negative values, I was simply pointing out I've tried every scenario possible even non conventional changes which does not work. This exact code work on FF56 and Prior with no issues. If you are telling me its not FF57 than what is it?

Something at your end that you've missed somewhere. Even the code you just posted should get a result. Not how I would write it and you don't need that neg margin at all, but glancing at it, it should work. Btw, don't truncate your namespace line.

Go into Customise and make 100% sure you have no toolbarbuttons, etc. sitting on that tabstoolbar - you've got something holding that tab height up. Check out general toolbar rules as well. Then comment out all tab references and look it afresh again tomorrow and you'll fix it. After more than a 2/3 hour session at this game you get brainfade and just can't see what's in front of you. Fresh start sorts it.

Just know that there's nothing wrong with 57 - that sort of doubt can nag at you when you're coding and stop you thinking sharply. Honestly, it'll turn out to be something really minor at play here.

Edit - that dead space looks wrong to me and that toolbar should flex even with buttons on it. I reckon it could be the original toolbar height not being overridden anywhere. Try -

Code: Select all

#TabsToolbar { 
-moz-appearance: none !important;
	height: 20px !important;
}

Frank i gave this a shot just now and it made no difference. It boggles my mind what it could be. Honestly I'm at a loss. If you can't figure it out i doubt anyone else can.

[Frank Lion]

Frank i gave this a shot just now and it made no difference. It boggles my mind what it could be. Honestly I'm at a loss. If you can't figure it out i doubt anyone else can.

Don't worry about it, have another crack at it with a fresh userChrome.css. I'll take a look at it tonight (about 12 hours from now) and I guarantee I can code small tabs there.

Now, I don't use max-heights on tabs because I want them to flex on large fonts. But, experiment is how you fix stuff and you fine tune from there. For example, your -

Code: Select all

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

Why we not trying a max height there and elsewhere?

[LIMPET235]

Moving this to Firefox Support...