A lot of users like the new layout of Internet Explorer 7 but still prefer to use Firefox. I must admit myself that out of the box, IE7 looks light and fresh in comparison, but I still prefer to use Firefox. So if you're one of those users who thinks IE7 did a great job on the new interface, here's how to mimic the look in Firefox.

• View an animated example of the new look here

Limitations

Of course there are limitations and you will not be able to make Firefox look exactly like IE7. The biggest reason for this is IE7's new command bar shares real estate with the tab bar. Also, the command bar and extra buttons on the tab bar allows users to function fine without the menu bar.

The Process

Taking a look at IE7, we see Microsoft fit everything onto two bars at the top. The first part of the process then is to move everything on to one bar and have the FF tab bar visible by default.

Turn on tabs by default

• Under the "Tools" menu, select "Options..."
• Select the "Tabs" icon
• Check the option labeled "Always show the tab bar."
• Click Ok

The tab bar is now visible all of the time, even with only one tab open.

Condensing items to the menu bar

Since removing the menu bar would be a huge dent in Firefox's usability and the menu itself cannot be moved, we will move all items from the navigation bar to the menu bar. Items will have to be dragged before or after the menu itself, preferably keep the menu just to the left of the search box. Here is a quick order of arrangement: Back/Forward buttons, separator, new tab button, location bar, stop/home buttons (additional buttons fit best here also), separator, MENU, search bar.

• Right click on an icon or the menu bar and select "Customize."
• Drag and drop items on the navigation bar onto the menu bar.
• Drag and drop unwanted items back onto the open dialog box.
• Make sure the navigation bar is empty and click "Done."
• Remove the navigation bar by right clicking again and unchecking it.

You will have noticed in the screenshot that I taken out the refresh button. You may opt to keep it but I find the "Go" button (attached to the location bar) also works nicely for refreshing although it doesn't remember the position of the page you were on. You could also use the keyboard shortcuts F5 or Ctrl+Shift+R.

Menu bar workaround

It's definitely looking closer except for the menu taking up a good amount of our limited space. We can't turn it off but what we can do is have it slide into view when rolling over an indicator. Another option is to use the "Tiny menu" extension which shows the menu in a drop down list once clicked on, but the downside is it adds that extra click.

To have our menu slide in we need to add some CSS to the userChrome.css file. Depending on your operating system, the path to the file is (where xxxxxxxx is a random string of 8 characters):

• Windows XP/2000: C:\Documents and Settings\[Username]\Application Data\Mozilla\Firefox\Profiles\xxxxxxxx.default\chrome\
• Linux: ~/.mozilla/firefox/xxxxxxxx.default/chrome/
• Mac OS X: ~/Library/Application Support/Firefox/Profiles/xxxxxxxx.default/chrome/

Once the file has been located, open it in a text editor and add the following CSS after the "@namespace url(..." line:

/* Show the menu indicator (background image) by adding padding to the left */
#menubar-items { background: url("data:image/gif;base64, R0lGODlhIgAMAJECACwsLHZ2dv///wAAACH5BAEAAAIALAAAAAAiAAwAAAIylI+py+0Po5zUgCuwBZtnewSCmHjm951nOJZgenHqy5LvfOCeIdr3vTJpWr6K8YhMLgoAOw==") no-repeat 3px center !important; padding-left: 42px !important; }
/* Don't display the menubar by default */
#menubar-items > #main-menubar { display: none; !important; }
/* When hovering on the indicator, show the menubar as a block element */
#menubar-items:hover > #main-menubar { display: block; !important; }
/* While showing the menubar, remove the indicator and it's padding */
#menubar-items:hover { background: none !important; padding-left:0 !important; }

Save your file as userChrome.css if you used the example file. You'll notice that I've included comments on each CSS line if you wish to understand how this is done.

The long line of jibberish set for the background url is a base64 image. Basically this is just an image drawn by code (encrypted) and it eliminates having to find an external image file to use.

I've included extra code for more base64 images so you may select your own. Simply replace the data in the CSS background element (between the quotes) with one below. The images below show what the image will look like:

data:image/gif;base64, R0lGODlhIgAMAJECACwsLHZ2dv///wAAACH5BAEAAAIALAAAAAAiAAwAAAIylI+py+0Po5zUgCuwBZtnewSCmHjm951nOJZgenHqy5LvfOCeIdr3vTJpWr6K8YhMLgoAOw==

data:image/gif;base64, R0lGODlhIgAMAJECACwsLHZ2dv///wAAACH5BAEAAAIALAAAAAAiAAwAAAIylI+py+0Po5z0BAOy0Bh0v2HGhZDh6YGpqFru0YaZ1sbji7JILd5lH+MEOaaK8YhMLgoAOw==

data:image/gif;base64, R0lGODlhDQAFAJECAJ+fnzo6Ov///wAAACH5BAEAAAIALAAAAAANAAUAAAIRlGASida22EmhVvlUmo5KUQAAOw==

data:image/gif;base64, iVBORw0KGgoAAAANSUhEUgAAADsAAAAVCAYAAAD4g5b1AAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAFgSURBVHja7FdLioQwEE1UxK249jwuPYp4EvEoLr2NC3ci7sS/zQtExLFnSFpKZpwHweoiZdXLK0ubr+vKVBAEwYqYaZqYauyn4Jwzy7LENc9zrhpv6ST0fZ8Nw8CWZSElaxgGs22blWWpFa9MFoqO43gbWRw2aiAhC6IgOc+zWJQwTVPkRg0kZPu+F+sOZXG4UBb5yZSVquq2ky4wnJCXTFlJUpKmBKY/Wlk3rzLZrus2wneQRU7UQDaNz57ZJEk2O47j7Tfs4x7pO8ZI35ktuwoTmWwaIyFOGOs4oKIoEtc0Tb/YZ753Mfv77m0MJ6kuCdm2bVlRFFs77wH/dzYIHX1n+97dB8+r4ziiBjJldRGG4WWvIBKyuu9WEM2y7EfS+31X18BVP+Zd1109zzttY4ovKLRxXdesaRrlPwIGlbJXQrcGgz0I/2T/KqxPgjEwHkEWU/ERylZV9Svb+CXAABWcIp4Rd7NpAAAAAElFTkSuQmCC

data:image/gif;base64, iVBORw0KGgoAAAANSUhEUgAAADsAAAAVCAYAAAD4g5b1AAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAIKSURBVHja5FjbisIwEE1r8UHBDxBE/08F7z+hePk/EW/45ouID966e4adMMa6trWmuzgQMk2nSc+cyWRax/d99SniRX3A//GObSc5jsO9Yw0sZLfbqcvlYg0w8GUyGVUoFKwzS+16vVoF67ourfcCsfGYBauS2d9eIIyNaRsE9hWQiTAb9bk4dswmr2sdLLMKwOz1JDwvwbCOHiGcRI6IFcYAicXNTBk2oz5jUkYQtySc6cYBymDZ251OR7XbbWp4KdYlSFy3Wi09Bh1N2mEeBtrr9XQUofG6qexZUx8MBgQKAIbDIY0DyGg0Us1mU43HY7JrNBo0BoEdA2cdIcugJKup7Nntdqtms5k6HA60eDabpfH5fE5nIWS5XGr7zWajQZpj6/VaA4AOWa1WeotMp1N1PB4JbC6XI0cUi0V7YOVeld7mZMW6ad/tdnVYns/nu7kkm2HWthbG3MtEdTqdtA42WKDX63XV7/fpulqt3txjgQNqtZqaTCY3DgjK0LGLk6gTfIerv1gs1H6/pxdE6Hqed1fpQDis5dEUxCaekTbsSMzPa+TzeVUul1WlUnFSY9askjiZoOdwlceODHG2E0V+YNaXTkglG8v6mAGYZ2GYc9X4onlYg6eSjR8dQWGLiCh187P5rYENkzTi1sN/6eOd+le/LZN27NuYLZVK//K3jPNJ/6C+BBgAoJTyLtSr2nsAAAAASUVORK5CYII=

data:image/gif;base64, iVBORw0KGgoAAAANSUhEUgAAADcAAAAWCAYAAABkKwTVAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAMFSURBVHja3FjPSyJhGH797WJYSqYbhH+AEN67BIGw3WQhxFNdlq52y8CDlHvrD9jDbqeKoKt70INFnrxFF8FDieKSpWaZpo7u+3zMgEa3RhgceHH4nHfme+Z53uf9vtENh0Oa1kNPU3wY1byZTqd7/+JMHBb5OYZ3l0scfY43jh7HYPRPNRRlnKAivnA4OJybm5vf7u7uxsB5vV7p6OjoL5/WOOoc7fcAP/2y1aw5mTkFmGd9fT3scrniNzc31O/3x1gxmUzk8/no4eEhlkwmj3n43yhANeY1CXCQoWtlZWWLAcUjkQitra2J/5RnKfJNp9N0eHgIoLFsNvuHh6qyTDUpS7Bm29jYCDWbzThAIS4vL0mSJHp7E/Mmi8UimAsEAlQulymVSsU5p312dvb7o/rTilvCQOwMxlmr1SgUCtH19TW1Wi0Bzmazkdlspm63Sy8vL1QoFCgcDlO9XscLcCJXvocmW4Fle3s76PF4dk9PT+nq6opKpRIZDAbBVjAYpLm5ObJaraTX6ymfz9PFxQWdnJwQcpAry1qT4IzsimZMHMyNGshgMID8hBTtdrtgUKk9XIsc5KpZKmrXnOHp6cnQ6/WEHHO5nGANQBAOh4Oq1aqQ4sHBAT0+PhKuhUzxi9wP+qFmwEmLi4sS5AY5IoxGo5Ak2JqZmRHA9vf3wRI9Pz8Lk3G73SIZuXJz1yS4/vz8fBfgwAScEIyhxiDNvb092tnZodvbW7AkGOt0OrS8vCySkSuvWjTZxGEGX9k0fiwtLe2ijhTbh1PCTOCcr6+vAjwae7vdFsCLxeLPRqPxi/Mr6HVqzEttQ0GPavr9/tqokQAErL9SqRD3PyFFjAGgcp2c05Tvodnll1ih8Npxa3Z2No4xmApqT3FHAEbfQ+CcAce4BlVfoUxiy4M3X+fJHjOYGGQJlhSmFDkiUI8sXQA7lhfPPTUnMgnmxnYF0Wj0eyaTsd7f349Z/MLCgrS6utpJJBLnH+0KtLpw1sx+bpLgPnVoblegte8xU/0N5b8AAwAgWahNHK20TgAAAABJRU5ErkJggg==

Recommended extensions

One of the best Firefox extensions I've used is the "IE Tab" extension which lets you view a page as it would appear in Internet Explorer. Great for designers testing websites or for viewing IE optimized pages without even leaving FF!