338526 - edit link on russian wikipedia overlaps with text when there are floating images on the right

Status: RESOLVED DUPLICATE of bug 538194

(Core :: Layout: Floats, defect, P5)

Description

[snaury]

User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.0.3) Gecko/20060426 Firefox/1.5.0.3
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.0.3) Gecko/20060426 Firefox/1.5.0.3

It is not really a first time I see this, however it is first time I paid attention to this. When I came arcoss this article on Okami game on russian wikipedia, I found that the edit links (which are also floating) strangely overlap with the text, and it seems (I'm not sure) to be in correlation with floating images on the right (which get pushed to the very low part of article due to big information float at the top), since this problem is not present in english article (which does not have images). Since Internet Explorer is rendering this well, I thought this might be a bug. I'll attach a screenshot after filing this bug, just in case.

Reproducible: Always

Steps to Reproduce:
1. Set your monitor resolution to 1024x768 and maximize browser window
2. Navigate to http://ru.wikipedia.org/wiki/Okami
3. Go the lowest part of article

Actual Results:  
You will see several edit links crowded altogether, overlapping with the text

Expected Results:  
Edit links are rendered to the right of each sub title.

Comment 1

[snaury]

Attachment: A screenshot of the problem

Comment 2

[John Vandenberg]

I also see this on Mozilla/5.0 (Windows; U; Windows NT 5.1; en-GB; rv:1.8.1.3) Gecko/20070309 Firefox/2.0.0.3

Changing the window size causes these floats to move all over the place.

Comment 3

[Alex]

Attachment: Bug 338526 testcase

Comment 4

[Alex]

I also see this
1) on http://en.wikipedia.org/wiki/Doom
2) using Opera 9.10
I think submitter should have put much more thought into this.

Anyway, I created a testcase above, but I'm not good enough at CSS to know how this was supposed to be rendered.

Comment 5

[John Vandenberg]

Attachment: floating edit links overlap text on [[Doom]]

I can also see this on the Doom article after I resized the window.

Comment 6

[John Vandenberg]

IE 6 renders the floats beside the section headers so that they are always clear of any text.

FF2 and Opera 9.2 both place the floats all over the place, but more importantly, FF2 is putting the floats over the top of the flowing text as shown by two screenshots.

I cant reproduce the overlapping on Opera 9.2.

Comment 7

[dan.gorski]

Reproducible in all versions of Mozilla I've used, 1.5, 1.6, 2.0 and now 3.0;
can be easily seen here:

http://en.wikipedia.org/wiki/Portal:Current_events/Science_and_technology

Comment 8

[Just Me]

Attachment: improved testcase

This should make the bug much more readily apparent with all font size / window width combinations (I couldn't see what the problem was with the previous testcase).

However, while IE7 displays the content with no overlap, the bug appears on Safari and Opera too, so perhaps we are rendering according to spec? I'm not knowledgeable on this, but if this is indeed the correct rendering we should tell Wikipedia to fix their CSS. Can anybody confirm?

Comment 9

[Just Me]

Webkit developer Dave Hyatt confirms this behaviour is indeed a bug:

https://bugs.webkit.org/show_bug.cgi?id=18250#c7

Comment 10

[Hallvord R. M. Steen [:hallvors]]

Still an issue in TC https://bug338526.bmoattachments.org/attachment.cgi?id=326887 although no longer a problem on Wikipedia, so I lower priority.

Comment 11

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

Attachment 326887 [details] was fixed by bug 538194.  I don't see the problem using the earlier testcase.