Opera and "Open the web"
A story of uninformed Opera zealots and bowing to market pressure
This page is about Opera, and their slogan "Open the web", and the once too many uninformed Opera zealots who perceive MicroSoft as the Evil Empire, and think using anything, which seems anti-MS is a Good Thing™.
But mostly, it's about Opera introducing errors into their CSS rendering engine, to follow what the market leader Internet Explorer is doing. When Internet Explorer is doing it wrong, and Opera did it correctly previously. This page, is written for all the Opera users, who will ever, in my presence, say "Supporting IE only standards is bad, and that's a slippery slope we'll head down, if we go there". Well, I got news bud, you're sliding down that slope at a 110.
I bought, use and very much enjoy Opera. So this isn't some strange program hate/flame, as you see far too often on the internet. It's a strike against uninformed trolls.
Internet Explorer has many CSS failings. This is one of the more sinister. It's the case where Internet Explorer is doing the seemingly logical thing, but is in reality, doing the wrong thing, for many reasons. People often come, either to me or to email lists, and ask "Why does Mozilla render this page this way, when Internet Explorer does it right?" (sadly, far too few people test in Opera)
Figure 1.
This is how Internet Explorer renders one of the common design looks
out there. This looks all right to most people (click for unscaled).
Figure 2.
And this is how Mozilla (unknown build, probably ~1.4) shows it.
Most people will be alarmed by the line going through the text
(click for unscaled).
These images are not ones I've made, but they show a real world situation, and was posted by someone confused at the Ars Technica forums, the thread is called "Help with CSS layout, and browser issues" (local copy).
The figures 1 and 2 shows the issue at hand. Mozilla does it correctly, and Internet Explorer does it incorrectly. Why, when Internet Explorer obviously looks better (We'll get to Opera later)?
Here are is the page, which boils the issue down to it's very root. It doesn't get any more barebones then this. You will notice that the image is pushing down the bottom border, like the main body of text, in figure 1, is pushing the bottom border down in Internet Explorer. Briefly, the code is basicly what's shown below, and figure 3 and 4, again show how Internet Explorer and Mozilla renders this page.
<html>
<p style="width:100%;border:1px solid black;">
<img src="img.gif" style="float:left">
Some text Some text Some text Some text Some text Some text Some text
...
</p>
</html>
Figure 3.
Internet Explorer showing the linked to CSS test case, incorrectly (click for unscaled).
Figure 4.
Mozilla showing the linked to CSS test case, correctly (click for unscaled).
The basic reason, why Internet Explorer is wrong, is
because it's expanding the P element, so that
it contains the floated element. But this is wrong, when deciding element
height (assuming none is set via CSS), floated elements do not
affect the containing box's height. The element which is floated
is the image. The image's containing box is the P tag.
The CSS 2 Visual formatting model, section 9.5 "Floats", has a great picture, which shows this situation. It shows, that indeed Mozilla is doing the right thing. Further, in section 10.6.3, where height calculation of block boxes is explained, it's plainly said:
If it only has inline-level children, the height is from the top of the topmost line box to the bottom of the bottommost line box ... Only children in the normal flow are taken into account (i.e., floating boxes and absolutely positioned boxes are ignored, and relatively positioned boxes are considered without their offset). (my emphasis)
Now, this is where it gets dicey. I'll show you the code first:
<html>
<p style="border:1px solid black;">
<img src="img.gif" style="float:left">
Some text Some text Some text Some text Some text Some text Some text
...
</p>
</html>
Would you be surprised, if I said, that Internet Explorer renders this version correctly? Well it does, as can be seen in figure 5 below (new version of the CSS test case).
You might notice, that I removed the width property, from
the style tag. Do this, and Internet Explorer pops into the correct mode
of display. It's obviously an attempt from the Internet Explorer programmers
side, to try and "interpret" what you want. If you're "sparse", and don't
use much style, you get the correct version. If you're littering styles all
over the place (and most likely also a width), you get
the "Enhanced" version (which, sorta like the box-model in old Internet Explorer,
is probably how Internet Explorer's programmers think that the CSS 2 specification should
have been made).
Figure 5.
Internet Explorer showing new CSS test case, correctly (click for unscaled).
Well, apart from the fact, that not supporting web standards is bad, figure 6 (a slightly modified version of the above test cases), should show you clearly, why Internet Explorer's behavior is bad, and harmfull to correct display.
Figure 6.
2 Internet Explorer windows are shown side by side. The left window
exhibits the wrong behavior, while the right display the correct (click for unscaled).
If you look at the page (with
width and without),
it's clear, that this template is a pretty standard fare, news story, with an inserted (floated) image. The catch being, that
if you include a width on your main text body element, Internet Explorer will jump into
the behavior shown on the left side, of figure 6. This is likely not what
the author intended. He will be forced to remove the width tag, in order to
get the look he wants. And it's not just news sites,
the image could just as well be a menu, and suddenly this covers all blogs out there!
And we're finally here, to talk about Opera, and what it does. I hope, however that the above section has convinced you, that what Internet Explorer does is wrong, and harmful to authors. Let's see how Opera renders the page (figure 7).
Figure 7.
Opera showing the CSS test case which Internet Explorer
renders incorrectly (click for unscaled).
"But wait! Isn't that the right way? Wasn't it supposed to be wrong?" I hear you say?
And indeed, you are correct. There's a minor fact I neglected to mention
in the above caption though. This isn't just any Opera. This is
Figure 8.
Opera displays the CSS test case exactly like
Internet Explorer, which means incorrectly (click for unscaled).
What happened here?? Well, it's quite clear, that Opera chose (I cannot believe this was accidental) to emulate Internet Explorers faulty behavior. It's even so perfect, that you also have to remove the width, for Opera to show it correct, as figure 9 shows.
Figure 9.
Opera exhibits the exact same behavior as Internet Explorer, here
shown using the test case with no width. (click for unscaled).
No, of course not. Version 7 is a big step for Opera, and a absolutely crucial piece for Opera, as their old engine was inadequate for the future. Opera wants to stay in bussiness, so it will do what is needed, to stay in bussiness. This is just like any other company out there.
You can almost see the reasoning behind this decision. Beta 2 was, as far as I know, the last beta, before 7.0 went final. Already in final, does one see the broken behavior. So it changed from the last beta, to the released final. Why? Possibly the droves of bug reports they probably got on the issue, saying how Opera was "unable" to render the page correctly, when in fact, that's exactly what it was doing!
It's still a bit surprising, to see a company, such as Opera, who's Chief Technology Officer, was one of the chief architects (if not creator) of CSS. That they would take their engine, which was performing the right job, and bowing to market pressure, and instead make it render incorrectly, exactly like Internet Explorer. One can not blame them, it's a matter of survival of course. And regular users won't care one way or the other.
But for ardent Opera fans, who somehow believe, that Opera is above the game, this is proof, that Opera is just like the rest of us, struggling to keep it's head above water.
Open the web