Positioning Firefox’ Tab Close Buttons on the left

Firefox Tab Close Button on the LeftI can’t stand how the close button for tabs is on the right. On the Mac, close goes on the left.
— John Gruber (#)

Last night I whipped up a tad of CSS to position the tab close buttons in Firefox 4 (currently in Beta) on the left hand side of the tab. The CSS needs to be placed into your userChrome.css to make it work (the code was tested with Firefox 4.0b7).

* Do not remove the @namespace line -- it's required for correct functioning
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* set default namespace to XUL */

/* move favicon, throbber and text to the right so that the close button appears on the left */
.tabbrowser-tab .tab-icon-image {
  -moz-box-ordinal-group: 2 !important;

.tabbrowser-tab .tab-throbber {
  -moz-box-ordinal-group: 2 !important;

.tabbrowser-tab .tab-label {
  -moz-box-ordinal-group: 3 !important;

/* hide close button initially */
.tabbrowser-tab .tab-close-button {
  display: none !important;

/* show close + hide throbber & favicon on hover */
.tabbrowser-tab:hover .tab-close-button {
  display: block !important;

.tabbrowser-tab:hover .tab-icon-image {
  display: none !important;

.tabbrowser-tab:hover .tab-throbber {
  display: none !important;

/* app tabs should not behave like regular tabs, so let them stay normal (viz. don't show close on hover) */
.tabbrowser-tab[pinned]:hover .tab-close-button {
  display: none !important;

.tabbrowser-tab[pinned]:hover .tab-icon-image {
  display: block !important;

The CSS initially hides the close button of all tabs. When hovering over a tab, the favicon is replaced by the close tab button. The code also plays nice with Firefox’ App Tabs.

Normal Tab

Hovered Tab

Hovered App Tab

As the code is placed on GitHub, feel free to fork off! 😉

RE: Rounded corners on images, CSS-only

Rounded corners are hot. They have been for a long time and still are. Recently things got a whole lot easier due to the fact that lots of browsers started supporting (their vendor specific prefixed version of) border-radius. One of the problems with it is that border-radius cannot be used on images. Tim Van Damme recently went over the possibilities to using rounded corners with images and developed a nice CSS solution for it. Javascript geek as I am, I took the liberty of making a tad bit more dynamic by creating a javascript enhanced version of his solution.

Did this help you out? Like what you see?
Consider donating.

I don’t run ads on my blog nor do I do this for profit. A donation however would always put a smile on my face though. Thanks!

☕️ Buy me a Coffee ($3)

How to style your lists properly

ListsWorking with nested lists is not an uncommon practice, yet I’ve noticed that some (and I before) had troubles when working with nested lists of different types (viz. an ol inside an ul or vice versa). However, it shouldn’t be a burden at all, here’s a hat tip, saving you some headaches.

Continue reading “How to style your lists properly”

Native CSS selector system to look up DOM nodes hits Webkit/Safari

Many javascript libraries have implemented functions to use the powerful CSS selector system to look up DOM nodes. Continuing the trend of standardizing and speeding up commonly used functionality from these libraries, WebKit now has support for the new W3C Selectors API, which consists of the querySelector and querySelectorAll methods.

Sweet! 🙂

Native CSS selector system to look up DOM nodes hits Webkit/Safari →

TinyMCE CSS Classes and IDs Plugin : bramus_cssextras 0.5.0 hits the net!

TinyMCE LogoHuzzah! bramus_cssextras 0.5.0 has been released! No new features have been added, yet this version differs a lot from the previously released versions of bramus_cssextras: Under the hood bramus_cssextras has been totally rewritten to make it TinyMCE 3.0 compatible.

Continue reading “TinyMCE CSS Classes and IDs Plugin : bramus_cssextras 0.5.0 hits the net!”

My Javascript (non-AJAX) Progress Bar Class : jsProgressBarHandler

progress.gifDon’t you just hate it when people wrongly label something as AJAX? A fine example of this is the – so called – AJAX Progress Bar. Above that the javascript could … well … let’s say “a rewrite needs to be done” popped up in my head, resulting in jsProgressBarHandler, a Prototype.js class to dynamically creating (unobtrusive of course) and manipulating progress bars.

Continue reading “My Javascript (non-AJAX) Progress Bar Class : jsProgressBarHandler”

My note to myself : Dissapearing Firefox Caret (Cursor) CSS Fix

firefox.gifIn FireFox (or any other Mozilla/Gecko based browser), the caret in input fields and textareas sometimes just disappears (viz. it’s not there). To be more precise it has something to do with input fields and textareas inside fixed-positioned elements. Found a CSS fix a few months ago, but forgot about it, so sticking a post-it on myself right now so my brain won’t let me down anymore.

Continue reading “My note to myself : Dissapearing Firefox Caret (Cursor) CSS Fix”