CSS compliance, which browser gets this right?

By crisp on Friday 13 February 2009 00:04 - Comments (9)
Categories: CSS, Tweakers.net, Views: 7.473

I have a trick question following up on an issue that was reported to us lately which dealt with an incompatibility in Opera (9.6x) and our newly launched site koopinfo.nl. I have been investigating this issue but cannot figure out which browser actually gets it right...

I was able to reduce the problematic code to a single testcase and was surprised to see that there seems to be some 'disagreement' between browsers about this. Let me start by showing you a screenshot of how our layout was supposed to be displayed (and does display in Firefox 3, Safari, Chrome and Internet Explorer 7):

http://tweakers.net/ext/f/OUOUcKDPvTLj5ctY3LGO8nGO/full.png

Now the rationale about this setup is as follows: we always want the content to be aligned on the right side regardless of wether there is an element floating to the left of it. The overflow:hidden was added to this container because this container itself may contain some floating items and we want the box to stretch with these floats (and adding 'clearing elements' or using content: hacks in CSS are imo not the right way to achieve that).

Now we could have used float:right for the box that is depicted as #flow in this example, but our actual initial case was a bit more complicated which made this impossible. We also didn't think much of this setup as all major current browsers seemed to agree on this case - major current browsers being Firefox 3, Internet Explorer 7, Safari and Google's Chrome. IE6 did break on this, but IE6 breaking on common CSS layouts is a disease we have to live with every day and cure with alternate styling fed through an additional stylesheet loaded using conditional comments*. Opera, being a niche browser and not applicable to the target audience for this site, was not in our testsuite and IE8 was only at a bta-stage at the time.

*We just put the margin-left to 0 for IE6 accepting that this will cause the #flow element to shift to the left in absence of #left

Not testing Opera proved to be a mistake when we announced koopinfo.nl to our own audience, which has a respectable number of Opera-users. This is what they get on this particular construct (image forced to the width of this blogpage):

http://tweakers.net/ext/f/oc4GBnVpC3pR9GEUDTAqGRdh/full.png

This really had me baffled so I decided to look it up in the actual specification and found these applicable paragraphs (emphasis mine):
In a block formatting context, each box's left outer edge touches the left edge of the containing block (for right-to-left formatting, right edges touch). This is true even in the presence of floats (although a box's line boxes may shrink due to the floats), unless the box establishes a new block formatting context (in which case the box itself may become narrower due to the floats).
The border box of a table, a block-level replaced element, or an element in the normal flow that establishes a new block formatting context (such as an element with 'overflow' other than 'visible') must not overlap any floats in the same block formatting context as the element itself. If necessary, implementations should clear the said element by placing it below any preceding floats, but may place it adjacent to such floats if there is sufficient space. They may even make the border box of said element narrower than defined by section 10.3.3. CSS2 does not define when a UA may put said element next to the float or by how much said element may become narrower.
So, we have the case where a box's (#flow) outer edge (margin edge) should touch the left edge of the containing block regardless of floats. But our box does establish a new block formatting context because of the overflow:hidden, so the second case becomes applicable.

There it says something about the 'border box', but the specification doesn't make it clear wether this only applies to tables or to the other mentioned element types as well. Anyway, at least in Opera it didn't make any change so I assume that 'border-box' is what is meant for all elements that apply to this case. Now 'border-box' excludes the margins, so as long as the margin (touching the left edge of the containing block) places this elements' 'border-box' besides the floating element it should be ok in my opinion. The specification doesn't prescribe that the margin should be touching the floats' right-border-edge (and/or collapse with the floats' right-margin), so Opera's implementation seems to be wrong about this, and even more so by placing the element next to the float even though the width-constraint of the container doesn't really allow for this.

Next I became curious how IE8 RC1 handles this case since they claim to have the most complete CSS2.1 implementation of all browsers; here's the screenshot:

http://tweakers.net/ext/f/1KN0aYDoatl5XMPgOU2QfoLj/full.png

Now that almost looks like what IE6 did! If this is the correct interpretation of CSS2.1 than I am now totally at a loss...

I do have to point out the last phrase of the quotes from CSS2.1: CSS2 does not define when a UA may put said element next to the float or by how much said element may become narrower. Now that's a sign of a specification that isn't ready to become a recommendation (and is thus rightly again a working draft). Those sort of things should be issues that need to be resolved before becoming a recommendation.

In any case I'm still not sure which browser is actually correct for this specific case, or maybe they are all correct and the spec is just too vague?

Volgende: IE8 standards compliant by default - but not for Tweakers.net 02-'09 IE8 standards compliant by default - but not for Tweakers.net
Volgende: IE8's standards compatibility promise 12-'08 IE8's standards compatibility promise

Comments


By Tweakers user skabouter, Friday 13 February 2009 09:07

We also didn't think much of this setup as all major current browsers seemed to agree on this case - major current browsers being Firefox 3, Internet Explorer 7, Safari and Google's Chrome.
Wow, last time I checked Chrome had a market share of ~1%. I guess that what it takes to be called 'major' ;)

By Tweakers user crisp, Friday 13 February 2009 09:39

Well, we don't consider Chrome itself a major browser, but since it has the same renderengine as Safari I mentioned it together with Safari ;)

By Tweakers user mOrPhie, Friday 13 February 2009 10:36

I would say that both Opera and IE8 are wrong. It seems they treat the margin-edge as a padding-edge, making it part of the box. Now, I'm not an w3c expert, but to me the rendering of firefox/safari/IE7 seems the most "sane" one, considering the used parameters.

By Tweakers user drm, Friday 13 February 2009 15:25

I'd say the specs are flawed. It all comes down to the question what exactly "sufficient space" means in the phrase
but may place it adjacent to such floats if there is sufficient space
All renderings prove to interpret the "sufficient space" part differently:
- gecko / webkit says "there is sufficient space for the border box to be rendered, so we do it
- opera says "There is sufficient space even though it's outside the parent element"
- IE says "There is no sufficient space, so we clear it"

To be totally honest, following the specs, I'd have followed the IE point of view, but fact is the specs are inconclusive

By Tweakers user NitroX infinity, Saturday 14 February 2009 00:41

May I introduce a, perhaps n00bish, different view on this?

CSS coding should be elegant. If the code you are using is the most elegant and produces a correct display in one browser but not in another, then the other browser is wrong.

In other words, if a browser needs CSS hacks or 'tricks' (elaborate code) to display something the way you want it, the browser is in the wrong.

By Tweakers user Erkens, Saturday 14 February 2009 23:33

@NitroX infinity:

When I build (hypothetically) a website and it is displayed exactly as I wanted/designed with IE6, but all other browsers are displaying it wrong. Does this mean those browsers are wrong :?

Because in this hypothetical case I don't have more knowledge about CSS then what I have used, so everyting I must do to get it right on those other browsers are "hacks" and "tricks" ;)
[hr]
So the browser developers (like Microsoft, Mozilla, Opera etc) uses the specs from the W3c as guidelines to render the HTML and CSS. But in this case the specs are flawed because they don't specify exactly what the result should be. And then ofcourse the browser developers can interpret them as they like.

By Tweakers user NitroX infinity, Saturday 14 February 2009 23:56

When I build (hypothetically) a website and it is displayed exactly as I wanted/designed with IE6, but all other browsers are displaying it wrong. Does this mean those browsers are wrong :?
That depends, if the code used is the most elegant; proper (adhering to the w3c rules) and compact (not neccessarily the shortest), then yes.

If your code on the other hand is elaborate and perhaps uses not-normal ways of getting things done, then no.

Just to be clear; my example does not take into account what the coder knows about css. It only takes note of the written rules for CSS.

By Tweakers user Rhuarc, Sunday 22 March 2009 08:30

Which browser is correct cannot be determined from only the two rules quoted above. To decide which one is right atleast the folowing has to be determined.

First, what is the point of reference for the margin-left property of the green box? As far as I'm able to determine from the standard the 220px left margin of the green box should be honored between the red and the green box. Which means that directly displaying the green box beside the red box is wrong. So Opera is atleast partially right in moving the green box to the right.

Second, is it allowed to flow the green box out of the yellow box?
The following http://www.w3.org/TR/CSS21/visuren.html#containing-block states:

Each box is given a position with respect to its containing block, but it is not confined by this containing block; it may overflow.

So it seems that what Opera does is allowed. But IE8RC1's interpreatation is allowed to, the standard allows the green box the be placed below the red box.

Check out the browsershots: http://browsershots.org/h...sp/bfc_next_to_float.html
Notice Opera has company from Firefox 2, IE8, Navigator 8 and 9.

Personally I prefer the way Opera 10 does it because it doesn't ignore the margin-left and the margin-left should be 20px anyway to get the behaviour of Firefox and safari. If you want to get the behaviour of IE8RC1 leave the 220px and add a clear to position the box below the red box.

By Tweakers user crisp, Sunday 22 March 2009 15:59

As far as I'm able to determine from the standard the 220px left margin of the green box should be honored between the red and the green box.
Well, I can't determine that from the specification. It is already untrue if the green box would not have it's overflow property set to 'auto' or 'hidden' ;)

Comments are closed