[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.
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.
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:
Click on the image to see the full size. Notice that lines are cut and that large white areas make the page look dull.
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:
Thus, there is no technical reason for MSN's behavior.
No, there is no such bug in previous versions of 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:
howcome Feb 5, 2003 (updated Feb 7, Feb 11, and Feb 20, 2003)