Testing

Introduction

If a site isn't tested against browser X, then the site is unlikely to look correct in browser X. That's even if you design to standards and the browsers in question are standard compliant. There's always a little wriggle-room in standards, even if it much less than in non-standard browsers.

Case Study

• Subject: http://ninemsn.com.au/
• Date: 2005-02-21

This site looks ugly in Opera, but OK in MSIE and Mozilla browsers. Another case of Opera just not being compatible with the site? Or is something else going on?

Background

When Microsoft first added CSS support to their browser, they made a rather large mistake when it came to what's called the "box model". Listamatic has a nice page that shows the different box models.

The important thing is that IE5/Win always gets it wrong, Mozilla browsers always get it right, and IE6/Win and Opera will do it right or wrong depending on the specified DOCTYPE of the page. For compatibility reasons, Opera follows the lead of IE6/Win in determining which box model to use and when.

The Problem

The ninemsn site does not specify a DOCTYPE. That means that for IE5/Win, IE6/Win and Opera, the wrong box model is used. Mozilla browsers always get it right. So, you might expect the site to be looking good in IE and Opera, but bad in Mozilla browsers. So why doesn't it?

Mozilla browsers are OK because the site designer has added some special styles that IE doesn't understand and ignores because it's so outdated, but Mozilla being a modern up-to-date browser does understand them. They are specified in portal_style_final.css. They are all the lines at the end of the file that start with "html>body".

The problem is that Opera is also a modern up-to-date browser and understands the Mozilla "fixes" too! Unfortunately, Opera doesn't need the fixes and what happens is that the fixes progressively screw up Opera's rendering.

Fixes for Opera

Opera will display the site just fine if one of two things are done. The simplest would be to remove the Mozilla fixes. Except then the Mozilla browsers would look bad.

The second way would be to add a DOCTYPE to the web page. The problem then would be that IE6/Win would look bad because it would use the same box model as Opera and Mozilla, but it doesn't understand the Mozilla fixes that Opera and Mozilla use to correct the display. See also Default List Styles below.

There are other options. Opera could drop their standards compliance down to the level of IE so that Opera no longer understands the Mozilla fixes. For obvious reasons, that will never happen.

Another option would be for Opera to drop IE quirks compatibility, at least in the area of the box model. That would be extremely ironic - Opera already gets many requests to be "more compatible with IE", yet here we have a site where the only possible fix (other than the site maintainers doing something) is for Opera to become less compatible with IE! The mind boggles.

Mozilla?

Yet another possibility is that Mozilla browsers should follow the lead of IE6/Win and Opera, and use the "wrong" box model when in quirks mode (as the ninemsn page is). After all, that's exactly what a browsers' quirks mode is for!

Summary

The web designers for ninemsn would have started their design testing in the IE/Win browsers. If they had also tested in Opera at that time, they would have found their page looking good there too.

However, what probably happened is that they finished their design testing only using IE. Then they probably checked using the Mozilla browsers and found their site looking bad. Their solution to the Mozilla problems was to add some fixes for Mozilla that Mozilla understood and IE didn't, so as not to screw up IE. Unfortunately, the techniques that fixed the Mozilla browsers also stuffed up Opera, but because they weren't testing in Opera, they never noticed.

You could say that Opera is being too compatible. Opera was caught out because it was compatible with both the quirky way IE6/Win works and the standards-compliant way Mozilla browsers work!

Ideal Solution

It's not possible to get all of the IE5/Win, IE6/Win, Opera, and Mozilla browsers using the same box model. The best solution would be to get as many as possible using the same box model, then supply fixes to the browser getting it wrong.

The ninemsn designers made a choice to use the wrong box model, then apply "fixes" to browsers that are using the right one. In this case, just Mozilla. The problem is that the fixes didn't target only Mozilla, but also included a browser that didn't need "fixing", namely Opera.

It's very hard to separate Mozilla and Opera from each other because both browsers are very up-to-date and do things in an almost identical way. In fact, the only practical way is to use browser sniffers, and I've already gone into how unreliable browser sniffers can be!

The best solution for the ninemsn site would be for them to add a suitable DOCTYPE to their page, for example, the "HTML 4.01 Transitional" one. Then IE6/Win, Opera, and Mozilla would all be using the same box model. Only IE5/Win would be left out.

Targetting fixes only for IE5/Win turns out to be very simple. IE/Win browsers have a feature called Conditional Comments. By inserting the IE5/Win style sheet fixes into a conditional comment, only IE5/Win sees them:

<!--[if IE 5]> <link rel="stylesheet" type="text/css" src="ie5fixes.css"> <![endif]-->

The fixes for IE5/Win would be modelled off the fixes currently used for Mozilla, except the "html>body" would need to be deleted, and the specific fix values set to the correct values for IE5/Win.

In this way, all browsers would display the site correctly.

Default List Styles

The Mozilla "fixes" trip up Opera in another way too. Both Internet Explorer and Opera use margin to indent their lists. Mozilla doesn't. Instead it uses padding. The Mozilla "fixes" used by ninemsn include settings that alter the list indent. Unfortuately, they only work properly in Mozilla because it's the only browser that uses padding. However, because Opera understands the Mozilla "fixes" too, it gets screwed up.

What the ninemsn designer should have done is to fully specify both the padding and margins of the lists, so all browsers get the same settings. Then no special fixes for any browser would have been needed.