How can I test my webpage using different browsers?

Question

I just found out about the Yahoo UI Reset CSS tool/file and I'm using it on my website. On my machine I have Internet Explorer 7 and Firefox 3.01 and my webpage looks the same on these two browsers. A friend is using Internet Explorer 6 and the page is completely a mess. I have two questions:

1. Am I that poor/stupid in writing CSS?
2. How can I test my webpage using different browsers on my machine?

Kelwin

You're certainly not poor not stupid at writing CSS. A good 35% of my time is spent trying to make a website look correct on all browsers/screen resolutions. It really is a problem in IT at the moment. – Highpressure

Answer 1

If you are not particular about testing in your machine, you could try https://browsershots.org or https://blisk.io. These are free and provide screenshots of your site in various browsers on Linux/Windows/Mac OS/BSD.

Tunisia

Answer 2

Just because your website looks terrible in Internet Explorer 6 does not mean you are terrible at CSS. There are several documented bugs in Internet Explorer's rendering engine in regards to CSS. Web designers and developers have been struggling with these bugs for years. Several well known websites like Digg and YouTube are no longer going to support IE6.

You have several options to test your website in multiple browsers. The easiest way is to install all the browsers you want to test against on a local machine. There are 5 major browsers, and they all require different methods to install multiple versions.

Microsoft Internet Explorer

If you are using Windows XP, you can use Multiple IEs to install Internet Explorer versions 3, 4.01, 5, 5.5 and 6.

If you are using Windows Vista or Windows 7 (or Windows XP for that matter) you can download virtual machine images from Microsoft that contain a fully licensed Windows operating system with Internet Explorer. These virtual machine images expire every 90 to 120 days. They offer the following images:

• Windows XP SP3 with IE6
• Windows XP SP3 with IE7
• Windows XP SP3 with IE8
• Windows Vista with IE7
• Windows Vista with IE8

These images can all be used with the free Virtual PC 2007.

Mozilla Firefox

You can install multiple versions of Firefox on the same operating system, but it is highly advised that you create a new profile for each version you are going to install. You can use the steps outlined on Rob Cherny's blog to set this up (the article is referring to Firefox 2, but it works for Firefox 3 and 3.5 too). Alternatively, you can use MultiFirefox.

Google Chrome

There really isn't an easy way to run multiple versions of Google Chrome on the same machine. Chrome installations are user account-specific, and standalone versions of Chrome have been made available (see question 3785991), so you can create a new Windows/Mac user account for each old version of Chrome you want to test.

However, the fact that updates are applied automatically and silently means that you really shouldn't worry to much about designing your website for older versions of Chrome. If this is unacceptable, you will need to use multiple user accounts, or virtual images as advised for Internet Explorer previously.

Apple Safari

Safari is similar to Google Chrome in that there isn't an easy way to run multiple versions on the same machine. Michel Fortin has an article that details how to get multiple versions running on Mac OS X. You can refer to this Stack Overflow question for the lowdown on Windows. Virtual images, again, seem to be the only way to go.

Opera

You can install older versions of Opera without issue, so long as they are installed to different directories.

Avis

As per my question, it looks like you can run multiple versions of Chrome on one machine, but you have do it under different user accounts. – Yesterday

Answer 3

A reset CSS--of which YUI's is only one example--aim to remove browser differences in default CSS properties for HTML elements, like some browsers will have a default 8 pixel padding on the html element (it was a surprise to me to find the html element was even styled when I first found out).

Your IE6 issues are entirely separate to that. Without examples of the site itself it's impossible to say why this might be but the obvious guess is that you're relying on reasonably advanced CSS features (eg a > b selectors, :hover on non-anchors, certain positioning schemes and so on).

Inpour

Answer 4

For IE you can use this tool (Multiple IE) to test your website in old versions.

For the Reset CSS i redirect you to this question.

Riddance

The Multiple IE application doesn't run on Vista at all :( – Kelwin

Multiple IE is a nice app =) IE6 and IE5 crashes every 5 minutes, but thats enought to test sites =) – Business

Answer 5

For testing various IE versions I use ietester

It allows different ie versions in each browser tab and it's free.

Sprat

Answer 6

The purpose of it is that HTML(edit: the browsers have predefined properties for the elements.ty Zack) has some predefined properties for its elements like the built-in padding/margin for the paragraph element. The point of using the reset cheat sheet is to start with default values that are equal for all elements : size, margin, padding etc. I use the reset file in my project but not in its original form. You should decide which elements in the sheet to use and you can always assign other default values for the tags there.

---

edit: You can test your web-page by installing most of the browsers available. Here is the latest statistics representing the usage of browsers. My advice is to use Mozilla as your 1st choice testing browser and every now and then test the page on other browsers: IE6, IE7, IE8, Opera, Chrome and Safari (at least). Here is a reference to a discussion about multiple IEs on one PC. Best of luck!

Keyes

Just a small correction: it's actually the browsers that have predefined properties and not HTML. That's why it's important to reset everything so all browsers end up looking the same or very close. – Waterspout