Browser testing is something I have to deal with on a day-to-day basis so I thought I'd share a few tips for making the process less painful I hope it's helpful. Let me know if you have any questions.

 

--------------------------------------------------------------------------------------------

 

Build your site using Firefox (latest version) and Internet Explorer 6

 

By using these two browsers to test your site as you develop it you will be able to nip most css problems in the bud because Firefox is standards-compliant while IE6 is an evil entity that chews web standards up for dinner and spits them back at you. You'll encounter many CSS bugs in IE6 that just *don't make sense* and - believe me - you want to fix them early on in the project when they're easy to find.

 

--------------------------------------------------------------------------------------------

 

Keep your hacks separate

 

I'm not going to go into the necessary evil that is css hacks right now Yes they're not great, Yes you should avoid them if possible, but the web is a deadline-driven industry and more often than not you're going to have to use hacks now and then. Do yourself a favor and keep them all in seperate stylesheets.

 

I recommend building your actual css code for Firefox since it's very standards-compliant, and then creating hacks for IE6 and IE7 if needed. These you can import from the head of your html document using code like this:

 

<!--[if lte IE 6]>
<link rel="stylesheet" type="text/css"   href="styles/ie6.css">
<![endif]-->

<!--[if  IE 7]>
<link rel="stylesheet" type="text/css"   href="styles/ie7.css">
<![endif]-->

 

Also remember to use conditional comments in these stylesheets! For IE6 use your * html hack, for IE7 use your html>body hack, eg:

 

Normal class in your main stylesheet

.hack { margin-top: 0px; }

IE6 version

* html .hack { margin-top: 5px; }

IE7 version

html>body .hack { margin-top: 5px; }

 

--------------------------------------------------------------------------------------------

 

Make sure your code validates

 

I can't stress this enough. If you write valid html and css code it pretty much always works across all standards-compliant browsers, so even if your project doesn't allow the budget to test on every single browser out there you can rest easy knowing your code will behave in the vast majority of those browsers. Also don't forget to set your doctype!

 

I use the Web Developer Toolbar for Firefox and always have "Tools / Display Page Validation" turned on so I can check my validation as I code, but you can also do this manually:

 

Online CSS Validator

 

Online HTML Validator

 

Alternative HTML Validator (for when the W3C one is down)

 

--------------------------------------------------------------------------------------------

 

Test on IE7 but don't install IE6 and IE7 on the same system

 

There's some applications out there that let you install a standalone version of IE7 on a system with IE6, or vice versa. Don't do it. While you can run as many versions of IE on one computer as you like there's a big problem with this - they all use ONE rendering engine, typically that of the latest version, which means while your code may look fine on your version it's going to behave differently for someone with only one of the browsers installed.

 

Either test on a completely different computer with only that version of IE installed OR simply download the IE7 install from Microsoft and upgrade to this at the very end of your html build to test for any errors, then when you're happy everything is working uninstall IE7 to revert back to IE6.

 

Genuine Windows IE7 Install

 

How to uninstall IE7

 

--------------------------------------------------------------------------------------------

 

Test on secondary browsers

 

I always test my code on Firefox, IE6 and IE7 because these are statistically the most commonly-used browsers and, as previously mentioned, if my code works on them there's a very good chance it will work fine on the other popular browsers too. However if time and/or the project budget allows I also like to test on the latest versions of the following browsers and operating systems.

 

Windows XP - Safari / Opera / Netscape

 

Mac OSX - Safari / Firefox / Opera / Netscape / IE6 / IE7

 

And if you're really lucky and have an actual testing facility it's also good to test some of the older versions of Internet Explorer (typically 5.0 and 5.5) and Firefox, and also test on older / alternate Operating Systems (Win 2000, Win 98, Unix, etc). But you may not get to do this often, most client's don't want to spend a lot of money on testing and in that case just go for your IE6, IE7, Firefox combo.

 

If you're working in an office where IT lockdown is required you can make use of great free online tools like http://browsershots.org/ to see how your site looks on different browsers and operating systems. There's also paid services out there like http://www.browserpool.com/ which let you test your site live on their machines via VNC.

 

A word of caution to cover your butt - Specify in your documentation which browsers you will make the site compliant for, or you may well end up spending your weekend fixing a site that breaks in IE5 for Mac because the client's mothers-aunties-friend complained about it, even though 0.02% of the actual population uses that browser. Also specify which browsers your site will work perfectly on (typically IE6, IE7, Firefox) and which browsers it will merely function on (some breaking of layout / graphics - typically non-standards compliant browsers like old versions of Opera). Include this in your design specs and make sure the client signs-off on it as browser testing is one of the most time-consuming aspects of a projects and you don't want to have to be doing it for free.

 

Evolt browser download archive

 

--------------------------------------------------------------------------------------------

Edited January 28, 201016 yr by Sam G
added [code] tags

Very good article. I was thinking of writing up something like this myself.

 

I use VirtualPC to test my sites in IE5-6. I found an old Windows98 CD and installed that to a Virtual PC. I then made copied of the VirtualPC and installed the various versions of IE. The good thing about the old Win9x systems is that they're quick to start.

 

The IE dev team even have pre-built free VirtualPC images of IE6 and IE7 available: http://www.microsoft.com/downloads/details...;displaylang=en

 

I also use portable version of Firefox 1 and 1.5 to test older Firefox versions: http://portableapps.com/apps/internet/firefox_portable

 

With Opera it's easy at it has always allowed you to install different versions on the same machine.

 

For Safari I bought a second hand Mac Mini on ebay and have set it up so I can remote connect to it from my main PC using VNC programs. (Though it was somewhat tricky to get Vista to connect to OSX. This article explains what's needed to do: http://articles.techrepublic.com.com/5100-...1-6174105.html)

 

I allways leave IE for the last, making sure my site works in FF 1-2, Safari 2-3, Opera 7.54 - 9 as they for most of the time renders quite similar and pretty much up to par with W3C. Then I add the conditional comments towards the end to do the final adjustments.

Thanks Thomas Legend, I was hoping someone would post links for testing setups. I just bought a 4 gig flashdrive so I'm going to have to try installing alternative browsers so I can test on these at work.

 

Do you find that leaving IE6 until last creates major issues for you or is it usually a quick job to fix the IE6 bugs?

Yea, since most of the rendering bugs in IE is due to hayLayout http://www.satzansatz.de/cssd/onhavinglayout.html it's predictable most of the time. I find it a matter of nudging it and kicking it in the right places, like and old TV.

I echo what ^ said: Really great article, Harmony. Thanks for posting it.

 

Funnily enough, I run FF and IE6 on my computer, just as you said, and I agree that this is a great way to work out the two extremes of how your code will appear to the majority of users. I've seen arguments in the past (here, I think) for doing away with IE6 testing, but I think it's still definitely got its purpose.

 

A word of caution to cover your butt - Specify in your documentation which browsers you will make the site compliant for, or you may well end up spending your weekend fixing a site that breaks in IE5 for Mac because the client's mothers-aunties-friend complained about it, even though 0.02% of the actual population uses that browser. Also specify which browsers your site will work perfectly on (typically IE6, IE7, Firefox) and which browsers it will merely function on (some breaking of layout / graphics - typically non-standards compliant browsers like old versions of Opera). Include this in your design specs and make sure the client signs-off on it as browser testing is one of the most time-consuming aspects of a projects and you don't want to have to be doing it for free.

 

This is a great piece of advice! I thought I had the most clause-ridden contracts in the world but hadn't considered this aspect. I'll definitely be adding a "browser compatibility" clause on the next update.

That is really top stuff! Thanks for posting that Harmony.

 

Wow!

Thanks guys, I'm very glad it's useful info I've also started using http://browsershots.org/

to test my work since I'm in IT lockdown at my current job, it's such a nifty tool.

I have to hand it to you for the browsershots website best thing since sliced bread

Great post harmony.

 

Just thought I'd add a few things as I bought a new pc lately with vista and the ie7 uninstall is for xp only. So I looked into other methods and decided against virtualPC as it was time limited so I went for dual boot with Ubuntu and added 'wine' and ironically you can test all IE 5, 5.5, 6 and 7 very accurately.

 

I say accurately because I had some experiences with the browser rendering websites that didn't accurately portray IE6 and I only found out from a clients machine!

 

Ubuntu was surprisingly easy to install and a refreshing change and xamp installs like a dream so I'd recommend it to anyone for testing purposes.

 

Cheers Kieron.

Ubuntu was surprisingly easy to install and a refreshing change and xamp installs like a dream so I'd recommend it to anyone for testing purposes.

 

Which release of Ubuntu are you using? I'm using 6.06 (Dapper) and I'm having the devils own time installing ies4linux on it. Any advice on this front would be very much appreciated. The ubuntu forums are excellent of course, but this seems to be a hard to solve problem. Do you think I should just bite the bullet and upgrade to Gutsy? I've heard it's a bit unstable, that's all.

 

Having said that, I'm never going back to windoze or mac - linux is better than I could have hoped for.

 

Really great thread though - thanks everyone!

Which release of Ubuntu are you using? I'm using 6.06 (Dapper) and I'm having the devils own time installing ies4linux on it. Any advice on this front would be very much appreciated.

 

 

Hi there - sorry been away and only just noticed this question!

 

I'm using Gutsy desktop edition on a pc - if you're using a laptop I know some people have mentioned problems with their hard drives knackering and others saying its been over egged, however it works fine for me on the pc!

 

I installed lamp (whoops I think I said xamp in my last post...) using the following info:

 

http://www.supriyadisw.net/2006/12/lamp-in...ation-on-ubuntu

 

http://www.devolio.com/blog/archives/221-H...buntu-7.10.html

 

then ies4linux using this info:

 

http://www.tatanka.com.br/ies4linux/page/Installation:Ubuntu

 

and as they say 'it just works' - I've not used previous Ubuntu editions so I wouldn't be able to help with dapper.

 

As for leaving mac/windows for linux - I'm far too attached to Photoshop + Flash CS and especially Notepad++ to be wanting to shift entirely, I think the quality/range of software lets down a superior operating system, although it's handy to dip into occasionally.

 

Hope some of that helps,

 

Cheers Kieron.

The 'html.' and 'html body' hack for IE browsers is invaluable.

 

Another point to note whilst testing recently is control over forms... when in a space/design crucial layout, try assigning a monospace font for form fields etc.

 

You'll find things MUCH nicer, and IE complies with the length setting of simple text and password fields a lot better too.

I don't understand why you would need to use conditional comments to include an IE6/IE7 stylesheet AND need the css hacks inside the file?

 

Only the right version of IE will pick up the stylesheets surely?

 

I use conditional comments to make my site work for IE6. Firefox doesn't use the IE6 stylesheet... I don't know if thats to do with the way the styles cascade?

Anyway by using:

<!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" href="styles/ie6.css">
<![endif]-->

My site works perfectly in all browsers.

 

Another question I have is about the installation of Multiple IE's using the same rendering engine. I have Tredosofts Multiple IE's and IE 6 displays things differently to IE 7 until I fix them. IE 5.5 is worse and IE 4 is a nightmare... they all look totally different! So I think Tredosoft's tool actually uses the correct rendering engine?

 

- Eris

Hi there - sorry been away and only just noticed this question!

 

I'm using Gutsy desktop edition on a pc - if you're using a laptop I know some people have mentioned problems with their hard drives knackering and others saying its been over egged, however it works fine for me on the pc!

Thanks for the tips in your reply Keiron. I'm not using a laptop, so I think I'll take the plunge and upgrade to Gutsy. Wish me luck!

Really good post! Though I must admit there's not a chance in hell I'd be in the slightest bit bothered about testing any of my sites in IE5 for Mac, NO chance!

Yep top top article.

 

Really useful.

 

Though I've always tested in many browsers including Ffox and IE6 the idea of using these two early given they are complete opposites is quality. If it works in IE6 and Ffox then odds on it'll work on virtually every browser.

 

It's a good idea if the code on a page is going to repeat across say 20 pages to test this early in IE6 and Ffox. I made the mistake recently of having to go over 80 pages of photos to delete any white space to stop the IE6 white space bug.

 

Safari could be one to add to that list.

 

IE5 for Mac used to test in this but have Leopard now and IE5 don't run in Leopard! Fingers crossed.

Some interesting points!

 

Firstly, I code for Firefox, with a reset.css as a foundation, and without using any hacks or bleeding-edge techniques, so I know that what I come up with will be fine on Firefox, Opera and Safari.

 

Then I take a deep breath and fire up IE7. Usually it's OK, but if not, I set up an ie.css file loaded in a conditional comment, and put some overrides in it.

 

Then, if it's a site for a client, I take an even deeper breath, cross my fingers, sacrifice a small goat and fire up IE6. Usually there's something iffy (big surprise), so I add another conditional comment to load an ie6.css file, and do the necessary in that.

 

It's quite a simple approach, and works pretty well - I get puzzled why people have so much trouble with browsers. Not that I don't have issues sometimes, but it's usually something that can be sorted with a bit of extra CSS delivered to just IE.

 

If it's a personal site, I don't bother with IE6 any more (apart from perhaps using a conditional comment to warn people that it isn't supported). And IE5 and IE5.5 are completely dead now, according to my analytics, so I ignore them completely.

 

@ErisDS: Yes, the Tredosoft MultipleIE installer (always use the latest version) is fine - it uses each version's actual rendering engine, and even handles cookies. The only thing it doesn't do (at least on the version I last installed) is interpret conditional comments properly. But that's a small price to pay for seeing how your floats break in IE6

 

@Harmony's word of caution - that's so true. When you quote for a site, or compile a project plan, specify your testing regime and range of supported browsers. If the client doesn't like it, you can haggle about extra versions, but at least it's settled at the start.

I test in the latest Firefox, IE6, IE7, Safari and Opera on my Windows XP. Commonly though, if it works in FF, it's fine in Op and Saf (yeah, that's right, I nickname browsers =] ).

 

Is it very necessary to test on a Mac?