Page MenuHomePhabricator

Floating image on left covers bullet points of a list
Closed, DuplicatePublic

Description

An it:voy user has an issue to display correctly an image left-aligned that has a bullet list on its right side.

The problem consist on the fact that the bullet points are covered by the image, and to show them that user has been forced to convert "*" into "****" in order to shift them outside the image. It works also with ":::*".

If I add the thumb parameter to the image everything is shown correctly, but without it we have that issue.

I've tested the code in https://it.wikivoyage.org/wiki/Arqu%C3%A0_Petrarca#In_treno also in en:w and in it:w and I got the same output.

Is it something that can be corrected? I think it could be useful for all the wikis.


Version: 1.22.0
Severity: minor
URL: https://it.wikivoyage.org/wiki/Arqu%C3%A0_Petrarca#In_treno
See Also:
https://bugzilla.wikimedia.org/show_bug.cgi?id=27

Details

Reference
bz53991

Event Timeline

bzimport raised the priority of this task from to Low.Nov 22 2014, 2:06 AM
bzimport added a project: MediaWiki-Parser.
bzimport set Reference to bz53991.
bzimport added a subscriber: Unknown Object (MLST).

I think that because of the same issue, the bullet list in https://it.wikivoyage.org/wiki/Sulzano is shown align the text with the paragraph instead of aligning the bullet with the paragraph.

PS I'm referring to the list in the top of the page inside the paragraph called "Introduzione".

Which revision on https://it.wikivoyage.org/wiki/Arqu%C3%A0_Petrarca#In_treno exposes the problem? None of the revisions since 312321 hide the bullet points of the list in Firefox 23.0.1 on Fedora 19.
Also in general, browser information is always welcome.

I use Chrome. To "see" the hidden bullet, modify the section substituting the "****" into "*" and then preview it.

I've just tested it with IE and it has the same behaviour.
Another user with safari has just tested it, and he sees the same issue.

Furthermore with IE the "****" patch is not applicable because the generated HTML is different; it creates void bullets above.

So I've just substitute them with ":::*"; this seems to have an identical rendering in all the browser.

I suppost this is another stuff that should be corrected.

Thanks. Confirming after turning :::* into * for

In treno

[[File:Italian traffic signs - icona stazione fs.svg|60px|left|]] Le stazioni ferroviarie più vicine sono quelle di:

  • [[Montegrotto Terme]]: sulla direttrice [[Padova]]-[[Bologna]] da cui Arquà Petrarca dista 15 min;
  • [[Monselice]];

{{-}}

Let me add further details hoping that someone sooner or later would look into this bug trying to fix it.

With this code (using thumb):
[[File:Reggia di Colorno.jpg|100px|left|thumb|Reggia di Colorno]]

  • test text

The bullet is shown correctly.

With this code (without thumb):
[[File:Reggia di Colorno.jpg|100px|left|Reggia di Colorno]]

  • test text

The bullet is not shown and the work around is the following:
[[File:Reggia di Colorno.jpg|100px|left|Reggia di Colorno]]
:::::* test text

but clearly the resolution and the zoom could affect the layout.

It seems that 10 years ago has been opened a similar ticket (bug 27). ...and is not yet sovled...

Andyrom75 set Security to None.

According to the @TheDJ comment on bug T13782, I've reopened this bug because it's not a duplicate.

I take the chance to insert here again my comment (previously published on the other bug):


In line with bug T55991 (duplicate of this specific bug) that I've opened time ago, I was able to fix the issue forcing:
div.floatleft {
margin-right:1.5em;
}

Now the output is identical to the image that use the thumb parameter.

In https://it.wikivoyage.org/w/index.php?title=Castel_Goffredo&oldid=394614 is visible its effect.


Can this fix be evaluated & tested to be implemented server side, instead of patching the project configuration?

Thanks

The reported issues may seem different, but the root cause is the same, and known.

Please see T13782#1059000 for a (local) solution that has been implemented in English Wikipedia.

(I cannot seem to select "duplicate", otherwise I would have closed this task.)

Local patch on it:voy can be found here https://it.wikivoyage.org/wiki/MediaWiki:Common.css (last lines).

The question is: is it applicable server side instead of locally?

Got it. Let's put in another way. Why the behaviour of an image without frame is different from an image with the frame (i.e. thumb parameter)?
Apparently I don't see any reason.

Because the frame comes with a (wider) margin.

Why? Can't both have the same margin?

Non-floating content never has side margins.

Maybe I'm naive, but I'm not sure to have understood it.
When you say "never" are you referring to wiki projects, right?
In the affermative case, I would tend to repropose my previous question: why?
I mean, I don't say that is necessarely wrong, but actually I can't figure out a use that require such difference.
Do you have any in your mind, just to clarify my doubt?

I was referring to content in general. The main text usually 'flows' around floating obejcts like images and infoboxes. These floating elements have margins to prevent them from colliding with the main content. Since the floating object reside inside the main content, giving a margin to the main content makes no sense.

That said, the lists already have a left margin (to facilitate indenting); but that margin is negated due to a conflicting internal ruleset in CSS, which shows when the list flows around any floating element. There is nothing we can do about that. The only recourse is to use a container (another div) to resolve that conflict, and that is what the {{Flowlist}} template does.

The reported issues may seem different, but the root cause is the same, and known.

...hence merging this task into T13782 (again).