W3C home > Mailing lists > Public > www-style@w3.org > October 2010

Re: Issue 101 Resolution

From: Bert Bos <bert@w3.org>
Date: Wed, 6 Oct 2010 21:36:09 +0200
To: www-style list <www-style@w3.org>
Message-Id: <201010062136.09937.bert@w3.org>
On Wednesday 06 October 2010 01:48:17 Tab Atkins Jr. wrote:
> This email is an attempt to resolve Issue 101
> (http://wiki.csswg.org/spec/css2.1#issue-101)

> Suggested Change
> ================

Why do you propose to change the spec? It's just an implementation bug, 
isn't it? One among others. It is only since version 3.5 or so that 
Firefox is able to handle left floats at all. And as recently as last 
year, right floats still didn't work in paragraphs with a non-zero 
text-indent. Should we have added a rule about floats and text indent 
to the spec? Some things apparently take time to fix.

The bug is probably the result of an "optimization" that wasn't thought 
through correctly. It's not intrinsic to the model and it clearly is 
possible to do correctly, as shown by several implementations that do 
not exhibit this bug.

You cannot change a standard that has been stable and implemented. That 
would be irresponsible. And foolish, if you want to remain in business.

That is true even if the changed behavior would be better in some way. 
But, in fact, it isn't better. It is much worse. It makes no sense that 
the width of the parent influences whether the two floats overlap. 
Floats shouldn't overlap in the first place. And if the parent has such 
influence, why not the grandparent? It just makes no sense at all.

Take this example. This is a little trick to center a green box, while 
there is already an orange box on the right. If there is not enough 
space for both, the green box is lowered.

    <!doctype html public '-//W3C//DTD HTML 4.01//EN'>
    <style type="text/css">
    .orange {width: 5em; height: 4em; background: orange; float: right}
    .green {width: 5em; height: 3em; background: lime; float: left}
    .centerwrapper {width: 5em; margin: auto}

    <div class=orange></div>
    <div class=centerwrapper>
      <div class=green></div>

(Try increasing the font size or narrowing the window until there is no 
room for green and orange side by side.) This works, both in the 
current spec and in Tab's proposed change. But in Tab's proposal only 
if the wrapper has the same width as the green box. In reality, it is 
easier to make a generic wrapper of width zero, and then the green box 
only needs to coordinate its own width and margins, as follows:

    .centerwrapper {width: 0; margin: auto}
    .green {width: 5em; margin-left: -2.5em;...}

Under Tab's proposal, however, this creates overlap.

I know there are other ways to get a similar effect, the best of which 
is maybe this:

    .centerwrapper {text-align: center}
    .green {display: inline-block;...}

(Except that that triggers another bug in the browsers: the green box is 
slightly off-center. :-( ) But, the existence of a workaround doesn't 
mean the bug can remain unfixed.

  Bert Bos                                ( W 3 C ) http://www.w3.org/
  http://www.w3.org/people/bos                               W3C/ERCIM
  bert@w3.org                             2004 Rt des Lucioles / BP 93
  +33 (0)4 92 38 76 92            06902 Sophia Antipolis Cedex, France
Received on Wednesday, 6 October 2010 19:36:38 UTC

This archive was generated by hypermail 2.4.0 : Friday, 17 January 2020 22:49:49 UTC