How do I remove the space above the tabs.
I'm running Firefox 59.0 on Windows 10. I'd like to remove the padding above the tabs as I find it a usability issue to not be able to slam my mouse up along the top and click to select a tab. I have to go to the top and move the mouse a hair down to select the tab.
I found this same question asked and answered here: https://support.mozilla.org/en-US/questions/1067518
And here: https://support.mozilla.org/en-US/questions/1013963
So I've created this:
%APPDATA%\Mozilla\chrome\userChrome.css
With this content:
@namespace url("https://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* only needed once */
- TabsToolbar {margin-top:0px!important}
I close and restart Firefox, yet this doens't remove the border. Does that no userChrome.css file longer work in Firefox 59? Changing that margin-top value to various values (such as 200) seems to have no effect.
All Replies (6)
The design of that area doesn't have a space, but sometimes space creeps in after a Windows update last year.
It mostly seems to affect users who have two displays and there is a difference in either (A) resolution or (B) text size/zoom between the two. For example: Clickable area for tabs does not extend to top of application.
Your userChrome.css file is not in the correct location. Please see: https://www.userchrome.org/how-create-userchrome-css.html
Also, you could try a negative margin (which pulls the tab bar upwards by a pixel):
#TabsToolbar {margin-top: -1px !important;}
It is not that difficult to create userChrome.css if you have never used it.
The first step is to open the "Help -> Troubleshooting Information" page and find the button to access the profile folder.
You can find this button under the "Application Basics" section as "Profile Folder -> Open Folder". If you click this button then you open the profile folder in the Windows File Explorer. You need to create a folder with the name chrome in this folder (name is all lowercase). In the chrome folder you need to create a text file with the name userChrome.css (name is case sensitive). In this userChrome.css text file you paste the text posted.
In Windows saving the file is usually the only time things get more complicated because Windows can silently add a .txt file extension and you end up with a file named userChrome.css.txt. To avoid this you need to make sure to select "All files" in the dialog to save the file in the text editor using "Save File as".
Thank you, both of you, for the replies. This is helpful.
I followed these steps, probably incorrectly I suppose, and the userChrome.css is still not taking effect:
C:\Users\****\AppData\Roaming\Mozilla\Firefox\Profiles\idgcjqqh.default\chrome\userChrome.css
That idgcjqqh.default directory is the profile directory that Help > Troubleshooting Information provided me. There is no hidden .txt extension: File Explorer shows its type as "CSS File."
Content:
@namespace url("https://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* only needed once */
#TabsToolbar {margin-top:200px!important}
Note that I've set the margin to 200 pixels and Firefox looks identical to what it looks like without the file. I've also tried 0 and -1.
Can you see what I'm doing wrong?
Modified by cor-el
jscher2000 said
The design of that area doesn't have a space, but sometimes space creeps in after a Windows update last year. It mostly seems to affect users who have two displays and there is a difference in either (A) resolution or (B) text size/zoom between the two. For example: Clickable area for tabs does not extend to top of application.
I do have two displays of different resolutions, so I do fit this profile.
firebush said
@namespace url("https://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* only needed once */
#TabsToolbar {margin-top:200px!important}
I personally do not use the @namespace line, but since toolbars are XUL elements, it shouldn't matter.
If you don't mind, could you try calling up the Browser Toolbox. This is a separate window that makes a remote connection to your running Firefox and lets you poke around in the interface.
https://developer.mozilla.org/docs/Tools/Browser_Toolbox
Two things of interest:
(1) Is Firefox loading your userChrome.css file?
In the "Style Editor" panel of the toolbox, there's a very long list of style files Firefox is loading listed in the left column, unfortunately in non-alphabetical order. I find userChrome.css is usually in the second group if you click a blank area of the scroll bar. If Firefox is not loading your userChrome.css file at all, that's a problem.
(2) Is another rule overriding yours?
Firefox has different style rules for the toolbar area based on resizable vs. maximized vs. fullscreen, with themes and without, and so forth. Although the rule worked on mine, there might be a variation on yours.
If you use the Inspector pane, and drill down into:
<toolbox id="navigator-toolbox" ...
to
<toolbar id="TabsToolbar" ...
and click that, then on the right side, you should see the rules Firefox believes are applicable to that element and which ones are taking effect -- the ones that are overridden have a line through them. Do you see your userChrome.css rule here and is it overridden?
The text you posted shows the https protocol for the @namespace line.
Try the HTTP version:
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* only needed once */