WhatwasIthinking.co.uk

With the arrival of FireFox 3 (and its record-breaking amount of downloads in its first 24h) more and more of us web architects and web developers are getting rid of their beloved FireFox 2 installation and are moving all their bookmarks, themes and extensions to version 3 of the popular browser. And rightfully so, version 3 is faster, much more stable and its updated Gecko engine is displaying your website creations in the best possible way… or is it?

I came across a couple of odd bits when developing a website - it seems like Firefox 3 is displaying a floated element’s width of 100% correctly, whereas FF2 would not fully acknoledge the width unless the element was previously set to “clear: both;” (or something along those lines, unfortunately I am still relatively new to the CSS cut-up world.

So we decided to install FireFox 2 again on the design-machines next to an existing FireFox 3 installation without causing any issues with the extensions or other settings between the browsers. I got it to work pretty much instantly on the first go, but since colleagues and friends were asking about how to get FireFox 2 to work with FireFox 3, here is a quick step-by-step guide after the break.

.

Step 1) Install FireFox 2 Portable

Quickest way to get FireFox 2 to work without any problems is if you grab hold of FireFox 2 portable. Get it from PortableApps.com (direct link to FF2Portable) and install the application, ideally into a separate folder (such as ‘C:\Program Files\FireFoxPortable’)

.

Step 2) Enable FireFox 2 to run next to FireFox 3

Firefox 2 Portable will not allow you to open another instance of the browser by default. What we need to do now is to make sure FireFox 2 Portable allows us to still use FireFox 3. Download the file ‘FirefoxPortable.ini’ below and put it into your install directory:

Please download the file here: Firefoxportable.ini (644 bytes)

.

Step 3) Install all your extensions for FireFox 2 Portable

Lastly, all you need to do is to get your favourite development addons onto FireFox 2 Portable. This works in the same way as you would install any addon for FireFox (1, 2 or 3), and to ease your search, here is my recommended list:

• FireBug - Probably THE most useful addon of the lot. You will need to install a previous version, which you can find here
• FireFox Accessibility Extension - this tool aids developers in testing websites to accessibility standards and under conditions such as not having CSS or scripts enabled. Furthermore, it allows users to test their website according to standards such as Section 508 or WAI. Download the addon from here
• Fangs - A very very useful and powerful screen reader emulator. You can get the addon from here
• Web Developer - another nice toolbox for testing your website with a number of tools, cookies, image and source options. Download the addon from here

.

Well, there you have it, FireFox 2 running alongside FireFox 3 as a standalone without any problems.