Am 27.05.11 02:54, schrieb Philippe Wittenbergh:
>
> On May 26, 2011, at 11:53 PM, Joergen W. Lang wrote:
>> http://www.joergen-lang.com/test/multicol.html
>>
>> This works fine in recent FFs. Chrome seems to "eat" the line above
>> the image. Safari drops the floated image completely.
>> Implementation issues?
>
> Partly - the Safari 5 implementation is based on an older version of
> the draft (observe the width of the columns between Safari 5 and
> Chrome 10+, Gecko 1.9.2+), and it has bugs. Both issues work
> correctly in recent webkit nightlies.
Ah, I understand. Safari 5 was released in June 2010, Chrome 8 (my
oldest version for testing) in December. So Saf 5 uses an older version
of webkit.
> David is right that putting the image inside the <p> allows it to
> show in Safari 5. Setting the column-width in percentages make it
> work the same in Safari 5 as Gecko 1.9.2+, WebKit nightlies/Chrome.
That's great news. So there is at least *one* way to make it work
consistently across browsers. Looks like jQuery as the tool of choice
for IE < 10, though. :(
> What Opera 11.11 does with column balancing has me seriously puzzled
> :-p.
I can only guess how Opera does the rendering. It appears as if the
image is added *after* the columns have been balanced. It looks as if
the re-balancing (after adding the image) only takes place in column 2
and 3 while col 1 stays untouched.
Any Opera experts?
Since Opera only supports CSS3 columns since 11.10 [1] this may be or
not a children's illness.
>> Error on my side?
>
> Yes ! :~) You need to at least specify a column-rule-style for the
> column-rule to display. ‘column-rule’ is a shorthand and works just
> the same as the ‘border’ shorthand. The default '-style’ is ‘none’.
> The ‘-color’ is optional; if not specified, it takes the<color>
> computed for the element.
>
> Thus: column-rule: 4px solid;
Oh, zut! Copy/Paste error! Sure, it works very much like the border-*
properties. Does not change Safari's weird behaviour, though. Putting
<img> inside <p> as David suggested does.
Thanks to both of you!
Jørgen
1: http://dev.opera.com/articles/view/css3-multi-column-layout/
______________________________________________________________________
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
