Joomla and Testing in Internet Explorer 6, 7 and 8

One of the major headaches for Joomla developers (and all web developers for that matter) is the non-conformities between Internet Explorer versions 6, 7, and 8. Almost anyone that has built a serious website will tell you about the headaches of trying to get a website to look presentable in all browsers and having to add custom css. This is especially true for IE6 which has a nasty habit of destroying web pages that use certain css formatting and/or transparent png images. But rest assured, there are a number of applications and tools that you can use to combat this major design nuisance.

Firstly, you’ll want to make sure you buy a top quality template that has been tested ahead of time in various browsers. This will save you hours of time which is worth it for a few extra bucks. For Joomlaphiles, I always recommend Rockettheme because they have not only tested their site in IE 6 and 7 but they have nice clean css files that you can add your own tweaks to.

Next, you’ll want to install two applications. Install the IE NetRenderer add-on for Firefox which will allow you to see what your website looks like in each IE version and allows you to overlap the images and see the subtle differences. It’s good for a comparing but only gives you snapshots so it isn’t a complete solution for viewing and editing the css of your entire site. So the next thing you’ll want to check out is MultipleIE – a stand-alone installation of Internet Explorer 6 (and some earlier versions) which runs in Windows 2000 and and later and allows you to have more than one installation of Internet Explorer on one PC. Even though it is a bit unstable and crashes occasionally (because it is not actually integrated in to the OS like your regular IE install), it allows you to navigate a site in IE6 and look at various pages while you manipulate the css. Very handy.

And while we’re on the topic, make sure you have upgraded your normal version of internet explorer to version 8.0. There is a handy little compatibility button that allows you to view a site as it would look using Internet Explorer 7. And naturally, you’ll want to do all of your development in Firefox using Firebug to identify the css that you want to change to clean up IE6 and 7.

Finally, if you’re concerned about how your pages look in some other browsers like Safari or Opera, then you can also use Browsershots to get some free snapshots of your site to look at. Most of the time, if you’ve perfected the look in Firefox and each version of IE, you shouldn’t have much to worry about with the other browsers.