This site will have limited functionality while we undergo maintenance to improve your experience. If an article doesn't solve your issue and you want to ask a question, we have our support community waiting to help you at @FirefoxSupport on Twitter and/r/firefox on Reddit.

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

[SOLVED] How can I increase the height of tabs?

  • 8 replies
  • 3 have this problem
  • 61 views
  • Last reply by ender21

more options

I was using a theme which increased the height of tabs. Unfortunately, the theme conflicted with tab menu setting using the TabMixPlus extension. I am stuck with the default theme or others which do not increase the tab height. I have tried a variety of codes in userChrome.css to no avail. I am presently using the default theme with Firefox 20.0.1 (a Linux operating system).

I was using a theme which increased the height of tabs. Unfortunately, the theme conflicted with tab menu setting using the TabMixPlus extension. I am stuck with the default theme or others which do not increase the tab height. I have tried a variety of codes in userChrome.css to no avail. I am presently using the default theme with Firefox 20.0.1 (a Linux operating system).

Modified by ender21

Chosen solution

You should be able to do this via this code in userChrome.css

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

#TabsToolbar { height: 35px !important; }

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

Read this answer in context 👍 2

All Replies (8)

more options

Chosen Solution

You should be able to do this via this code in userChrome.css

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

#TabsToolbar { height: 35px !important; }

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

more options

Thank you. I have had a userChrome.css file for several years. The name-space line is correct. 35px seemed to make no difference so I kept increasing it and now it reads:

/* height of tab bar */

  1. TabsToolbar { height: 100px; }

There is no difference in height. Could something be interfering with the code?

Modified by ender21

more options

Did you try to use the !important; flag?

#TabsToolbar { height: 100px !important; }

That flag is necessary to override a current height setting for the tab bar.


Start Firefox in Safe Mode to check if one of the extensions (Firefox/Tools > Add-ons > Extensions) or if hardware acceleration is causing the problem (switch to the DEFAULT theme: Firefox/Tools > Add-ons > Appearance).

  • Do NOT click the Reset button on the Safe Mode start window or otherwise make changes.
more options

It took me an hour but I found a way to increase the height of the tabs without the need to increase the font size. You can also increase the font size of the tabs without increasing other font sizes.

Open "C:\Users\[USERNAME]\AppData\Roaming\Mozilla\Firefox\Profiles\[RANDOM STRING].default" and create a new folder called "Chrome", next open Notepad and paste the following code into it.

Code: @namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);

.tabbrowser-tabs *|tab {

   font-size: 12px !important;
   height:    50px !important;
   min-width: 8px !important  }

Save this in the new folder "Chrome" as "userChrome.css".

You can see the height is set to 50px which is probably bigger than you want so you can change the values to what you like but you'll need to restart Firefox each time you make a change.
more options

Thanks. cor-el, I forgot to use '!important'.

GeekInside, thanks also, I have tried code like that.

I will try starting in safe mode with various codes. Tomorrow though.

Modified by ender21

more options

Note that the name of the folder is chrome (case sensitive).

Did you check if the code works with all extensions disabled?

(Safe Mode disable userChrome.css)

more options

Thank you both very much for your help. Disabling all add-ons made no difference. However, removing certain code in userChrome.css relating to the add-on bar fixed the problem.

Both answers worked. I am unable for some reason to mark GeekInside's answer as helpful.

Modified by ender21

more options

After several more experiments I have established that the tab bar code is compatible with the code for the add-on bar.

Modified by ender21