entropia

By now we’ve all had a chance to try out IE8, and we’ve all found quirks, bugs, and pages that don’t quite work right. PPK has a summary of CSS issues. John Resig talks about JavaScript. Erik Arvidsson gives his impressions. I’m sure there’s plenty more out there.

I’ve found a few interesting things myself. Navigation on sites like Sourceforge and Codeplex doesn’t look right. MSN TV listings don’t work. But the biggest issues I’ve seen are with my raycaster.

There are basically 3 causes of the problem: opacity, overflow, and zIndex. IE has never done opacity the same way as Firefox or other browsers; it uses filter: alpha(opacity=50) instead of opacity: 0.5. IE8 doesn’t seem to have any opacity support at all.

More noticable is overflow. I was using large spritemaps for the enemies, which were clipped to show a single sprite¹. So the Sarge sprites are all in a single image file, and different parts of the image are shown for different individual sprites. In IE8, the images wouldn’t clip and the entire spritemap would be shown.

I made a CSS overflow test to pinpoint exactly what the problem is. I was using absolutely positioned imgs in a relatively positioned div. In Firefox and IE7, the children of relatively positioned elements are clipped, but not in IE8.

To fix it, I’m using a staticly positioned div for the container, and positioning all the content (walls, sprites, and sky) relatively.

The third problem is with z-index, for which I made a CSS z-index test. In IE7, there was no interleaving of children of siblings. So if 2 adjacent nodes, A and B, each have children with different z-indexes, there is no way for A’s children to be layered between B’s. Either all of A’s children are in front of B’s children, or they are all behind B’s children. And it all depends on A and B’s z-indexes, not their children’s. In Firefox and IE8 there can be interleaving if the z-indexes of the parents aren’t set. Also in IE8, there can be interleaving if the z-indexes of the parent are set to 0.

For more about IE8’s CSS handling, there’s the Windows Internet Explorer Testing Center and CSS Improvements in Internet Explorer 8.

1. I did this so that only a few images needed to be downloaded. Instead of one for every frame and angle for each enemy, there is just a single image for each enemy type [↩]

With the recent release of Internet Explorer 8 Beta 1, everyone’s talking about web standards again (or rather, they’re still talking about them, but more loudly now). Is IE8 standards-compliant? Will Firefox 3 be standards-compliant? What does it really mean to be standards-compliant?

One of the more popular ways of evaluating standards-compliance is with the Acid 2 Test, which IE now passes. Or does it?

Although we said that IE8 Beta 1 passes the ACID2 test, some of you may be seeing results like the image above; we thought we should explain what’s going on. IE8 passes the official ACID2 test hosted on http://www.webstandards.org/files/acid2/test.html. (Note, this seems to be a popular destination at the moment. You may have trouble reaching the site.)There are also a number of copies of this test around the net. One popular copy that I’ve seen of late is http://acid2.acidtests.org/

IE8 fails the copies of ACID2 due to the cross domain security checks IE performs for ActiveX controls.

IE Blog

What I don’t get about all this is why anyone cares whether an arbitrary set of HTML and CSS renders the way an arbitrary group of people say it should. The Web Standards Project and the W3C do not set standards. The browser makers do. More specifically, the popular browsers do. So right now, Microsoft sets the standards and by definition, anything that works in both IE6 and IE7 is standards-compliant. That’s what a standard is: “an object that is regarded as the usual or most common size or form of its kind”. If it’s not implemented by most browsers, it can’t be a standard. And right now, IE6 and IE7 make up “most browsers”:

Designing a web page around “standards” that don’t work in IE your site will be broken for about 3/4 of your viewers. When writing and testing your HTML and CSS, you should do it in this order:

1. Make it work in the most popular brower.
2. Make it work in other browsers, to the point where the extra effort isn’t worth it.
3. Make it adhere to the suggestions of the Web Standards Project.

So some sites, IE6 and IE7 aren’t the most popular browsers. For a lot of “tech” sites, Firefox is just as popular. For Apple-focused sites, Safari probably is. If that’s the case, then go ahead and ignore IE. You may have trouble attracting new readers though.

As for IE8, there’s one site I’ve found that works in IE7, Firefox 2, and Opera, but not IE8: my raycaster.