Firefox 3 for the widescreen generation


(click image for full size)

Increasingly webpages are portrait and screens are landscape!...

...also, you have many tabs, want to scroll less, or just want to save vertical real-estate?...

... Widefox - a widescreen optimised Firefox that also works on 4:3 screens.

Widefox Features

  • Vertical tabs (vertical tabbar)
    • choice of tabbar on right or left
  • Compatible
    • Firefox 3.0 (3.0 - 3.0.5pre) BETA COMING SOON
    • Firefox 2.0 (2.0 -
    • Firefox 1.5 (see bottom for details)
    • All builds (Windows, Mac, Linux, 3rd party, and localisations)
    • All extensions (with the exception of HideTabBar, and those not compatible with TabMixPlus)
  • Maximize vertical space
  • Optimized for many tabs
    • tabbar usable up to 40 or more tabs
    • Session management
    • More efficient navigation
      • navigation all to top right
      • efficient scroll wheel
      • logical keyboard navigation
  • High-end setups
    • Dual display - tabbar on 2nd monitor


  •  1.0.3 Support for Firefox 3.0.x COMING SOON

    1.0.2 fix for Mac tabs being centred instead of top aligned with some themes (thanks Joel Davis) 21.5.07

    1.0.1 fix tabbar colour x.07

    1.0 initial release for Firefox 2.x x.06

    <1.0 Firefox 1.5 (using Vertical)  


General Features

  • Maximize security
  • Maximize privacy
  • Add in your favourite Firefox extensions for Web 2.0
  • Definitive font configuration
    • for Linux
    • also gives improvement for Windows, Mac
    • MathML font configuration for all OSes

Vertical Tab Bar

To do this in Firefox 2.0, you will need to do 2 things - detailed below

  • 1. install Tab Mix Plus and configure
  • 2. install this userChrome.css

1. TabMixPlus

  • install Tab Mix Plus
  • then just set the following so everything works properly ...

TabMixPlus settings

  • Display->Tabbar->bottom (if you want tabbar on right).
    • The alternative is to uncomment the single line in userChrome.css
  • Display->Tabbar->built-in-style
  • Display->Tabbar->when don't fit->scrollable

  • Display->Tab->tabwidth fits->off

2. userChrome.css

Add this to your <profile dir>/chrome/userChrome.css file (included here is the whole file). For help on this see Firefox help. (this is a modification of the original available online)

/* beginning of file userChrome.css */

* 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 */

/* Widefox userChrome.css version 1.0.2 */
/* Supports Firefox 2.x (tested on 2.0 - 2.0.0.x) */

#content > tabbox {
-moz-box-orient: horizontal;

.tabbrowser-strip {
-moz-box-orient: vertical;
/* note: you can set this to -moz-scrollbars-vertical instead,
but then the scrollbar will *always* be visible. this way
there is never a scrollbar, so it behaves like the tab bar
normally does */
overflow: -moz-scrollbars-none;

.tabbrowser-tabs {
-moz-box-orient: horizontal;
/* min-width: 50ex; */ /* >1680 pixels screens */
/* min-width: 40ex; /* =1680,1600 pixels screens */
/* min-width: 35ex; */ /* =1440 pixels screens */
min-width: 30ex; /* <1440 pixels screens */
/* min-width: 20ex; */ /* 1280 pixels screens */
/* min-width: 17ex; */ /* this is almost the minimum to go down to on small screens */
-moz-box-align: start !important;

/*> stack > vbox > hbox*/
.tabbrowser-tabs > stack > vbox > hbox > hbox {
-moz-box-orient: vertical;
-moz-box-align: stretch;

.tabbrowser-tabs > stack > vbox > hbox > hbox > tab {
-moz-box-align: start;
-moz-box-orient: horizontal;
/* to put the tabs on the right un-comment this line (not needed if using Tab Mix Plus)
#content > tabbox {-moz-box-direction: reverse;} */
/***** Tabbar *****/

/* Background for tabbrowser strip */
tabs.tabbrowser-tabs {
background-color: none !important;
background: url("bkgrd\\topbar.jpg") !important;

/* stop refcontrol context menu item */
#refcontrol_options, #refcontrol_options_link, #refcontrol_options_image, #refcontrol_sep
{ display: none !important; }

/* remove the search button (magnifying glass) */
.search-go-button-stack { display: none !important; }

/* remove the search engine drop-down button as this line */
/* .searchbar-engine-button { display: none !important } */

/* end of file userChrome.css */

  • Edit the line in the userChrome.css which sets the tabbar width:

min-width: 30ex; /* <1440 pixels screens */

Uncomment the size for your screen

OK. That's it. Now try it for a while. The rest of this page is optional, but highly recommended.


  • latest Firefox 2.0.0.x official build or
  • latest Firefox 2.0.0.xpre (a pre-release nightly from 1.8 branch), or possibly the best...
  • Alternate builds e.g. for speed

more TabMixPlus config

  • Display->Tab-> current, highlight (custom "Current" = bold/text black, "Unread" = red, "Progress Meter" = background Red)

Tab focus boost

Having the current tab to the side, instead of above, means that it is slightly more detached from the page, so to compensate...

  • Aging Tabs - set 25% ageing (50% if you don't switch tabs much or have many tabs)

  • To have more emphasis on active tab
  • easy navigation amongst active tabs
  • works with Tab Mix Plus settings above

Pure tabs

  • open tabs for everything

Single toolbar

  • first off, reduce the searchbox size using Searchbar Autosizer
  • eliminate toolbars! - combine those contents you use of toolbars using the customize option to drag icons.

It is relatively easy to fit your bookmarks, search box and a few icons into 1 toolbar on a widesceen or even 4:3 screen. A more extreme version can be attempted by hiding all toolbars, and just using the menu bar.

  • Easy: only Bookmarks toolbar visible (see top).
  • Difficult: for screens wider than about 1600 pixels, no toolbars is possible as long as you make the bookmarks in your bookmark toolbar very concise, and if you use Petname, then use an autohiding version (more help on that coming here soon).

Close button

  • optional Close button, (makes sense to have it on single toolbar)

More logical scroll wheel tab selection

  • now that tabs are vertical, selection by scroll wheel is properly aligned - both are now vertical!

Logical keyboard navigation

now you have logical:


up tab

back <-|-> forward

down tab

Navigation @ top right

  • Is more efficient with many tabs
  • from above picture, and a righthand tabbar, tab switching can be done with scrollwheel, and not far away just above the tabbar are the navigation icons

Session management

Removing location go button

To save some space (this time horizontal): In the location, type this:


and then you'll see a long list, with a search box above. In the search box type:


and a couple of lines down, double-click on the line


so it then says true.

Removing search go button

To save some space (this time horizontal): this is already uncommented in the userChrome.css above:

/* remove the search button (magnifying glass) */
.search-go-button-stack { display: none !important; }

Maximum Vertical Space

  • this is optional, only for when vertical space a real problem or for giving presentations: autoHide

Spellcheck tweak

  • To enable spellchecking generally, in the location, type this:


    and then you'll see a long list, with a search box above. In the search box type:


    and double-click on the line to change the value from 1 to 2

Javascript timeout

  • getting the "Unresponsive Script" warning? This can happen if you have an slow CPU, or just that you have a large javascripts running (e.g. AJAX sites), you will need to increase the timeout for a running javascript:


    and then you'll see a long list, with a search box above. In the search box type:


    and double-click on the line to change the value from 10 (the default) to 20 or 30.


  • Petname (version 0.18 or newer needed for Firefox 2.0)

  • IDND
    • optional, not really needed if you use Petname
  • NoScript
    • set to disable (javascript) in general, and only enable for explicitly allowed sites.
    • also set to block java, and flash
    • this does interrupt the general easiness of browsing, but if you can put up with always enabling for sites as you browse, it prevents trackers and ads, and is generally much safer, and allows more control over executables (scripts) running in your browser. If there was a compromise that was slightly less secure, but without the need to constantly enable for sites, I would use that.
  • Secure Login
    • more secure and easier


Security prefs

  • add as many CRLs as you can http://crl.verisign.com/
  • ...add all CRLs that are less than 2 weeks old, but delete any that give you errors

(click image for detail)

  • set each of them to update every 7 days
    • or possibly 14 days if you are less concerned about security, or want to reduce bandwidth
    • it is also possible to set 1 day before as in this picture (but I do not know if this works well)

  • do not turn on "OSCP ...for those that specify..."
    • this is because it is buggy (as of Firefox 2.0.0.x), so this setting will be good only when the bugs are fixed

Privacy prefs

  • RefControl (set 3rd party forging) then never need to look at this again
    • the context menu item is disabled in the userChrome.css above (thanks James)
  • Accept cookies from sites (until I close Firefox). Note that then you will have to explicitly (once) set sites where you want the cookie saved between sessions, to do that install...
  • Permit Cookies (then get visual feedback if cookie kept permanently for this site, plus can add site with a single click)
  • 3rd Party Cookie blocking:

Firefox has a setting (see "about:config")


that controls 3rd party cookies. The default is 0 (0 = allow all including 3rd party)

you might want to set this to 1 (1 = all 3rd party cookies are blocked)

See http://kb.mozillazine.org/Network.cookie.cookieBehavior for more info. There are test websites to verify the behaviour of this.

  • 3rd Party Image blocking - note I have not tried this, and do not recommend it due to commonly having a separate image server:

Firefox has a setting (see "about:config")


that controls 3rd party images. The default is 1 (1 = allow all including 3rd party)

you can (but shouldn't) set this to 3 (3 = all 3rd party images are blocked)

See http://kb.mozillazine.org/Permissions.default.image for more info.

Crash session management

  • Firefox 2.0 has this built in, so...
    • Tab Mix Plus coexists with Firefox 2.0 crash recover. Do not select "Use Firefox's built-in session store" so it uses the Tab Mix Plus crash recovery (mainly because it gives you more options for session restore, which I use much more than crash recovery)

Session management

  • configure Tab Mix Plus for that (set to save and store automatically, with restoring previous session if last one is empty)


  • IPv6 DNS lookups might cause a slowdown, so disable them (you'll know if you are using this)
    and then you'll see a long list, with a search box above. In the search box type:
    and double-click on the line to change the value from false (the default) to true.


  • just remove those link underlines

Web 2.0

  • Because you're running a standard Firefox, you're free to choose favourites from all the extensions.

Definitive font configuration

This is for Linux. Windows/Mac users can skip most of this and just select the font choices (in bold).

I've found this is great for modern LCD screens, with modern X (i.e. Xorg >=7.0 , fontconfig, Freetype2 compiled with Bytecode Interpreter (BCI)). This is the result of combining the most definitive (but still conflicting) guides (best guide, FAQ, Kanotix, web, Suse, Gentoo, Mandrake, old, old) eventually extracting the important details.

  • Install the Microsoft webcore fonts (see one of the the many guides on how to do this for your distribution)
    • remove the Symbol font symbol.ttf
  • Install Microsoft Tahoma font for use in your desktop (it is included in the webcore fonts download above) e.g. KDE/Gnome (you will need a Windows licence to use this, unlike the webcore fonts which need no Windows licence)
  • Now the difficult bit, which is in 2 parts. Difficult part 1:
    • a) The directories containing your TrueType fonts should have fonts.scale and fonts.dir files. To create those, do this in each of the directories:
    • b) ...and for future reference below, any directories containing your Type1 or OpenType fonts should have fonts.scale and fonts.dir files. To create those, do this in each of the directories:
    • c) Now install the fonts for the modern client side X-Window font system (In fact a) and b) are not needed by the modern font system, but I always do that to allow the old font system to have access too.):
    • Now you need to tell the font system to use the fonts (Kanotix, and Debian), so you will need to stop your current X session, configure then restart it:
      telinit 3
      fix-fonts -e
      dpkg-reconfigure fontconfig-config (answers:native - automatic - yes) (or if you do not have BCI - answers:Autohinter - automatic - yes)
      telinit 5
  • part 2. (KDE control panel kcontrol has these settings):
    • turn on antialiasing
    • turn on sub-pixel hinting (RGB)
    • Hinting Style: Full
    • Exclude range: 0.0 - 9.0pt (or 0.0 - 5.0pt if no BCI or autohinter or they don't give you good results)
  • Firefox fonts

    • Default font: Verdana, 16pixel (this is set from the settings below)
    • Set Proportional: Sans Serif, 16pixel
    • Set Serif: Georgia
    • Set Sans-Serif: Verdana
    • Set Monospace: Lucida Sans Typewriter, 12pixel (my favourite font out of these monospaced, but you'll have to put up with ugly non-antialiased italics) (not a clear winner, so you may want to...)
      • alternatively Set Monospace: Lucida Console, 14pixel (2nd favourite)
      • alternatively Set Monospace: Andale Mono, 14pixel (3rd favourite font)
      • alternatively Set Monospace: Bitstream Vera Sans Mono, 12pixel (4th favourite font, not good non-antialiased)
      • alternatively Set Monospace: DejaVu Sans Mono, 12pixel (5th favourite, as Bitstream Vera Sans Mono and with problem with 12pixel m)
    • Set Minimum font size: None
      • alternatively Set Minimum font size: 9pixel (if you use MathML a lot)
    • Allow sites to choose own (default)
    • (This is for the default Firefox US English settings of Western, Western (ISO-8859-1))
    • Konquerer can be set to the similar settings
  • The above is for modern 100dpi screens, but for lower like 72dpi, you should only need to reduce the font sizes slightly (15pixel, 15pixel, 11pixel, and exclude range 0.0 - 9.0pt)

  • Have it your way:
    • Some people like skinny fonts. i.e. medium sized fonts (8-16pt) should not use antialiasing, but just be thin. For this, just increase the Exclude range to 0.0 - 16pt (see above). This might be more relevant for 72dpi screens, as 100dpi screens can antialias these fonts quite well.

Liberation fonts

  • Get them from Redhat. Install these TrueType fonts as above.

These are OK but not as good as the best selection above. At least you should change the Monospace to Lucida Sans Typewriter.

Microsoft Vista fonts

  • First of all be aware that Firefox 2.x does not support OpenType fonts such as these. Support will start in Firefox 3.0. If you want to know what you're missing until then, do this ...First download and install them (alternate download)
    • Linux:
      cabextract PowerPointViewer.exe
      cabextract ppviewer.cab
      then rename *TTF to .ttf
  • For those that feel they just must use the new Vista fonts for Firefox:

(setup for using the new Vista fonts)

But... surprise!... this isn't the best setup! The best configuration remains unchanged (above).

Alternatively, if you really, really like the new Vista fonts in Firefox, don't forget to change all the respective fonts in other settings here.

OS font configuration

  • Now the rest of the system - Linux desktop fonts (KDE control panel kcontrol has these settings) (Windows users have this by default):
    • set to Tahoma 8pt for all except...
    • set Fixed width to: Lucida Sans Typewriter 9pt (good for terminals) (note that this is a fixed width (i.e. monospaced font) but some systems might not recognise it as such, preventing you from selecting it) (not for Windows users)
    • Again, this is for 100dpi screens, for 72dpi screens you might want to use 8pt, and 8pt
  • Now the Firefox menus (controls all GTK+ 2 apps)
    • Gnome users go into your gtk config program. KDE users use the control panel or edit the file ~/.gtkrc-2.0 and put in Tahoma 9 (in 2 places) (not for Windows users)
    • Again, this is for 100dpi screens, for 72dpi screens use 8pt
  • Substituting Ugly fonts
    • These bitmap fonts get substituted by Truetype fonts in browsers etc (not for Windows users)
    • Helvetica -> Verdana
      Times -> Times New
      Courier -> Courier New
      Palatino -> Georgia
      Lucida -> Lucida Sans
    • and these Truetype fonts get replaced Bitstream Vera Sans, Bitstream Vera Serif (hinting is allegedly not good)
    • If /etc/fonts/local.conf does not exist, then create and use the following text. If the file already exists then merge by removing the first 3 lines and last 1. (Note that the proper way of doing this here did not work for me.)
      <?xml version="1.0"?>
      <!DOCTYPE fontconfig SYSTEM "fonts.dtd">
      <!---add directories to fonts-->
      <!---#### webfonts ####-->
      <!---# put quality web and others here-->


      <!--- Enable sub-pixel rendering (change details as needed) -->
      <match target="font">
      <test qual="all" name="rgba">
      <edit name="rgba" mode="assign"><const>rgb</const></edit>
      <!--- substitute TT fonts (change for your preferences) -->
      <match target="pattern">

      <test qual="any" name="family">
      <string>Bitstream Vera Serif</string>
      <edit name="family" mode="assign">
      <match target="pattern">
      <test qual="any" name="family">
      <string>Bitstream Vera Sans</string>
      <edit name="family" mode="assign">
      <!--- substitute bitmap fonts (change for your preferences) -->
      <match target="pattern">
      <test qual="any" name="family">
      <edit name="family" mode="assign">
      <match target="pattern">
      <test qual="any" name="family">
      <edit name="family" mode="assign">
      <match target="pattern">
      <test qual="any" name="family">
      <edit name="family" mode="assign">
      <string>Times New Roman</string>
      <match target="pattern">
      <test qual="any" name="family">
      <edit name="family" mode="assign">
      <string>Courier New</string>
      <match target="pattern">
      <test qual="any" name="family">
      <edit name="family" mode="assign">
      <string>Lucida Sans</string>

  • Apple OS X fonts:
    • Download them and install the Truetype files (.ttf) in one directory (follow method above), and all others (Type1) in another (mkfontscale ; mkfontdir). You will want to rename some of the files to fix inconsistent upper/lower case filenames (especially the extensions).
  • Best font for programming - I have heard that PragmataTM is good (hint test copy please), but currently I just use Lucida Sans Typewriter as listed above.
  • Last tip - if you are booting off a CD (Kanotix, Knoppix etc), then you can still use these fonts by using the Control Center/System Administration/Font installer, or just add new directories and other system wide things in the /etc/fonts/local.conf .

Definitive font configuration (additional for MathML)

  • Math fonts:
    • install Math1, Math2, Math4 - see instructions (note you can use unzip or wine to unpack the .exe file on Linux).
    • install MT Extra (use cabextract MathTypeTrueTypeFonts.exe )
  • Acrobat fonts:
    • install the fonts <Acrobat directory>/Resource/Font (mkfontscale ; mkfontdir)
  • Symbol font:
    • if you have installed the Acrobat fonts, this includes a Type1 symbol font, so you will already have a working symbol font. However, also installing the following Truetype one will give much better quality...
    • install a Symbol font (not the Microsoft webcore font, as noted above)
  • Now first test your MathML, in particular















    • And then you'll see that you need to fix the Firefox MathML font configuration (advice source, mathml.css advice) using:
      • <profile dir>/chrome/userContent.css file (included here is the whole file, which can alternatively just be added to an existing file)
        /* if you find you have a sans-serif math font, (as I have) then you might want to define "normal". Note this will not change the default (i.e. when mathvariant is not given) so this will result in a difference between the two */
        [mathvariant="normal"] {font-family: Euclid;} /* math font */
        /* [mathvariant="normal"] {font-family: Georgia;} */ /* normal serif font */
        [mathvariant="script"] {font-family: Euclid Math One;}
        [mathvariant="bold-script"] {font-family: Euclid Math One; font-weight: bold;}
        [mathvariant="fraktur"] {font-family: Euclid Fraktur;}
        [mathvariant="bold-fraktur"] {font-family: Euclid Fraktur; font-weight: bold;}
        [mathvariant="double-struck"] {font-family: Euclid Math Two;} /* correct */
        /* [mathvariant="double-struck"] {font-family: Euclid Math Two; font-weight: bold;} */ /* some might prefer */
        [mathvariant="monospace"]{font-family: Courier New;} /* fix to a serif monospace */
        /* [mathvariant="monospace"]{font-family: FreeMono;} */ /* fix to a serif monospace */
        /* [mathvariant="monospace"]{font-family: monospace;} */ /* generic monospace - may be serif or non-serif */

        /* defining these should not be needed, but if you do state them, synchronise with the above fonts */
        /* [mathvariant="bold"] {font-family: Euclid; font-weight: bold;} */ /* math font (bold) */
        /* [mathvariant="italic"] {font-family: Euclid;} */ /* math font (italic) */
        /* [mathvariant="bold-italic"] {font-family: Euclid;} */ /* math font (bold-italic) */

        /* defining these should not be needed */
        /* [mathvariant="sans-serif"] {font-family: Verdana;} */ /* sans-serif font */
        /* [mathvariant="bold-sans-serif"] {font-family: Verdana; font-weight: bold;} */ /* sans-serif font */

        /* defining these should not be needed, but if you do state them, synchronise with the above fonts */
        /* [mathvariant="sans-serif-italic"] {font-family: Verdana;} */ /* sans-serif font */
        /* [mathvariant="sans-serif-bold-italic"] {font-family: Verdana; font-weight: bold;} */ /* sans-serif font */

        /* modified from /usr/share/firefox/res/mathml.css */math {
        direction: ltr;
        unicode-bidi: embed;
        display: inline;
        font-size: inherit;
        font-style: normal;
        font-family: CMSY10, CMEX10, OpenSymbol, Standard Symbols L, Symbol, Times New Roman, Euclid, Euclid Math One, Euclid Math Two, Euclid Fraktur, Euclid Symbol, Euclid Extra, MT Extra, Math1, Math2, Math3, Math4, Math5, Fences, Georgia, Arial, serif, Lucida Sans Unicode, Lucida Grande; /* maximal version */
        /* font-family: CMSY10, Symbol, Times New Roman, Lucida Sans Unicode, MT Extra, Math1, Math2, Math3, Math4, Math5, serif; */ /* minimal version */

    • Now retest your MathML (as above). On my system, this fixes the default MathML font to be a serif, but note that my overall font preference is still sans-serif, which can lead to sans-serif texts as in the glyphs test above.

Printing (Linux KDE)

  • Better integration with KDE printing by using kprinter
    • print to PDF
    • multiple pages per side etc
    • bypasses Firefox printer selection dialogue

Instructions .

  • Note that for unusual printing (frames etc) the now hidden options can be made visible by temporarily toggling: print.always_print_silent
  • To make it possible to print the selected frame use Print (the context menu seems logical to me) . For printing selection, you will need to still toggle as above.


  • If you need a faster browser, and Swiftfox has a build for you, then grab a Swiftfox build, or other as listed above.
  • Vertigo (currently not available for Firefox 2.0). It did provide a better vertical tabbar.
  • If you create any small browser windows (which I normally don't, due to good tab management), for example, to run a plugin like a YouTube video, then the wide tabbar is annoying. If that is annoying, the fix is to configure TabMixPlus to hide the tabbar when there's only 1 tab.

Widefox for Firefox 1.5.0.x (obsolete as of Firefox 2.0)

  • News November 2006 - I've seen reports of Vertigo not working on . The obvious thing is move to Firefox 2.0 . I haven't verified this myself, and Vertigo appears to be dead, so the workaround is to use a userChrome.css to get a vertical tabbar - the one at Mozilla wiki site should do it (the page I flagged as not working in Firefox 2.0). I have not tested this - please mail me if this does or does not work.
  • For Firefox up to to get vertical tabbar use Vertigo (currently not available for Firefox 2.0) - and ignore the userChrome.css above

Instead of Aging Tabs to highlight the current tab, can use this:

Add this to your <profile dir>/chrome/userChrome.css file (included here is the whole file)

* Edit this file and copy it as userChrome.css into your
* profile-directory/chrome/

* This file can be used to customize the look of Mozilla's user interface
* You should consider using !important on rules which you want to
* override default settings.

* 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 */

/* Change color of active tab */
tab{ -moz-appearance: none !important; } tab[selected="true"] {
background-color: rgb(0,0,0) !important;
color: white !important; }

  • ignore the outdated places and google search box in the top picture
  • This is not relevant for Firefox 2.0 - Places opening in a tab (see below). How - create a new tab, then type "chrome://browser/content/places/places.xul" in url bar, and add to toolbar bookmarks

  • For Firefox 1.5.x only - turn off SSL 2.0 (Firefox 2.0 has this completely removed, as per image)


Torly with a left tabbar.
Samuel with a Dual monitor left screen tabbar.

(click image for full size)

Quinn1981 with a right tabbar.

Martin with the BlueIce theme on a mac.

(click image for full size)


userChrome.css version 1.0.2 fixes a Mac bug. The default Firefox 2.0.0.x theme on a Mac incorrectly placed tabs in the centre of the tabbar instead of at the top. The workaround was to use another theme (e.g. BlueIce as above). 

(click image for full size)

More details?