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;}
FF57 Broke Tab Height <Dead Space> .css Help
-
- Posts: 200
- Joined: January 4th, 2013, 12:11 am
-
- Posts: 200
- Joined: January 4th, 2013, 12:11 am
Re: FF57 Broke Tab Height <Dead Space> .css Help
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;}
@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;}
-
- Posts: 15
- Joined: April 26th, 2013, 7:59 am
Re: FF57 Broke Tab Height <Dead Space> .css Help
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...
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...
-
- Posts: 200
- Joined: January 4th, 2013, 12:11 am
Re: FF57 Broke Tab Height <Dead Space> .css Help
Blacklab wrote: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
-
- Posts: 7
- Joined: November 15th, 2017, 1:27 pm
Re: FF57 Broke Tab Height <Dead Space> .css Help
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;}
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;}
-
- Posts: 7
- Joined: November 15th, 2017, 1:27 pm
Re: FF57 Broke Tab Height <Dead Space> .css Help
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
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
-
- Posts: 200
- Joined: January 4th, 2013, 12:11 am
Re: FF57 Broke Tab Height <Dead Space> .css Help
So the issue i posted is still not resolved. nice effort but no dice
-
- Posts: 7
- Joined: November 15th, 2017, 1:27 pm
Re: FF57 Broke Tab Height <Dead Space> .css Help
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 behaviourjetspeedz wrote:So the issue i posted is still not resolved. nice effort but no dice
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
- Posts: 21714
- Joined: March 10th, 2004, 9:59 pm
- Location: Maryland USA
Re: FF57 Broke Tab Height <Dead Space> .css Help
Do you have an empty Bookmarks Toolbar in there, & that is what you are seeing?
Fire 750, bring back 250.
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
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
-
- Posts: 200
- Joined: January 4th, 2013, 12:11 am
Re: FF57 Broke Tab Height <Dead Space> .css Help
No I don't, i believe Frank tried the code and it made no difference eithertherube wrote:Do you have an empty Bookmarks Toolbar in there, & that is what you are seeing?
-
- Posts: 200
- Joined: January 4th, 2013, 12:11 am
Re: FF57 Broke Tab Height <Dead Space> .css Help
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.
Please review: http://forums.mozillazine.org/viewtopic ... #p14778565
Close this thread.