Firefox tab "close" button to appear when you hover over a tab?

By JayZJay
in Web Browser Discussion & Support

 Share

Recommended Posts

Proficient

JayZJay

Posted
Posted

I am trying to find a Firefox add-on/extension or hack that will enable or make a Firefox tab "close" button (x) appear when you hover over an inactive tab (all tabs except the currently viewed (active) tab) so that one doesn't have to click on the tab and then click the close button. In the case of Chrome, the tab close buttons are always visible on all tabs, but the close button doesn't light up until the mouse cursor is over the close button. In the case of IE8 and IE9, you don't even see the tab close buttons on inactive tabs until you hover over an inactive tab with the mouse cursor. When you do hover over an inactive tab, the close button appears and if you hover over the close button, then the tab close button lights up (like Chrome).

I should point out that I prefer the IE8/IE9 functionality where I don't even see the tab close buttons until I hover over an inactive tab. I think I can get what I'm looking for with Tab Mix Plus, but I don't want all the "stuff" and bloat that it brings. I would think what I'm looking for is either already out there or could be developed in a tiny little tweak/hack/add-on.

I'm familiar with the Firefox "browser.tabs.closeButtons" preference (http://kb.mozillazine.org/Browser.tabs.closeButtons), but that doesn't seem to help.

Any help would be greatly appreciated.

Grand Master

Yusuf M. Veteran

Posted
  • Veteran
Posted

Which version of Firefox are you using? As far as I'm aware, the tabs in Firefox 4 behave the same way as the tabs in Chrome 10. The only difference is the colour of the "x" button when you hover your cursor over it.

501521885.png

552178835.png

Proficient

JayZJay

Posted
  • Author
Posted

I am using Firefox 4.0 and I do NOT have that functionality. So, I'm guessing that maybe one of my add-ons is messing with Firefox's default functionality. I'll look into it. Thanks, Anaron.

I am using a couple of non-default profiles for testing since my default profile is still linked to Firefox 3.6.16. I wonder if that has anything to do with it? I would think it is a add-on conflict or something along those lines.

Grand Master

Yusuf M. Veteran

Posted
  • Veteran
Posted

That's odd. I took the screenshots with a default installation of Firefox 4 (that was installed over Firefox 3.6). I am, however, using a new profile. As for my settings, the only things I changed related to hardware acceleration. You can restart Firefox 4 with add-ons disabled. Just click on the Firefox button and hover your cursor over "Help". From there, you should see "Restart Firefox with Add-ons Disabled".

Proficient

JayZJay

Posted
  • Author
Posted

Question for Anaron or anyone else...

I currently have 39 tabs open in Firefox 4 so I can't easily test this without saving my session or closing tabs. I just want to make sure of something. The close tab buttons like Anaron showed do still appear when you open many more tabs, correct? In my current case, the tab width of each tab is probably about half (maybe even a little less) than what he is showing in his Firefox 4 pictures because I have so many tabs open.

Grand Master

Yusuf M. Veteran

Posted
  • Veteran
Posted

That's interesting. I've never had that many tabs open before. Anyway, I just opened a bunch of tabs and noticed that the "x" button disappears after opening an 11th tab. This is with Firefox 4 at fullscreen (1680x1050). I assume the point at which the "x" button disappears varies with resolution. Chrome 10 acts the same way but with a slight difference. Instead of the button disappearing after opening an 11th tab, it disappears after opening tab #25.

Proficient

JayZJay

Posted
  • Author
Posted

That's odd. I took the screenshots with a default installation of Firefox 4 (that was installed over Firefox 3.6). I am, however, using a new profile. As for my settings, the only things I changed related to hardware acceleration. You can restart Firefox 4 with add-ons disabled. Just click on the Firefox button and hover your cursor over "Help". From there, you should see "Restart Firefox with Add-ons Disabled".

I restarted Firefox in Safe-Mode (Add-ons disabled) and it didn't change anything. As mentioned in my previous post, I wonder if Firefox 4 is really like Chrome or IE8/IE9 even when many tabs are open and the tab widths are a lot smaller. I need to test that to make sure.

Thanks for the help fr33k, but I don't want the size/bloat and everything else that comes with Tab Mix Plus for something so simple. If needed, I'll make a tiny little add-on for this myself. It would be nice if that wasn't necessary, but it might be.

That's interesting. I've never had that many tabs open before. Anyway, I just opened a bunch of tabs and noticed that the "x" button disappears after opening an 11th tab. This is with Firefox 4 at fullscreen (1680x1050). I assume the point at which the "x" button disappears varies with resolution. Chrome 10 acts the same way but with a slight difference. Instead of the button disappearing after opening an 11th tab, it disappears after opening tab #25.

I didn't test that far with Chrome 10 or IE 9. Thanks for the feedback.

Mentor

arrrgh

Posted
Posted

You can control the point when the close button disappears with browser.tabs.tabClipWidth setting in about:config.

The setting is used to set the point where the close button disappears, e.g. setting it to 50 pixels will keep close button on background tabs until the tabs are shorter than 50 pixels (which should never happen) effectively forcing the close buttons to appear always.

Proficient

JayZJay

Posted
  • Author
Posted

You can control the point when the close button disappears with browser.tabs.tabClipWidth setting in about:config.

The setting is used to set the point where the close button disappears, e.g. setting it to 50 pixels will keep close button on background tabs until the tabs are shorter than 50 pixels (which should never happen) effectively forcing the close buttons to appear always.

Thank you very much, macel. I think this is as simple and tiny a solution as I am going to find or could even create. It works beautifully. I still would prefer the IE8/IE9 functionality where tab close buttons don't appear until you hover over an inactive/background tab, but I will be thankful and count my blessings.

Here is the scoop or summary of what I found:

In testing on my install of Firefox 4.0 on Windows 7 x64,

For 1-14 tabs, the tab width varies between a max of 250 pixels and about 108 or 109 pixels.

For 15 or more tabs, the tab width is 100 pixels.

So, I entered "about:config" into the address bar to change the Firefox "browser.tabs.tabClipWidth" preference. (see http://kb.mozillazine.org/browser.tabs.tabClipWidth for more info.) For those not clear, once you enter about:config and are in the advanced settings area, just paste in browser.tabs.tabClipWidth to filter that result or scroll down to it. The default setting is 140. 0 (zero) is an invalid entry. Since the minimum tab width is 100 pixels, 99 or less makes the tab close buttons always appear and useable no matter what.

100 or greater = tab close buttons do not appear until you click on an inactive/background tab (see the mozillazine link above for exceptions or issues with this)

1-99 = tab close buttons appear always on both the active/foreground tab and inactive/background tabs and are useable WITHOUT first having to click on an inactive/background tab

Since 96 is a nice number that 2, 8, 16, 32, etc goes into, I used 96 for the preference. It doesn't matter I suppose. The bottom line is the tab close button always appears on all tabs and you can close an inactive/background tab without having to first click on it to see the tab close button.

Thanks to macel, Anaron, and fr33k for the interest and help! ;)

I'm editing this post to add a caveat. If one uses the "browser.tabs.tabMinWidth" preference (removed from Firefox 4.0, but see http://kb.mozillazine.org/browser.tabs.tabMinWidth for more info) or Custom Tab Width add-on/extension (https://addons.mozilla.org/en-US/firefox/addon/custom-tab-width/) to change the minimum tab width, then obviously the preference changed mentioned above that worked for me will not work necessarily and/or will have to be modified.

Mentor

phot0nic

Posted
Posted

I still would prefer the IE8/IE9 functionality where tab close buttons don't appear until you hover over an inactive/background tab

This is pretty easy to do with some CSS styling. Here, paste this bit of text into either userchrome.css (in your profile folder), or use the Stylish extension:

.tabbrowser-tab:not([selected]) .tab-close-button {
	visibility: hidden !important;
	margin-left: -16px !important;
}

.tabbrowser-tab:not([selected]):hover .tab-close-button {
	visibility: visible !important;	
	margin-left: 0px !important;
}

  • FMH, tinaun and +Audioboxer
  • Like 3
Proficient

JayZJay

Posted
  • Author
Posted

This is pretty easy to do with some CSS styling. Here, paste this bit of text into either userchrome.css (in your profile folder), or use the Stylish extension:

.tabbrowser-tab:not([selected]) .tab-close-button {
	visibility: hidden !important;
	margin-left: -16px !important;
}

.tabbrowser-tab:not([selected]):hover .tab-close-button {
	visibility: visible !important;	
	margin-left: 0px !important;
}

Thanks. I had seen solutions involving the Stylish extension, but nothing for sure that involved just modifying the userchrome.css file. I'll check out the code.

Proficient

JayZJay

Posted
  • Author
Posted

This is pretty easy to do with some CSS styling. Here, paste this bit of text into either userchrome.css (in your profile folder), or use the Stylish extension:

.tabbrowser-tab:not([selected]) .tab-close-button {
	visibility: hidden !important;
	margin-left: -16px !important;
}

.tabbrowser-tab:not([selected]):hover .tab-close-button {
	visibility: visible !important;	
	margin-left: 0px !important;
}

CSS code works like a charm and gives you functionality just like how IE8/IE9 handles the tab close buttons, with the exception that the tab close buttons in Firefox do not light up red or anything like that. Hitchhiker, could you easily add that?

Mentor

phot0nic

Posted
Posted

CSS code works like a charm and gives you functionality just like how IE8/IE9 handles the tab close buttons, with the exception that the tab close buttons in Firefox do not light up red or anything like that. Hitchhiker, could you easily add that?

I'm not exactly sure what you mean. If you're looking for red close buttons, you can try the Windows 7 style close buttons that I use for my tabs:

.tab-close-button {
  list-style-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAQCAYAAABQrvyxAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAZdEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41Ljg3O4BdAAAERElEQVRIS9WWa1BUZRzG16/6pWbKvpdGmjPVUDPUaGp+MChtGyawi4xjQd7xA0oMSoASMZKyAROXYBAEAxovC5Fc5bJDkOumQKEBIsvusiZpSTMi7M7T+5zdc3rPjm071pfOzDP/9/0/v2f3/e85MMdgXBZh3LxqA9Y98njIIs+cQVxi/UB55v6LvOGNJ19AS0kp/hi0hizyzPEArB2V1fA6rocs8nK+zmTCcPe3GPuuDRMXOjFp7YLD1g3nD91K5Z59+uTIq3kDf/mZy9/jRu2XIYs8cxyA1TsxBk/f+ZBFXs4PtJlxJjsJraYDsBRnorc0C/3l2bBW5CiVe/bpkyOv5pUD3LH1YaqmGO6TfnEtpPVUz98nrxvg2hV4LC3w9AiJOq+o2ddT+37PI/pewcv5yy2ncerQHpzL3Y/Oz1PRU5iG3qJ09JeKYUTlnn365MjrBvjtggWuykJFqVu2IDomQVHgmr5TiLxugKuD8LSbMd/egMM7d2t5/XoXPB1mwTXAK3g5f+nc16hP24amT/ZiR2y0lt/zzlvamn365MjrBrjdJ5658jw4yvKUgHoFrlWGvG6AoYuYb6pTFCyvMl7By3lbYy1qk7eiIX170Dx9cuR1A/xqaYe96Agmio8gZfN7ug/hMDwU+3bhkyEvH8Bj68Xc6eOYO3Uch+N9d0++uD+UkKD480Lk5bz1TDVq9r6LsylbkWB8/b559umTI68b4GrJUbRGhqMlKhytQttXRmgfwi/nnr4q8vIBpnKSMfTsIgw9swg/CiU9F6bLc+/zF4q6EOTlvDljP5IeNSB1sQEHHzPgzbAndHnu2adPjrxugJ/LTDgf/bKinWtWKuHR0VFN3LOvMuQDBxheuxjUvogV982zf8XPBBvA6D984Pez/7cDjFUVwRIXhZ6413RfLg/CNRmKvDyA23QQI7FLMRKzJGh+JEYwgiOvuwPijiQtWYDUsAVB8/TJmaU7qPwbvV5fgf4dsUKbkBi5XvvLD1zTp8jLB7hZ+SnGd4cLPY+PonyPHxW4pj++Kxzk5XxzQRrSX3wI2aseRkzEci3/9kt/rdmnT4687hFyNNbDtu+Df1C85pOXD3CrsRD2zFcwKWTPXKtoMkOV6Gew7/MnhUdeznefyIFp01KUxD2FiveXoSp+OWo+fBpfbVuhVO7Zp0+OvG4Ad/s3GPg4EQNpiRgUdVBUrpV9QGWPvHyAGesJOPM3wFWwUaob4WIvn1WIXoGPIS/nLzZ9gZMHVuNs1jo0565H29FX0ZEXia78KKVyzz59cuS1AcRLGdrEu810b2fIIs8cXyVYu2oLcNdhxl1nPWZdFZh15+PeL1mYm07BvRvHMDtVLrw6HyNEXs43lH2G8Us1cA1XYXq8FLftx3DHlYkZdzJ+d+Ti1kQJbl6rhvOnOoUjr+Z5ACNfjDhRqCIvv40+SF5+G/03ef6I/+vrT4dImkwPzI8yAAAAAElFTkSuQmCC") !important;
}

.tab-close-button:not([selected]) {
  -moz-image-region: rect(0, 16px, 16px, 0) !important;
}

.tab-close-button:hover,
.tab-close-button:hover[selected="true"] {
  -moz-image-region: rect(0, 32px, 16px, 16px) !important;
}

.tab-close-button:hover:active,
.tab-close-button:hover:active[selected="true"] {
  -moz-image-region: rect(0, 48px, 16px, 32px) !important;
}

.tabbrowser-tab:not([selected]) .tab-close-button {
        visibility: hidden !important;
        margin-left: -16px !important;
}

.tabbrowser-tab:not([selected]):hover .tab-close-button {
        visibility: visible !important; 
        margin-left: 0px !important;
}

If you're looking for something exactly like IE9 (gray 'x' that turns red when hovering), here (I just changed the embedded image):

.tab-close-button {
  list-style-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAQCAYAAABQrvyxAAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAOwgAADsIBFShKgAAAABl0RVh0U29mdHdhcmUAUGFpbnQuTkVUIHYzLjUuODc7gF0AAAG4SURBVEhL7VM7TsNAEPUBOA5J4CKEQAGCvQNU3AKIAzTBSZBDAaIzHAQRY/xZO074CS4w7Fuwsw0aFzRItjSap/f8xjOza8uqn3oDf7cBz7ul8fiS8tlcFFWBwXneHXFfyg8OKN3YpDeZlf53hcFB4/zTnV1KWi36lGnpBwYHjfNbrjums5NTQp7mM4EwOa4AGpWrq3qI10QKhMlxfjQaLS3pIT6UF2FynN+S6VQ17FLP7qkhXB0FhsYVmIeRkJ0NSlZWCNnE0Dj/WxSLuNnUQyCbGBrn17pMMzEaXZDdtXUAV2m+vHJBKJKfIYpB8qew2sdVkVc1aLH14jTAVWoeL8VJKobDEdnHXR3A4KoWyPUAHYrVKSCAwVX1v6hhi80XJwGukj+MEzEYDKmrGkde4BFB44pkfiCS9e/mkU0MjfPPg6dfr9Cz0ji/5TgDOjo8JuQgjAVCc0ffHFcgbq9T3FKbV1lOfIEwOdZv3P/ZYyAQ5n/A+a2r6xvq9x2aPC6OzFe4f+4QNK5AtLdP4VqbovuHclvAmlMa50+2tilablD24Jf+qVpC1GiQVBrnr/V6A/UG/uEGvgBxw8Y81yU7fAAAAABJRU5ErkJggg==") !important;
}

.tab-close-button:not([selected]) {
  -moz-image-region: rect(0, 16px, 16px, 0) !important;
}

.tab-close-button:hover,
.tab-close-button:hover[selected="true"] {
  -moz-image-region: rect(0, 32px, 16px, 16px) !important;
}

.tab-close-button:hover:active,
.tab-close-button:hover:active[selected="true"] {
  -moz-image-region: rect(0, 48px, 16px, 32px) !important;
}

.tabbrowser-tab:not([selected]) .tab-close-button {
        visibility: hidden !important;
        margin-left: -16px !important;
}

.tabbrowser-tab:not([selected]):hover .tab-close-button {
        visibility: visible !important; 
        margin-left: 0px !important;
}

Grand Master

+Audioboxer Subscriber²

Posted
  • Subscriber²
Posted

This is pretty easy to do with some CSS styling. Here, paste this bit of text into either userchrome.css (in your profile folder), or use the Stylish extension:

.tabbrowser-tab:not([selected]) .tab-close-button {
	visibility: hidden !important;
	margin-left: -16px !important;
}

.tabbrowser-tab:not([selected]):hover .tab-close-button {
	visibility: visible !important;	
	margin-left: 0px !important;
}

Works great (Y)

Proficient

JayZJay

Posted
  • Author
Posted

As an aside, why not just middle click to close? Vastly more simple than tweaking around with Firefox.

I use Logitech mice with a micro-gear/ratchet middle button that switches between smooth, hyper-fast scrolling and the common click-to-click/notched scrolling. These don't have middle-clicking, which is fine for me since I never middle-clicked anyway. Middle-clicking on these switches the scrolling of the the wheel, literally changing gears or ratchets. I love the mice, but the bottom line is what you suggest isn't an option.

Proficient

JayZJay

Posted
  • Author
Posted

I'm not exactly sure what you mean. If you're looking for red close buttons, you can try the Windows 7 style close buttons that I use for my tabs:

.tab-close-button {
  list-style-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAQCAYAAABQrvyxAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAZdEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41Ljg3O4BdAAAERElEQVRIS9WWa1BUZRzG16/6pWbKvpdGmjPVUDPUaGp+MChtGyawi4xjQd7xA0oMSoASMZKyAROXYBAEAxovC5Fc5bJDkOumQKEBIsvusiZpSTMi7M7T+5zdc3rPjm071pfOzDP/9/0/v2f3/e85MMdgXBZh3LxqA9Y98njIIs+cQVxi/UB55v6LvOGNJ19AS0kp/hi0hizyzPEArB2V1fA6rocs8nK+zmTCcPe3GPuuDRMXOjFp7YLD1g3nD91K5Z59+uTIq3kDf/mZy9/jRu2XIYs8cxyA1TsxBk/f+ZBFXs4PtJlxJjsJraYDsBRnorc0C/3l2bBW5CiVe/bpkyOv5pUD3LH1YaqmGO6TfnEtpPVUz98nrxvg2hV4LC3w9AiJOq+o2ddT+37PI/pewcv5yy2ncerQHpzL3Y/Oz1PRU5iG3qJ09JeKYUTlnn365MjrBvjtggWuykJFqVu2IDomQVHgmr5TiLxugKuD8LSbMd/egMM7d2t5/XoXPB1mwTXAK3g5f+nc16hP24amT/ZiR2y0lt/zzlvamn365MjrBrjdJ5658jw4yvKUgHoFrlWGvG6AoYuYb6pTFCyvMl7By3lbYy1qk7eiIX170Dx9cuR1A/xqaYe96Agmio8gZfN7ug/hMDwU+3bhkyEvH8Bj68Xc6eOYO3Uch+N9d0++uD+UkKD480Lk5bz1TDVq9r6LsylbkWB8/b559umTI68b4GrJUbRGhqMlKhytQttXRmgfwi/nnr4q8vIBpnKSMfTsIgw9swg/CiU9F6bLc+/zF4q6EOTlvDljP5IeNSB1sQEHHzPgzbAndHnu2adPjrxugJ/LTDgf/bKinWtWKuHR0VFN3LOvMuQDBxheuxjUvogV982zf8XPBBvA6D984Pez/7cDjFUVwRIXhZ6413RfLg/CNRmKvDyA23QQI7FLMRKzJGh+JEYwgiOvuwPijiQtWYDUsAVB8/TJmaU7qPwbvV5fgf4dsUKbkBi5XvvLD1zTp8jLB7hZ+SnGd4cLPY+PonyPHxW4pj++Kxzk5XxzQRrSX3wI2aseRkzEci3/9kt/rdmnT4687hFyNNbDtu+Df1C85pOXD3CrsRD2zFcwKWTPXKtoMkOV6Gew7/MnhUdeznefyIFp01KUxD2FiveXoSp+OWo+fBpfbVuhVO7Zp0+OvG4Ad/s3GPg4EQNpiRgUdVBUrpV9QGWPvHyAGesJOPM3wFWwUaob4WIvn1WIXoGPIS/nLzZ9gZMHVuNs1jo0565H29FX0ZEXia78KKVyzz59cuS1AcRLGdrEu810b2fIIs8cXyVYu2oLcNdhxl1nPWZdFZh15+PeL1mYm07BvRvHMDtVLrw6HyNEXs43lH2G8Us1cA1XYXq8FLftx3DHlYkZdzJ+d+Ti1kQJbl6rhvOnOoUjr+Z5ACNfjDhRqCIvv40+SF5+G/03ef6I/+vrT4dImkwPzI8yAAAAAElFTkSuQmCC") !important;
}

.tab-close-button:not([selected]) {
  -moz-image-region: rect(0, 16px, 16px, 0) !important;
}

.tab-close-button:hover,
.tab-close-button:hover[selected="true"] {
  -moz-image-region: rect(0, 32px, 16px, 16px) !important;
}

.tab-close-button:hover:active,
.tab-close-button:hover:active[selected="true"] {
  -moz-image-region: rect(0, 48px, 16px, 32px) !important;
}

.tabbrowser-tab:not([selected]) .tab-close-button {
        visibility: hidden !important;
        margin-left: -16px !important;
}

.tabbrowser-tab:not([selected]):hover .tab-close-button {
        visibility: visible !important; 
        margin-left: 0px !important;
}

If you're looking for something exactly like IE9 (gray 'x' that turns red when hovering), here (I just changed the embedded image):

.tab-close-button {
  list-style-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAQCAYAAABQrvyxAAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAOwgAADsIBFShKgAAAABl0RVh0U29mdHdhcmUAUGFpbnQuTkVUIHYzLjUuODc7gF0AAAG4SURBVEhL7VM7TsNAEPUBOA5J4CKEQAGCvQNU3AKIAzTBSZBDAaIzHAQRY/xZO074CS4w7Fuwsw0aFzRItjSap/f8xjOza8uqn3oDf7cBz7ul8fiS8tlcFFWBwXneHXFfyg8OKN3YpDeZlf53hcFB4/zTnV1KWi36lGnpBwYHjfNbrjums5NTQp7mM4EwOa4AGpWrq3qI10QKhMlxfjQaLS3pIT6UF2FynN+S6VQ17FLP7qkhXB0FhsYVmIeRkJ0NSlZWCNnE0Dj/WxSLuNnUQyCbGBrn17pMMzEaXZDdtXUAV2m+vHJBKJKfIYpB8qew2sdVkVc1aLH14jTAVWoeL8VJKobDEdnHXR3A4KoWyPUAHYrVKSCAwVX1v6hhi80XJwGukj+MEzEYDKmrGkde4BFB44pkfiCS9e/mkU0MjfPPg6dfr9Cz0ji/5TgDOjo8JuQgjAVCc0ffHFcgbq9T3FKbV1lOfIEwOdZv3P/ZYyAQ5n/A+a2r6xvq9x2aPC6OzFe4f+4QNK5AtLdP4VqbovuHclvAmlMa50+2tilablD24Jf+qVpC1GiQVBrnr/V6A/UG/uEGvgBxw8Y81yU7fAAAAABJRU5ErkJggg==") !important;
}

.tab-close-button:not([selected]) {
  -moz-image-region: rect(0, 16px, 16px, 0) !important;
}

.tab-close-button:hover,
.tab-close-button:hover[selected="true"] {
  -moz-image-region: rect(0, 32px, 16px, 16px) !important;
}

.tab-close-button:hover:active,
.tab-close-button:hover:active[selected="true"] {
  -moz-image-region: rect(0, 48px, 16px, 32px) !important;
}

.tabbrowser-tab:not([selected]) .tab-close-button {
        visibility: hidden !important;
        margin-left: -16px !important;
}

.tabbrowser-tab:not([selected]):hover .tab-close-button {
        visibility: visible !important; 
        margin-left: 0px !important;
}

Thanks for the code, but neither one of these seem to change anything from the first CSS code you posted except for making the tab close buttons appear all the time. That is the only difference I see. The first CSS code you posted was more like IE in that it didn't show the tab close buttons on inactive/background tabs until you hovered over them. Not sure what is wrong with these larger code snippets. It would be cool if tab close buttons would "light" up when you hover over them and I think that is what you are saying these larger code snippets are supposed to do in some fashion. I'm willing to play with this a bit more if you find the problem in these larger code snippets or know what the problem is. Thanks for all the work and help, Hitchhiker...

Proficient

JayZJay

Posted
  • Author
Posted

Yeah, the base64 was screwed up. Here:

Win7 Close Buttons

IE9 Close Buttons

Yeah, I had a feeling dnast was correct and thought that might be the case when I posted my findings, but wasn't sure. I should have articulated that in my post. Thanks to you as well as dnast for being on top of it. I'll test out the 2 options.

Proficient

JayZJay

Posted
  • Author
Posted

This is pretty easy to do with some CSS styling. Here, paste this bit of text into either userchrome.css (in your profile folder), or use the Stylish extension:

.tabbrowser-tab:not([selected]) .tab-close-button {
	visibility: hidden !important;
	margin-left: -16px !important;
}

.tabbrowser-tab:not([selected]):hover .tab-close-button {
	visibility: visible !important;	
	margin-left: 0px !important;
}

CSS code works like a charm and gives you functionality just like how IE8/IE9 handles the tab close buttons, with the exception that the tab close buttons in Firefox do not light up red or anything like that. Hitchhiker, could you easily add that?

In working with a different profile, I just realized that you have to use this code in addition to changing the Firefox preference "browser.tabs.tabClipWidth" to a value less than 100 if you want the functionality of having tab close buttons that do not appear on inactive/background tabs unless you hover over them. I had already changed this preference before and as a result, when I created a userChrome.css file and added this code, it worked as I intended. But, when creating a userChrome.css file with this code for another Firefox profile where I had NOT changed the "browser.tabs.tabClipWidth" preference, the results were not the same and I realized that you have to use the preference change along with the userChrome.css file.

I hope that makes sense to those that care...

This topic is now closed to further replies.
 Share
Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.