Debugging CSS in multiple browsers
After several torturous years trying to debug websites in different browsers using hacks, virtual machines and all manner of inconvenience I’ve finally arrived at a setup whereby launching multiple versions of IE and Firefox is about as easy as it could possibly be. What follows is a simple tutorial on how to set up your PC to do the same. I’ll also mention a few crucial tools that no web developer should be without.
This article will start with Internet Explorer, since that's the browser that often requires the most amount of debugging, but follows with details on how to run multiple versions of Firefox. Developer techniques have reached a sufficient stage now where there should be no need for old-fashioned css or html hacks to be used.
IE has supported Conditional Comments for a long time now. Conditional comments enable you to write additional css styles to cater for different versions of IE and should definitely be your only method for dealing with IE inconsistencies. For other browsers or platforms (e.g. iphone) you can use browser sniffing techniques to identify how a visitor is viewing your site, using the $_SERVER['HTTP_USER_AGENT'] string for instance, and, if absolutely necessary, write alternative code accordingly.
For those who wish to get right down to it I've attached readme style text files for IE and Firefox at the end of this article. These will provide straightforward step by step instructions without all the chaff.
Internet Explorer
For years it's been a bitter irony that the browser requiring the greatest need for debugging - Microsoft's infuriatingly flawed Internet Explorer - has been the one that least lends itself to debugging. Until recently there was no simple way to install any useful tools (unlike Firefox) and the only way to get multiple versions to run was to install a virtual machine. This would require installing an entire operating system, and setting up a VM for each version of IE - all of that simply to correct something that Microsoft should have been doing correctly right from the outset.
However, Microsoft has gone a long way towards atoning for past sins with IE8. Not only does IE8 adhere more closely to web standards than any previous version it also comes with built in debugging tools. If you haven't already installed IE8 then do it right now: http://www.microsoft.com/windows/internet-explorer/default.aspx
Done? Good. The first thing you'll want to do is load up your website then hit F12. This loads up the developer tools window. If you've ever used Firebug and/or Firefox's excellent Web Developer Toolbar you'll find yourself in more or less familiar territory here. Right off the bat one of the most useful things you can do is choose to view your site in either IE8, IE7 or IE8 compatibility mode. Selecting either one of these will instantly show you how your site will render in IE7 or IE8 (note that you can also adjust your ‘document mode' to use standards or quirks mode).
There's a wealth of tools available here that will enable you to test and manipulate almost any aspect of your site - far more than be adequately covered in this tutorial. For my money the HTML and CSS tabs are the most useful - using these you will be able to test out basic html and css edits to your site and see the changes immediately reflected in your browser window. Any changes that work correctly can be copied to your production version.
What about earlier versions of IE? While anyone still using IE6 or (shudder) lower should rightly be beaten with a stick there is at last a tool available for debugging these earlier versions. IETester (http://www.my-debugbar.com/wiki/IETester/HomePage) works like a basic browser, but lets you choose to view your site in anything from IE5.5 to IE8. Not only invaluable, but compelling for those masochistic enough to see how IE5.5 can mangle your finely crafted code.
One last IE trick work mentioning is the new X-UA-Compatible meta-tag. While there's no substitute for correctly debugging your code - if you do have a site that renders perfectly well in IE7, but seems to fall over in IE8 and you're unable to identify the cause you can add the X-UA-Compatible meta-tag to your head section to force IE8 browsers to display the site in a different mode. For instance the following will cause your page to render as if the user was browsing with IE7:
<head>
<meta http-equiv="X-UA-Compatible" content="IE=7" />
</head>
Note that this is only supported by IE8 and should be placed above any linked files, such as css style sheets or scripts.
read on for Firefox...
All you need to do is click on Create Profile and enter a name - do this for each profile you want - just ensure that the names don't have spaces in. It's worth noting that by default Firefox will launch using whichever profile is highlighted in the window, so you will want to ensure that your default profile is highlighted when you hit Exit. Also, unless you want to be hassled each time you start Firefox you'll want to check Don't ask at startup.
The last step is to set up shortcuts for each Firefox install making sure that each version of the browser loads up using the correct profile. First create your shortcuts as usual (if the installation process hasn't already done so for you), ensuring they have distinctive names. Now right click on each shortcut in turn and select Properties. Go to the Shortcut tab and edit Target so it reads something like:
However, developers should at least switch on the developer menu. To do this open Preferences, navigate to the Advanced tab and check Show Develop menu in menu bar. You might need to ensure the menu bar is showing by selecting Show Menu Bar under the tools icon.
