373427 - enhance: css float+clear similar to IE

Status: NEW

(Core :: Layout: Floats, defect)

Description

[Biju]

Provide a -moz CSS mechanize to create an effect similar to MS-IE for mediawiki pages with a lots of adjacent float images.
an example being http://en.wikipedia.org/wiki/Quagga#Attempted_revival

see the IE vs Fx difference
attachment 257894 [details] - wiki_fx3.png
attachment 257896 [details] - wiki_fx2.png
attachment 257898 [details] - wiki_ie6.png
from bug 373260

Or if there is a way to do the same with current CSS.
make this as an evangelism bug, and advice mediawiki/wikipedia

Comment 1

[David Baron :dbaron: (⌚️UTC-5, no longer working on Mozilla)]

I don't think this enhancement request makes sense.  I don't think those edit links should be floats at all.

That said, if the edit link and the header were both inside an inline-block, the edit link could be a float.  The question then would be how to make the inline-block be the right width in the presence of floats.  (The desired width is the width between the floats; there's not a term for it in CSS, and it might not even be a unique number since it could vary with height.)

The same width issue might come up if using tables.

It could also probably just be done with negative margins and text-align.

Comment 2

[David Baron :dbaron: (⌚️UTC-5, no longer working on Mozilla)]

Though I suppose maybe an enhancement isn't that crazy given that floats really don't get along with any other interesting type of layout system in any reasonable way, so given that the page already uses floats it should probably use only floats.

Comment 3

[philippe (part-time)]

Wikipedia could fix their stylesheet by using 'overflow:hidden' on those h2 elements (aka establish a new block formatting context to isolate those small floated blocks).

Comment 4

[Biju]

Attachment: Quagga_1.htm

(In reply to comment #3)
> Wikipedia could fix their stylesheet by using 'overflow:hidden'
> on those h2 elements 


Looks like that works.  See attached Quagga_1.htm

<style>
 #content  h2 {overflow:hidden}
</style>

By adding above, this float issue is resolved.

So...

1. If it is the right CSS way to do it, we can reclassify this as an evangelism bug.

2. But this fix does not solve same problem in another case.
Example along with "float:right" list, if there is also a second list with "float:left" to provide images on left and right of the article. see attachment Quagga_2.htm Quagga_3.htm, IE6 it looks good (see  ie6_left_right_quagga.png)
So I think we really need a -mox enhancement. 
Let me know if i need to create another bug for that.

Comment 5

[Biju]

Attachment: Quagga_2.htm

Comment 6

[Biju]

Attachment: Quagga_3.htm

Comment 7

[Biju]

Attachment: ie6_left_right_quagga.png

Comment 8

[Biju]

both Quagga_2.htm and Quagga_3.htm looks same in IE
Some part of ie6_left_right_quagga.png images were removed to reduce it less than 300kb.