MozillaZine

FF57 Broke Tab Height <Dead Space> .css Help

User Help for Mozilla Firefox
jetspeedz
 
Posts: 76
Joined: January 4th, 2013, 12:11 am

Post Posted November 14th, 2017, 3:13 pm

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
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
Moderator

User avatar
 
Posts: 19441
Joined: December 7th, 2004, 8:51 pm
Location: Indiana

Post Posted November 15th, 2017, 11:17 am

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

Instead of padding-bottom: -10px, try using margin-bottom.
Give a man a fish, and he eats for a day. Teach a man to fish, and he eats for a lifetime.
I like poetry, long walks on the beach and poking dead things with a stick.
Please do not PM me for personal support. Keep posts here in the Forums instead and we all learn.

therube

User avatar
 
Posts: 18008
Joined: March 10th, 2004, 9:59 pm
Location: Maryland USA

Post Posted November 15th, 2017, 11:55 am

Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US; rv:1.9.1.19) Gecko/20110420 SeaMonkey/2.0.14 Pinball CopyURL+ FetchTextURL FlashGot NoScript

jetspeedz
 
Posts: 76
Joined: January 4th, 2013, 12:11 am

Post Posted November 15th, 2017, 1:27 pm

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
 
Posts: 76
Joined: January 4th, 2013, 12:11 am

Post Posted November 15th, 2017, 1:35 pm

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
Moderator

User avatar
 
Posts: 19441
Joined: December 7th, 2004, 8:51 pm
Location: Indiana

Post Posted November 15th, 2017, 3:08 pm

Post the entirety of your code so I can try it and see what it might be doing.
Give a man a fish, and he eats for a day. Teach a man to fish, and he eats for a lifetime.
I like poetry, long walks on the beach and poking dead things with a stick.
Please do not PM me for personal support. Keep posts here in the Forums instead and we all learn.

jetspeedz
 
Posts: 76
Joined: January 4th, 2013, 12:11 am

Post Posted November 15th, 2017, 3:18 pm

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
Moderator

User avatar
 
Posts: 19441
Joined: December 7th, 2004, 8:51 pm
Location: Indiana

Post Posted November 15th, 2017, 3:44 pm

Try adjusting this part:

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

I switched it to -4px and it didn't look bad.
Give a man a fish, and he eats for a day. Teach a man to fish, and he eats for a lifetime.
I like poetry, long walks on the beach and poking dead things with a stick.
Please do not PM me for personal support. Keep posts here in the Forums instead and we all learn.

jetspeedz
 
Posts: 76
Joined: January 4th, 2013, 12:11 am

Post Posted November 15th, 2017, 3:47 pm

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

User avatar
 
Posts: 19516
Joined: April 23rd, 2004, 6:59 pm
Location: ... The Exorcist....United Kingdom

Post Posted November 15th, 2017, 5:34 pm

jetspeedz wrote: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 wrote: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.
Metal Lion latest SeaMonkey & Thunderbird Themes - Sea Monkey and Silver Sea Monkey
"The only thing necessary for the triumph of evil, is for good men to do nothing." - Edmund Burke (attrib.)

jetspeedz
 
Posts: 76
Joined: January 4th, 2013, 12:11 am

Post Posted November 15th, 2017, 5:37 pm

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

User avatar
 
Posts: 19516
Joined: April 23rd, 2004, 6:59 pm
Location: ... The Exorcist....United Kingdom

Post Posted November 15th, 2017, 6:19 pm

jetspeedz wrote: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;
}
Metal Lion latest SeaMonkey & Thunderbird Themes - Sea Monkey and Silver Sea Monkey
"The only thing necessary for the triumph of evil, is for good men to do nothing." - Edmund Burke (attrib.)

jetspeedz
 
Posts: 76
Joined: January 4th, 2013, 12:11 am

Post Posted November 15th, 2017, 11:16 pm

Frank Lion wrote:
jetspeedz wrote: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

User avatar
 
Posts: 19516
Joined: April 23rd, 2004, 6:59 pm
Location: ... The Exorcist....United Kingdom

Post Posted November 16th, 2017, 4:27 am

jetspeedz wrote: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?
Metal Lion latest SeaMonkey & Thunderbird Themes - Sea Monkey and Silver Sea Monkey
"The only thing necessary for the triumph of evil, is for good men to do nothing." - Edmund Burke (attrib.)

LIMPET235
Moderator

User avatar
 
Posts: 37719
Joined: October 19th, 2007, 1:53 am
Location: The South Coast of N.S.W. Oz.

Post Posted November 16th, 2017, 4:38 am

Moving this to Firefox Support...
Ancient Amateur Astronomer
Win-7-HP/Intel® DualCore-2.0GHz/500G HDD/4 Gig Ram/550Watt PSU/350WattUPS/Firefox-20.0-56.0.1-57.0/T-bird-2.0.0.24/SnagIt-v10.0.1/MWP-7.11.0.
RadioYachting.
(Always choose the "Custom" Install.)

Return to Firefox Support


Who is online

Users browsing this forum: Bing [Bot], Google [Bot], kltpzyxmrm and 11 guests