userstyles.org - Firefox Combine Tab Icon and Tab Close Button

[Edit] [Delete]

For Firefox 3.6+ and up to the latest Firefox Beta, Aurora, Nightly builds.

This style adds the following features:

1) Moves the "x"(tab close button) to the left of the tab.
2) Keeps the tab favicon on the left side of the tab and only makes "x"(tab close button) appear when you hover over the tab with your mouse cursor(otherwise "x"(tab close button) would be hidden under the tab favicon).

***!Important!***(If you experience style incompatibility with [Ext] Tab Mix Plus just make sure TMP Options settings: Display > Tab > Show on Tab, "Close tab button" -> "on all" and "Place on left side" is selected)

Tested on Firefox 3.6+ and up to the latest Firefox Beta, Aurora, Nightly builds.

Modified code from Userstyles:

GrApple themes – combined tab icon & close button

Firefox 4, tab close button/favicon reversed (Mac)

To customize or fix Firefox Beta, Aurora, and Nightly builds, you can also have a look at my other styles: rob64rock

(Assuming Firefox Chrome Opera Internet Explorer Chrome on Android Safari on Android Other )

Updated 09-13-2011
Did some CSS code cleanup and fixed some issues with [Ext] Tab Mix Plus Lock, Protect, Auto Reload Icons on Tabs and the issue of the 'Close Tab button' not always appearing when tab is hovered.(Configuring [Ext] Tab Mix Plus settings may not be required for TMP to be compatible with this style anymore.)

Updated 02-12-2011
Updated to fixed some problems with APP Tabs(Pinned tabs) and Tab Mix Plus extension and the Tab throbber and Tab title text.

***!Important!***
This style isn't compatible with extensions:
"Progress Bar on Tab"
"Informational Tab"
"Tree Style Tab"

***!Important!***
Under Mac OS X, the tab text may move on hover, if so try changing the 3px into 0px on this part of code:

/* display close tab button on tab hover */
.tabbrowser-tab:not([pinned]):hover .tab-close-button {
visibility: visible !important; margin-right:3px !important;
}
.tabbrowser-tab:not([pinned]):hover .tab-close-button {
display: -moz-box !important; margin-right:3px !important;
}
.tabbrowser-tab:not([pinned]):hover .tab-close-button.always-left {
display: -moz-box !important; margin-right:3px !important;
}

Firefox Combine Tab Icon and Tab Close Button by rob64rock is licensed under a Creative Commons Attribution-ShareAlike 3.0 Unported License.

Show code