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

Close Tab button on left

  • 14 replies
  • 1 has this problem
  • 120 views
  • Last reply by Kit Marsden

more options

Obviously people have asked this before, but those threads all seem to be closed now. The idea that a browser would not want to have a consistent UI with every other part of the operating system is absolutely nuts, so why is it not easier (or even automatic?!) to place the 'close tab' button on the left when running on a Mac operating system?

I have tried the solutions recommended here – https://support.mozilla.org/en-US/questions/1253751 – but without any success. Maybe someone could help me understand what I am doing wrong? Better yet, maybe Mozilla could remove the need for such workarounds and implement what ought to be a standard feature?

Chosen solution

More info about userContent.css and userChrome.css in case you are not familiar: *https://www.userchrome.org/what-is-userchrome-css.html

In Firefox 69 and later you need to set this pref to true on the about:config page to enable userChrome.css and userContent.css in the chrome folder.


userChrome.css =>

.tabbrowser-tab .tab-close-button {
  -moz-box-ordinal-group: 0 !important;
  margin-inline: -2px 2px !important;
}

Read this answer in context 👍 0

All Replies (14)

more options

Chosen Solution

More info about userContent.css and userChrome.css in case you are not familiar: *https://www.userchrome.org/what-is-userchrome-css.html

In Firefox 69 and later you need to set this pref to true on the about:config page to enable userChrome.css and userContent.css in the chrome folder.


userChrome.css =>

.tabbrowser-tab .tab-close-button {
  -moz-box-ordinal-group: 0 !important;
  margin-inline: -2px 2px !important;
}

Helpful?

more options

Amazing, thank you. The about:config bit was the missing step, and that is now working for me! Thank you for such a quick and helpful response; really pleased!

Helpful?

more options

Just a further quick follow-up to this... The solution above works, but the 'close tab' button does 'jump' slightly on hover (probably just a padding issue, I assume). However I found this code on GitHub, which does not have the 'jump' on mouseover. So if anyone else is struggling with this issue and finds their way here, I recommend checking this out too.

Helpful?

more options

That code uses slightly different values for the margin-left (-5.5px) and margin-right (3px) with the latter probably fixes this.

.tabbrowser-tab .tab-close-button {
  -moz-box-ordinal-group: 0 !important;
  margin-inline: -5.5px 3px !important;
}

Helpful?

more options

cor-el said

That code uses slightly different values for the margin-left (-5.5px) and margin-right (3px) with the latter probably fixes this.
.tabbrowser-tab .tab-close-button {
  -moz-box-ordinal-group: 0 !important;
  margin-inline: -5.5px 3px !important;
}

Firefox just updated itself to the latest version... Now the 'close' button appears next to the favicon on the tab, not in its place. Seems an odd change to make. Do I just need to adjust the margin/padding accordingly?!

Helpful?

more options

No, after a restart, the 'close' button now appears on the left, where it should... But instead of simply replacing the tab's favicon (as before), the favicon now jumps to the right when you hover over the 'close' button, pushing the text of the table title out of view...

I think that's probably just a bug in this latest release, as every time I open Firefox the window is slightly the wrong size for my screen now too (which also never used to happen before this version), so hopefully a new update will be available soon which fixes these minor irritations.

Helpful?

more options

You may have to increase the margin-inline (margin-left and margin-right) property values if the size of the close button increases on hover too much that the favicon is pushed to the right.

Helpful?

more options

Thank you, I'll try that. For the record, this is what's happening now on a tab (this tab, in fact); normal, and then on mouseover:

Helpful?

more options

cor-el said

You may have to increase the margin-inline (margin-left and margin-right) property values if the size of the close button increases on hover too much that the favicon is pushed to the right.

Yes, turns out I can adjust the margins without any issue. But the margins are not causing the problem! In the past, the 'close' button would take the place of the favicon. Now the favicon hops over and they appear side-by-side (see screenshots above).

Looks like the problem is in this piece of code:

.tabbrowser-tab:not([pinned="true"]):hover .tab-icon-image, .tabbrowser-tab:not([pinned="true"]):hover .tab-throbber {

 display: none !important;

}

Clearly the favicon (.tab-icon-image) is supposed to be hidden (display: none;) on hover. But that is no longer the case, since the most recent update to Firefox.

Modified by Kit Marsden

Helpful?

more options

EDIT: The code below has been superseded by an improved version, posted by me below. Please use that instead.

For anybody still looking for a fix for this (there are dozens of us!!), this updated userChrome.css fixes it, retaining the support for muting tabs playing audio.

.tabbrowser-tab .tab-close-button {
  opacity: 0;
  margin-left: -4.5px !important;
  margin-right: 2px !important;
}
.tabbrowser-tab:not(:hover) .tab-close-button {
  display:none;
}

.tabbrowser-tab:not([pinned="true"]):hover .tab-close-button {
  opacity: 1;
  margin-inline-end: 0;
  -moz-box-ordinal-group: 0 !important;
}

.tabbrowser-tab:not([pinned="true"]):hover .tab-icon-stack {
  -moz-box-ordinal-group: 99999 !important;
}
.tabbrowser-tab:not([pinned="true"]):hover .tab-icon-stack:not([indicator-replaces-favicon]) {
  display: none;
}

Modified by bjarke.bech

Helpful?

more options

bjarke.bech said

For anybody still looking for a fix for this (there are dozens of us!!), this updated userChrome.css fixes it, retaining the support for muting tabs playing audio. .tabbrowser-tab .tab-close-button { opacity: 0; margin-left: -4.5px !important; margin-right: 2px !important; } .tabbrowser-tab:not(:hover) .tab-close-button { display:none; } .tabbrowser-tab:not([pinned="true"]):hover .tab-close-button { opacity: 1; margin-inline-end: 0; -moz-box-ordinal-group: 0 !important; } .tabbrowser-tab:not([pinned="true"]):hover .tab-icon-stack { -moz-box-ordinal-group: 99999 !important; } .tabbrowser-tab:not([pinned="true"]):hover .tab-icon-stack:not([indicator-replaces-favicon]) { display: none; }

This is great! However, that only works in the active tab. Now if I mouseover a tab I'm not currently on, the favicon goes – but I don't get a close button at all! In the currently active tab, that all works perfectly...

Helpful?

more options

Kit Marsden said

This is great! However, that only works in the active tab. Now if I mouseover a tab I'm not currently on, the favicon goes – but I don't get a close button at all! In the currently active tab, that all works perfectly...

Weird - works fine here. Are you on Firefox 99.0?

If you're comfortable with HTML+CSS and developer tools, you may be able to fix it yourself by opening the tab bar in a web inspector like this:

  1. Press ⌥⌘I on any tab to open the regular Web Inspector
  2. Click the ··· button in the top right corner
  3. Click Settings (cog icon)
  4. Check "Enable browser chrome and add-on debugging toolboxes" and "Enable remote debugging"
  5. Close the web inspector
  6. In the Firefox menu bar, Go to Tools -> Browser Tools -> Browser Toolbox
  7. The browser chrome web inspector opens, and you can change the CSS for the tabbar on the fly.

If you do solve this, please post your findings as I am a bit curious as to why it won't work on your system.

EDIT: Found the bug, it happens when you have lots of tabs open - fixed in below post:

Modified by bjarke.bech

Helpful?

more options

Apologies - had the same issue happen to me today with 10+ tabs open - it won't happen if you only have a handful of tabs open.

This code fixes it:

.tabbrowser-tab .tab-close-button {
  opacity: 0;
  margin-left: -4.5px !important;
  margin-right: 2px !important;
}
.tabbrowser-tab:not(:hover) .tab-close-button {
  display:none;
}

.tabbrowser-tab:not([pinned="true"]):hover .tab-close-button {
  opacity: 1;
  margin-inline-end: 0;
  -moz-box-ordinal-group: 0 !important;
  display:unset !important;
}

.tabbrowser-tab:not([pinned="true"]):hover .tab-icon-stack {
  -moz-box-ordinal-group: 99999 !important;
}
.tabbrowser-tab:not([pinned="true"]):hover .tab-icon-stack:not([indicator-replaces-favicon]) {
  display: none;
}

Modified by bjarke.bech

Helpful?

more options

bjarke.bech said

Apologies - had the same issue happen to me today with 10+ tabs open - it won't happen if you only have a handful of tabs open. This code fixes it: .tabbrowser-tab .tab-close-button { opacity: 0; margin-left: -4.5px !important; margin-right: 2px !important; } .tabbrowser-tab:not(:hover) .tab-close-button { display:none; } .tabbrowser-tab:not([pinned="true"]):hover .tab-close-button { opacity: 1; margin-inline-end: 0; -moz-box-ordinal-group: 0 !important; display:unset !important; } .tabbrowser-tab:not([pinned="true"]):hover .tab-icon-stack { -moz-box-ordinal-group: 99999 !important; } .tabbrowser-tab:not([pinned="true"]):hover .tab-icon-stack:not([indicator-replaces-favicon]) { display: none; }

Amazing! That is perfect, thank you so much!

As you say, there are so many people looking for this! Like I've mentioned before, I can't believe this is not a standard option in the browser settings... A simple tickbox for 'Close button on left' or 'Close button on right'. (Or even, like the colour/theming, an option for 'Follow system theme' – ie. left for Mac users, right for Windows – or 'Let me choose'.)

Helpful?

Ask a question

You must log in to your account to reply to posts. Please start a new question, if you do not have an account yet.