CSS compliance, which browser gets this 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):
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 bèta-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):
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).
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.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.
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:
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?
Wow, last time I checked Chrome had a market share of ~1%. I guess that what it takes to be called 'major'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.
All renderings prove to interpret the "sufficient space" part differently:but may place it adjacent to such floats if there is sufficient space
- 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
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.
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"
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.
That depends, if the code used is the most elegant; proper (adhering to the w3c rules) and compact (not neccessarily the shortest), then yes.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
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.
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.
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'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.
Comments are closed