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

How to reduce border of firefox window

  • 3 replies
  • 5 have this problem
  • 66 views
  • Last reply by christaffer

more options

I'm trying to get rid of the blank 'border' above the row of tabs in Firefox 36.0. I'd like each tab to extend all the way to the top of the screen so that when I push my mouse up and the screen restricts the cursor from moving any further, it places the cursor onto one of the tabs. At the moment, this puts the cursor onto this blank border so I then have to move the mouse down slightly to click on the tab. Does that make sense? I imagine there is an easy css line I can add to my Chrome folder, but I'm not smart enough to know what it is. I'm guessing this border is a part of the tab row, otherwise it may be the window border.

Basically, I'd like to get the tab row in Firefox to be more like Chrome, in that it is the height of the red Windows X button (minimal space).

I'm trying to get rid of the blank 'border' above the row of tabs in Firefox 36.0. I'd like each tab to extend all the way to the top of the screen so that when I push my mouse up and the screen restricts the cursor from moving any further, it places the cursor onto one of the tabs. At the moment, this puts the cursor onto this blank border so I then have to move the mouse down slightly to click on the tab. Does that make sense? I imagine there is an easy css line I can add to my Chrome folder, but I'm not smart enough to know what it is. I'm guessing this border is a part of the tab row, otherwise it may be the window border. Basically, I'd like to get the tab row in Firefox to be more like Chrome, in that it is the height of the red Windows X button (minimal space).

Chosen solution

You can try using a negative margin-top value for the #TabsToolbar in the userChrome.css file I'm not on Windows, so can't check what value works.

userChrome.css:

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* only needed once */

#TabsToolbar { margin-top: -2px !important; }

The customization files userChrome.css (user interface) and userContent.css (websites) are located in the chrome folder in the Firefox profile folder.

Read this answer in context 👍 2

All Replies (3)

more options

Chosen Solution

You can try using a negative margin-top value for the #TabsToolbar in the userChrome.css file I'm not on Windows, so can't check what value works.

userChrome.css:

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* only needed once */

#TabsToolbar { margin-top: -2px !important; }

The customization files userChrome.css (user interface) and userContent.css (websites) are located in the chrome folder in the Firefox profile folder.

Modified by cor-el

more options

To add a little more info to cor-el's suggestion, for Windows 7 using a standard Aero theme, this rule is creating the gap:

#main-window[tabsintitlebar][sizemode="normal"]:not([inFullscreen])[chromehidden~="menubar"] #toolbar-menubar ~ #TabsToolbar,
#main-window[tabsintitlebar][sizemode="normal"]:not([inFullscreen]) #toolbar-menubar[autohide="true"][inactive] ~ #TabsToolbar {
  margin-top: 15px;
}

I don't know what margin is used on Windows 8, but perhaps it doesn't matter if you just want to try setting it to 0px or 1px and see what happens.

more options

Thats great, thanks cor-el.

For anyone else, I found a pixel value of 3.5 to be perfect. ie. @namespace url("https://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* only needed once */

#TabsToolbar { margin-top: -3.5px !important; }

Thanks everyone, problem solved.

Modified by christaffer