Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

My Tabs Bar has changed height

  • 15 replies
  • 1 has this problem
  • 10 views
  • Last reply by NigelUK

more options

Hi - firstly, I hope I've not abused Forum etiquette by posting all the code below!

I upgraded to 47.0 today & the settings I had via a mix of "Classic Toolbar Buttons" & Stylish code don't work as they did before.

I don't have the F'fox window maximized & as seen on the attached pic (PNG, 6.9KB, which has said "Uploading" for 20 mins, so I guess it might not be here when I submit), the tabs are now *not* touching the top of the screen as they were before. I don't "code" myself, but have tried adjusting the values in the code to no avail.

Also the Min, Max & Exit buttons' "clickable fields" are off-centre, moved to the left & the 'X' shifts slightly down & left when I hover on it.

I think some of the code might be redundant but don't know what to remove &/or change, all I know is that it was ok before the update. Assuming I'm asking in the right place, can anyone please advise me how to fix this or where to go/who to ask if not.

The code I have is as follows -


/* Tabs to top of browser window when not maximized */ #TabsToolbar { margin-top: 0px !important; margin-bottom: 1px !important; } /* New Dimensions */ #TabsToolbar { min-height: 24px!important } .tab-background-start[selected=true]::after, .tab-background-start[selected=true]::before, .tab-background-start, .tab-background-end, .tab-background-end[selected=true]::after, .tab-background-end[selected=true]::before, .tabbrowser-tabs{ min-height: 24px!important } #nav-bar .toolbarbutton-1:not([type=menu-button]), #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button, #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker { padding-top: 0px!important; padding-bottom: 0px!important } #back-button > .toolbarbutton-icon, #forward-button > .toolbarbutton-icon { padding: 3px 6px !important; } #back-button > .toolbarbutton-icon { border-radius: 0 !important; -moz-image-region: rect(0, 54px, 18px, 36px); } #forward-button[disabled] { visibility: hidden !important; } #urlbar-wrapper { clip-path: none !important; -moz-margin-start: 0px !important; } /* Toolbar Dimensions */ #TabBrowser-tabs { height: 15px !important; margin-top: -5px !important; margin-bottom: -5px !important } #TabsToolbar { height: 15px !important; margin-top: 0px !important; margin-bottom: -2px !important } #BookmarksToolbar { height: 15px !important; margin-top: 0px !important; margin-bottom: -5px !important } #PersonalToolbar { height: 15px !important; margin-top: 0px !important; margin-bottom: 0px !important } #MenuToolbar { height: 15px !important; margin-top: 0px !important; margin-bottom: 0px !important } #navigator-toolbox #nav-bar .toolbarbutton-1:not(:-moz-any(#back-button, #forward-button)){ margin-top: -5px !important; margin-bottom: -5px !important} #urlbar { height: 10px !important; margin-top: 0.5px !important; margin-bottom: 0px !important } #personal-bookmarks { min-height: 10px; } /* Overlaid Buttons */ /* #titlebar-buttonbox .titlebar-button .toolbarbutton-icon{ display: none !important; } */ /* AskVG Buttons Code */ #main-window[windowtype="navigator:browser"] { background-color: transparent !important; } .titlebar-button { background-color: transparent !important; transition: background-color 0.2s ease; } .titlebar-button > .toolbarbutton-icon { list-style-image: none; } .titlebar-button:hover { background-color: rgba(0, 0, 0, 0.15) !important; } #titlebar-close:hover { background-color: #E81123 !important; } #titlebar-close:hover > .toolbarbutton-icon { list-style-image: url("chrome://browser/skin/caption-buttons.svg#close-white") !important; } /* Tri-Button Box Fix Attempt */ /* #main-window { background-color: transparent !important; } #titlebar-buttonbox .titlebar-button { background-color: transparent !important; } #titlebar-buttonbox #titlebar-min:-moz-any(:hover,[open]), #titlebar-buttonbox #titlebar-max:-moz-any(:hover,[open]) { background-color: hsla(210,4%,10%,.08) !important; } #titlebar-buttonbox #titlebar-close:-moz-any(:hover,[open]) { background-color: hsla(360,100%,50%,.4) !important; } */


Thanks for taking the time to look at this.

Addition - hopefully edited correctly as suggested - sorry, I didn't know!

Hi - firstly, I hope I've not abused Forum etiquette by posting all the code below! I upgraded to 47.0 today & the settings I had via a mix of "Classic Toolbar Buttons" & Stylish code don't work as they did before. I don't have the F'fox window maximized & as seen on the attached pic (PNG, 6.9KB, which has said "Uploading" for 20 mins, so I guess it might not be here when I submit), the tabs are now *not* touching the top of the screen as they were before. I don't "code" myself, but have tried adjusting the values in the code to no avail. Also the Min, Max & Exit buttons' "clickable fields" are off-centre, moved to the left & the 'X' shifts slightly down & left when I hover on it. I think some of the code might be redundant but don't know what to remove &/or change, all I know is that it was ok before the update. Assuming I'm asking in the right place, can anyone please advise me how to fix this or where to go/who to ask if not. The code I have is as follows - ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- <nowiki> /* Tabs to top of browser window when not maximized */ #TabsToolbar { margin-top: 0px !important; margin-bottom: 1px !important; } /* New Dimensions */ #TabsToolbar { min-height: 24px!important } .tab-background-start[selected=true]::after, .tab-background-start[selected=true]::before, .tab-background-start, .tab-background-end, .tab-background-end[selected=true]::after, .tab-background-end[selected=true]::before, .tabbrowser-tabs{ min-height: 24px!important } #nav-bar .toolbarbutton-1:not([type=menu-button]), #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button, #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker { padding-top: 0px!important; padding-bottom: 0px!important } #back-button > .toolbarbutton-icon, #forward-button > .toolbarbutton-icon { padding: 3px 6px !important; } #back-button > .toolbarbutton-icon { border-radius: 0 !important; -moz-image-region: rect(0, 54px, 18px, 36px); } #forward-button[disabled] { visibility: hidden !important; } #urlbar-wrapper { clip-path: none !important; -moz-margin-start: 0px !important; } /* Toolbar Dimensions */ #TabBrowser-tabs { height: 15px !important; margin-top: -5px !important; margin-bottom: -5px !important } #TabsToolbar { height: 15px !important; margin-top: 0px !important; margin-bottom: -2px !important } #BookmarksToolbar { height: 15px !important; margin-top: 0px !important; margin-bottom: -5px !important } #PersonalToolbar { height: 15px !important; margin-top: 0px !important; margin-bottom: 0px !important } #MenuToolbar { height: 15px !important; margin-top: 0px !important; margin-bottom: 0px !important } #navigator-toolbox #nav-bar .toolbarbutton-1:not(:-moz-any(#back-button, #forward-button)){ margin-top: -5px !important; margin-bottom: -5px !important} #urlbar { height: 10px !important; margin-top: 0.5px !important; margin-bottom: 0px !important } #personal-bookmarks { min-height: 10px; } /* Overlaid Buttons */ /* #titlebar-buttonbox .titlebar-button .toolbarbutton-icon{ display: none !important; } */ /* AskVG Buttons Code */ #main-window[windowtype="navigator:browser"] { background-color: transparent !important; } .titlebar-button { background-color: transparent !important; transition: background-color 0.2s ease; } .titlebar-button > .toolbarbutton-icon { list-style-image: none; } .titlebar-button:hover { background-color: rgba(0, 0, 0, 0.15) !important; } #titlebar-close:hover { background-color: #E81123 !important; } #titlebar-close:hover > .toolbarbutton-icon { list-style-image: url("chrome://browser/skin/caption-buttons.svg#close-white") !important; } /* Tri-Button Box Fix Attempt */ /* #main-window { background-color: transparent !important; } #titlebar-buttonbox .titlebar-button { background-color: transparent !important; } #titlebar-buttonbox #titlebar-min:-moz-any(:hover,[open]), #titlebar-buttonbox #titlebar-max:-moz-any(:hover,[open]) { background-color: hsla(210,4%,10%,.08) !important; } #titlebar-buttonbox #titlebar-close:-moz-any(:hover,[open]) { background-color: hsla(360,100%,50%,.4) !important; } */ </nowiki> ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ Thanks for taking the time to look at this. Addition - hopefully edited correctly as suggested - sorry, I didn't know!

Modified by NigelUK

All Replies (15)

more options

I've hopefully managed to add the pic now...

more options

Can you still edit your original question? To prevent the forum turning IDs into numbered items, type or paste <nowiki> before and </nowiki> after your style rules.

more options

Have I done that correctly, jscher2000?

more options

I'm not sure why, but the line breaks got lost now. Here's what I get if I "quote" your question but remove the blockquote tags:

/* Tabs to top of browser window when not maximized */ #TabsToolbar { margin-top: 0px !important; margin-bottom: 1px !important; } /* New Dimensions */ #TabsToolbar { min-height: 24px!important } .tab-background-start[selected=true]::after, .tab-background-start[selected=true]::before, .tab-background-start, .tab-background-end, .tab-background-end[selected=true]::after, .tab-background-end[selected=true]::before, .tabbrowser-tabs{ min-height: 24px!important } #nav-bar .toolbarbutton-1:not([type=menu-button]), #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button, #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker { padding-top: 0px!important; padding-bottom: 0px!important } #back-button > .toolbarbutton-icon, #forward-button > .toolbarbutton-icon { padding: 3px 6px !important; } #back-button > .toolbarbutton-icon { border-radius: 0 !important; -moz-image-region: rect(0, 54px, 18px, 36px); } #forward-button[disabled] { visibility: hidden !important; } #urlbar-wrapper { clip-path: none !important; -moz-margin-start: 0px !important; } /* Toolbar Dimensions */ #TabBrowser-tabs { height: 15px !important; margin-top: -5px !important; margin-bottom: -5px !important } #TabsToolbar { height: 15px !important; margin-top: 0px !important; margin-bottom: -2px !important } #BookmarksToolbar { height: 15px !important; margin-top: 0px !important; margin-bottom: -5px !important } #PersonalToolbar { height: 15px !important; margin-top: 0px !important; margin-bottom: 0px !important } #MenuToolbar { height: 15px !important; margin-top: 0px !important; margin-bottom: 0px !important } #navigator-toolbox #nav-bar .toolbarbutton-1:not(:-moz-any(#back-button, #forward-button)){ margin-top: -5px !important; margin-bottom: -5px !important} #urlbar { height: 10px !important; margin-top: 0.5px !important; margin-bottom: 0px !important } #personal-bookmarks { min-height: 10px; } /* Overlaid Buttons */ /* #titlebar-buttonbox .titlebar-button .toolbarbutton-icon{ display: none !important; } */ /* AskVG Buttons Code */ #main-window[windowtype="navigator:browser"] { background-color: transparent !important; } .titlebar-button { background-color: transparent !important; transition: background-color 0.2s ease; } .titlebar-button > .toolbarbutton-icon { list-style-image: none; } .titlebar-button:hover { background-color: rgba(0, 0, 0, 0.15) !important; } #titlebar-close:hover { background-color: #E81123 !important; } #titlebar-close:hover > .toolbarbutton-icon { list-style-image: url("chrome://browser/skin/caption-buttons.svg#close-white") !important; } /* Tri-Button Box Fix Attempt */ /* #main-window { background-color: transparent !important; } #titlebar-buttonbox .titlebar-button { background-color: transparent !important; } #titlebar-buttonbox #titlebar-min:-moz-any(:hover,[open]), #titlebar-buttonbox #titlebar-max:-moz-any(:hover,[open]) { background-color: hsla(210,4%,10%,.08) !important; } #titlebar-buttonbox #titlebar-close:-moz-any(:hover,[open]) { background-color: hsla(360,100%,50%,.4) !important; } */

more options

That looks how it did to me when I posted at first - I'm sorry to muck you about, I'm not au fait with the tricks you guys know.

I really appreciate that you've even taken the time to look my post over :-)

more options

Hi again - for no reason other than trying something for the sake of it, I opened Waterfox & the Tab Bar is back to the size I want (pic attached), thus giving me that space back at the bottom of the screen.

The Min, Max & Exit buttons are as described in my OP.

Does this info help at all?

more options

Your code works on Windows 7 for me in Firefox 47, although I did get some selector errors when I clicked Preview (attached). I might be able to put hands on Windows 10 after hours.

The selector errors went away when I copied/pasted differently.

Modified by jscher2000 - Support Volunteer

more options

Apologies, this is the first chance I've had to get back here.

jscher - does that mean I have to redo the code as you have shown, ie without spaces? I don't know how to get the colours - or are they automatic? I'm sorry, I promise I'm not being deliberately obtuse but this is really outside my ability to do, as evidenced by my not even knowing what "selector errors" are.

more options

You definitely do not need to delete the spaces. This seems to be a theme difference between Windows 7 (screen shot earlier) and Windows 10 (screen shots attached).

(I use a user style to add shape to the background tabs, but otherwise, this is default stuff.)

There seems to be about an 8 pixel space for the title bar even when you don't display it. If you never intend to display it, it is simplest to completely hide it. This may prevent Windows from showing NOT RESPONDING messages there, but I suppose you can tell when Firefox is not responding...

#titlebar {display:none !important;}

See the third screenshot.

more options

Uh-oh, that blocks the title bar buttons and maximized windows don't have enough headroom for the tabs. I'm out of time to experiment, sorry.

more options

Thank you for your efforts, jscher, much appreciated.

I'll keep popping back here in the hope that you or someone else has a fix & in the meantime will try to learn something about this coding, but I fear my brain isn't built for it :-)

more options

The min-height rules seemed to be squashing the tabs. I think this might work better, although not quite what you had before:

@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul); /* Tabs to top of browser window when not maximized */ #main-window[sizemode="normal"] #navigator-toolbox { margin-top: -4px !important; } /* Tab bar */ #TabsToolbar { height: 15px !important; margin-top: -5px !important; margin-bottom: -1px !important; } #tabbrowser-tabs { height: 15px !important; } /* Nav Bar */ #nav-bar .toolbarbutton-1:not([type=menu-button]), #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button, #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker { padding-top: 0px!important; padding-bottom: 0px!important } #navigator-toolbox #nav-bar .toolbarbutton-1:not(:-moz-any(#back-button, #forward-button)){ margin-top: -5px !important; margin-bottom: -5px !important } #back-button > .toolbarbutton-icon, #forward-button > .toolbarbutton-icon { padding: 3px 6px !important; } #back-button > .toolbarbutton-icon { border-radius: 0 !important; -moz-image-region: rect(0, 54px, 18px, 36px); } #forward-button[disabled] { visibility: hidden !important; } #urlbar-wrapper { clip-path: none !important; -moz-margin-start: 0px !important; } #urlbar { height: 10px !important; margin-top: 0.5px !important; margin-bottom: 0px !important; } /* Bookmarks Toolbar */ #PersonalToolbar { height: 15px !important; margin-top: 0px !important; margin-bottom: 0px !important } #personal-bookmarks { min-height: 10px; } /* AskVG Buttons Code */ #main-window[windowtype="navigator:browser"] { background-color: transparent !important; } .titlebar-button { background-color: transparent !important; transition: background-color 0.2s ease; } .titlebar-button > .toolbarbutton-icon { list-style-image: none; } .titlebar-button:hover { background-color: rgba(0, 0, 0, 0.15) !important; } #titlebar-close:hover { background-color: #E81123 !important; } #titlebar-close:hover > .toolbarbutton-icon { list-style-image: url("chrome://browser/skin/caption-buttons.svg#close-white") !important; }

more options

jscher, you're a genius! But (isn't there always one?)... the attached pics are, in order -

1 - open with oldcode only 2 - add newcode to oldcode - perfect! 3 - both enabled, shutdown, reopen 4 - after 2, oldcode disabled 5 - after 4, oldcode re-enabled 6 - open F'fox newcode only 7 - after 6, oldcode enabled

In essence, your code ONLY works if I disable it BEFORE closing then re-enable it AFTER opening again. I can live with that but it does seem odd to my mind that it only works in that order.

Once again, my sincere thanks for your hard work :-)

PS. I have oldcode & newcode as 2 separate User Style add-ons as I didn't think lumping yours on the end would be the right thing to do - was that correct?

Modified by NigelUK

more options

Perhaps it has something to do with the order in which the rules are applied?? I took out the min-height:24px which is related to the tab height being squashed somehow. If you actually wanted that effect, you could try to reintegrate that part and see whether it works as one rule.

more options

Apologies for the late replies to your posts, jscher - that last is a good idea & I'll have a try at the order of the rules as soon as I get a chance - probably Monday now.