Running multiple Firefox versions side by side on Windows

Whenever you upgrade your Firefox, the new version will overwrite the previous one. If you want to open multiple Firefox versions side by side, here's my way :

• First, uninstall all your previous Firefox installation(s). Make sure to backup any important data beforehand (I personnaly use MozBackup to do that).
• Then install the latest available stable version. This will be the main Firefox version, the one you'll be using on your dayjob and the one you'll always update.
• Now run the Firefox ProfileManager. To do that, create a shortcut to your firefox.exe file, then edit this shortcut. In the "Target" field, add -Profilemanager.

My field looks like : "C:\Program Files\Internet\Firefox\firefox.exe" -Profilemanager

• You now have to create one new profile for each FF version you plan on testing. Give them meaningful names. I named mine "FF3.0".
• Now download the corresponding Firefox version from oldversion.com
• Do not install it, but extract its content (using a archiving tool like winrar or 7-zip) in a tmp directory. Remove the optionaldirectory as well as removed-files.log and setup.exe.
• Copy the content of localized/ into nonlocalized/ (overwrite files if asked).

• You can now rename the nonlocalized/ directory and move it around on your hard drive. I renamed mine to Firefox 3.0/ and put it alongside the main Firefox, in C:\Program Files\Internet\Firefox 3.0\

• Create a shortcut to the firefox.exe file in this directory and edit the target field. This time, we have to specify which profile to use. Just add -P "FF3.0" -no- remote in the target field.

Mine now looks like C:\Program Files\Internet\Firefox 3.0\firefox.exe" -P "FF3.0" -no-remote

That's it.

Now, just run your classic Firefox shortcut to open the most up to date Firefox version, and use the custom shortcuts to open previous versions.

I personnaly also rename the different firefox.exe to firefox30.exe, or firefox35.exe to more easily spot them in the taskmanager.

I also edit each .exe with ResHack to change their taskbar icons. I haven't yet managed to change their title.

Edit : Now I can't open .html files directly from the explorer nor follow links from my IM. I still don't know exactly what of the steps above caused that.

Changing Firefox language

I'm French, live in France, but usually prefer having my software in English.

This is so because english words are generally shorter (and thus fits more easily in a GUI) and most of the time french translations aren't optimal.

I just download the latest Firefox version from their website, and without knowing it, it was a French localized one. They do some sniffing on the user agent string and automatically download the corresponding file.

That seems a great idea, but I prefer my software in english, so I searched for a en-US.xpi file to update firefox. It does exists for any other language, but not for en-US, this being the default language, as stated in this bug report.

It seems the only way to have an english Firefox is to download the english version, there is no way to change it afterwards.

You can type about:config and change the general.useragent.locale value to en-US but it does not update the main language, only tell plugins to use that language (AFAIK).

Changing the language in the options only change the user agent string.

Well, I had to backup my profiles, uninstall FF, download the english version and reinstall it.

How to select the first element of a given class

Imagine the following HTML code :

<div class="wrapper">
[... various HTML elements ...]
  <div class="bar">bar</div>
  <div class="foo">foo</div>
  <div class="bar">bar</div>
  <div class="foo">foo</div>
</div>

How would one style the first div.foo ?

I've tried div.wrapper div.foo:first-of-type but unfortunatly it does not work. In fact the previous rule can be translated into "select the first child of div.wrapper only if it is a div.foo" and not "select the first div.foo inside div.wrapper" as I imagined.

Using jQuery I could do a $('div.wrapper div.foo:first') but there's no such selector in CSS.

The blockquote cite attribute

The HTML blockquote element can accept a cite attribute that is supposed to hold the value of the source URI of the quote.

Browsers behave differently when getting this attribute in javascript. Opera and Firefox automatically treat it as a URL, prepending the current domain host if none is defined and encoding special characters.

Safari and Chrome on the other end just return the value as it is present in the HTML.

Setting the size of a tab character in a pre element

When displaying code in an HTML page, you often want it to be correctly indented with tabs. Unfortunatly, setting a white-space:pre(like is the default on a

 element) to an element will transform any tab in the
equivalent of 8 space characters.

8 is way more than needed, 4 will be much suited, specially in a website design where the horizontal space is limited.

I've googled a lot, going from obscure old CSS drafts to proprietary implementation mailing lists, browsing CSS codes.

One interesting discussion can be found here, there even is a proposal for a tab-stops property on the W3C

Opera has a proprietary -o-tab-size. You just have to pass the number of space characters that should be used.

That's all I have for now...

I know I could replace every\t with 4  , or with a <span> that I'll style to match the desired width but it involves a back-end processing and I would have liked to style it directly.

Edit : There seems to have a -moz-tab-size property on the latest Firefox 3.7 nightlies