Web site design crap
So I’m writing a web application again, and again I need it to work with Internet Explorer, so of course I can’t anything fancy – or I can try but everything breaks:
For example we know Internet Explorer’s handling of transparent objects is non-standard (you can’t just use the CSS opacity attribute – you have to mess with DirectX filters), but its also completely broken in that you can’t put two transparent elements one on top of the other – if you do the top element determines the opacity of the whole stack (this was fixed in IE7, but you can still see some artifacts by selecting the text below and above the green element):
Some text written below the element so you can see it is transparent.
Some text written below the element so you can see it is transparent.
Some text written below the element so you can see it is transparent.
Some text written below the element so you can see it is transparent.
In the example above you see two elements one inside the other where both are transparent (and floating on some text so its easy to see the transparency effect) – the larger one is slightly transparent (90% opacity) and the smaller one is inside and on top of the larger and is very transparent (25% opacity). With Internet Explorer 6 the top element is exposing the underlying text – effectively being a hole through the green element.
As I’ve said, this was fixed in IE7, but here’s something else – even more dumb that wasn’t:
HTML and CSS allow you to set colors by using either RGB color codes or by color names. This is fine until you get to the gray area, or maybe the grey area. See the problem ? both spellings are valid and normal browsers support both spellings, but Internet Explorer only supports one spelling for gray, the more “official” one (or at least the same one that my spell checker likes). Which is not all that troubling, until you try to use the color lightgray – which isn’t supported by Internet Explorer, because Internet Explorer likes to spell that lightgrey – check this out:
People who use normal browsers should see here 3 sets of identical boxed. People with browsers that use consistent spelling should have the colors at least working on an entire column. People with Internet Explorer will see alternating colors as their browser can’t seem to agree on a how to spell the word “gray”.
If its hard grasping how inanely dumb this is, think about it like this: Microsoft have strict spelling, but they spell the same word differently if it has the word “light” in front of it.
The whole thing remind me of that pie chart I posted more then a year ago. In the mean time Internet Explorer 7 was released and things haven’t improved one tiny bit – even things that IE 7 does correctly I still can’t use because even though Microsoft defines Internet Explorer as an important update that is installed by default (and automatically if you don’t disable it) by Windows Update, up until last November Internet Explorer 7 was still less then half of the total install base of Internet Explorer alone!
I use konqueror/webkit (aka KHTML), which also sees a differences between “a gray box” and “a grey box”. weird. Safari uses webkit too, and so does iPhone 😉
Anyway the Explorer team claims that IE8-super-alpha passed the Acid(v3?) test, which even firefox2 still don’t do 🙂
Oh. it’s the Acid2 test:
http://www.webstandards.org/files/acid2/test.html
I haven’t looked at Firefox 2 yet, but the acid2 test you linked above looks correct for me with Firefox 3 (beta 2). Its off by a couple of pixels at the bottom, but its hardly noticeable and I’m not sure what it means.
Looking at Konqueror 3.5.8, it renders the bottom two sets (lightgray/grey and darkgray/grey) correctly, but it renders the top set (gray/grey) with different shades of grey!!
Yea, Firefox 2 borks hard at the Acid2 test. Its a shame that Firefox 3 suffers from many regressions in the HTML rendering engine compared to Firefox 2 (and that Firebug doesn’t support it).
BTW – I checked Safari (3 beta) and it renders everything correctly.