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, 2:16 pm

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

Post Posted November 14th, 2017, 2:19 pm

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
 
Posts: 15
Joined: April 26th, 2013, 7:59 am

Post Posted November 14th, 2017, 4:34 pm

Hi jetspeedz :) Nice CSS 8-)

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

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

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... :D

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

Post Posted November 14th, 2017, 10:41 pm

Blacklab wrote:Hi jetspeedz :) Nice CSS 8-)

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

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

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... :D



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
 
Posts: 6
Joined: November 15th, 2017, 1:27 pm

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

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
 
Posts: 6
Joined: November 15th, 2017, 1:27 pm

Post Posted November 17th, 2017, 6:01 pm

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

Post Posted November 17th, 2017, 8:49 pm

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

JonnyOne
 
Posts: 6
Joined: November 15th, 2017, 1:27 pm

Post Posted November 17th, 2017, 9:05 pm

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

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

Post Posted November 19th, 2017, 10:55 am

Do you have an empty Bookmarks Toolbar in there, & that is what you are seeing?
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 20th, 2017, 9:39 am

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

Post Posted November 20th, 2017, 10:37 am

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

Please review: viewtopic.php?f=38&t=3035185&p=14778565#p14778565

Close this thread.

Return to Firefox Support


Who is online

Users browsing this forum: Google [Bot], Mcd73165 and 19 guests