Why doesn't MSN work with Opera?

[Update Feb 7: After this page had been referenced by Cnet, The Register and Slashdot, MSN changed their setup so that Opera7 no longer receives the distorted style sheet. Opera6, however, still does]

Microsoft and MSN have a history of trying to stop people from using the Opera browser. When trying to access MSN.com using the Opera browser, there are two visible problems. First, for the user it looks like Opera has a serious flaw so that many lines are partially hidden. Second, the page shows less content than users of Microsoft's Internet Explorer (MSIE) see.

The purpose of this page is to document, in technical terms, what is going on. Did the Opera programmers make grave mistakes? Or is it something wrong on the MSN site? If so, is the Opera browser targeted specifically? (Executive summary: no, yes, yes)

To analyze the problem, the first step is to download the files as they are served to the browsers. When requesting a page, the browser sends along a "User-Agent" string which makes it possible for the server to identify which make and version the browser is. Here are the User-Agent strings used by the three browsers (when running on Windows XP) in this test:

Browser User-Agent string
Opera 7.0 Mozilla/4.0 (compatible; MSIE 6.0; MSIE 5.5; Windows NT 5.1) Opera 7.0 [en]
MSIE 6.0 Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1)
Netscape 7.01 Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.0.2) Gecko/20021120 Netscape/7.01

When downloading pages, browsers sometimes modify the content before saving the pages to disk. For comparison purposes it is therefore important to use another to fetch the files. In this test "wget" was used. The table below shows the files fetched by "wget" when told to identify as Opera7, MSIE and Netscape 7.01, respectively. The test was run around 2PM Oslo time on Feb 5, 2003.

Files Bytes Command used to fetch file
opera7.html 39436 wget --user-agent="Mozilla/4.0 (compatible; MSIE 6.0; MSIE 5.5; Windows NT 5.1) Opera 7.0 [en]" --output-document opera7.html http://www.msn.com
msie6.html 37253 wget --user-agent="Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1)" --output-document msie6.html http://www.msn.com
ns7.html 37379 wget --user-agent="Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.0.2) Gecko/20021120 Netscape/7.01" --output-document ns7.html http://www.msn.com

As can be seen in the table above, each browser is sent different HTML files. If you open the files in your browser of choice, you will see that that the file sent to Opera7 has less content in (although it is bigger) than the version sent to the Microsoft and Netscape browsers.

To understand why there are differences, we need to peek inside the HTML files. This part of the analysis is quite time-consuming, but by now we have some experience. It turns out that MSN sends different style sheets to the different browsers. This can be seen in the first LINK element of each of the three files. The style sheets are:

Browser File Bytesize Command used to fetch file
Opera 7.0 site.css 521 wget --user-agent="Mozilla/4.0 (compatible; MSIE 6.0; MSIE 5.5; Windows NT 5.1) Opera 7.0 [en]" --output-document site.css http://i.msn.com/m/8/c/site.css
MSIE 6.0 site-win-ie6.css 2036 wget --user-agent="Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1)" --output-document site-win-ie6.css http://i.msn.com/m/8/c/site-win-ie6.css
Netscape 7.01 site-all-nav6.css 1926 wget --user-agent="Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.0.2) Gecko/20021120 Netscape/7.01" --output-document site-all-nav6.css http://i.msn.com/m/8/c/site-all-nav6.css

As can be seen in the table above, Opera7 receives a style sheet which is very different from the Microsoft and Netscape browsers. Looking inside the style sheet sent to Opera7 we find this fragment:

ul {
  margin: -2px 0px 0px -30px;

The culprit is in the "-30px" value set on the margin property. This value instructs Opera7 to move list elements 30 pixels to the left of its parent. That is, Opera7 is explicitly instructed to move content off the side of its container thus creating the impression that there is something wrong with Opera7.

Is this just an accident or is Opera specifically targeted by MSN?

To test this, the User-Agent filed was changed slightly -- from "Opera" to "Oprah". Since there is no "Oprah" browser on the market, one assumes that MSN has not created special versions for it. Here is what the "Oprah" browser got back:

Files Bytesize Command
oprah7.html 37263 wget --user-agent="Mozilla/4.0 (compatible; MSIE 6.0; MSIE 5.5; Windows NT 5.1) Oprah 7.0 [en]" --output-document oprah7.html http://www.msn.com

Looking into this 37k file, we find a reference to the same style sheet as MSIE6 receives. Just to make sure the server does not modify this style sheet before sending it to the browsers, we fetch the style sheet with the "Oprah" browser:

Browser File Bytesize Command used to fetch file
Oprah oprah-site.css 2036 wget --user-agent="Mozilla/4.0 (compatible; MSIE 6.0; MSIE 5.5; Windows NT 5.1) Oprah 7.0 [en]" --output-document oprah-site.css http://i.msn.com/m/8/c/site-win-ie6.css

The resulting file is identical to the one MSIE6 receives. Therefore, MSN looks for "Opera" in the User-Agent string and purposely sends Opera7 a style sheet which distort pages.

Shouldn't Opera learn to deal with imperfect pages?

Very few of the pages on the web follow W3C's specifications. The Opera engineers spend a lot of time making sure the browser can handle pages that are not written according to the standards. However, Opera7 handles the HTML pages sent to it similar to other browser, including Microsoft's own MSIE. That is, when you feed the page meant for Opera7 to MSIE6 it shows the same distortions as Opera7. Here is a screenshot:

MSIE screenshot

Click on the image to see the full size. Notice that lines are cut and that large white areas make the page look dull.

Isn't this just a problem with the newly released Opera7?

You mean, perhaps MSN had to write special versions of the page for the older Opera6? No. Opera6 handles the pages sent to MSIE6 just fine. Here is a screenshot:

Opera6 showing MSIE's content

Thus, there is no technical reason for MSN's behavior.

Did MSN do this to compensate for a bug in a previous version of Opera?

No, there is no such bug in previous versions of Opera.

Do you really expect MSN to make special versions for Opera?

We encourage and expect major sites to test their pages with many different browsers, including Opera. If a page looks distorted in some browsers, there is probably something wrong with the page. It is possible to write pages that work in all popular browsers.

In the case of MSN, however, there is no need to create a special version for Opera. The HTML page which is sent to MSIE6 works fine in Opera7:

Opera7 showine MISE's content

howcome Feb 5, 2003 (updated Feb 7, Feb 11, and Feb 20, 2003)