This is the second article recently in which I've encountered unexpected behavior when trying to align images.
https://en.wikipedia.org/wiki/White-cheeked_starling
Am I missing something, or is there a bug that's resulting in images being misplaced?
Pine
On Thu, Aug 6, 2015 at 11:07 PM, Pine W wiki.pine@gmail.com wrote:
This is the second article recently in which I've encountered unexpected behavior when trying to align images.
https://en.wikipedia.org/wiki/White-cheeked_starling
Am I missing something, or is there a bug that's resulting in images being misplaced?
This would be easier to answer if you explained what the unexpected behavior is :) If you are referring to the vertical positioning of the image, it is pushed down by the previous (right-floated) image which in turn is being pushed down by the infobox. CSS 2.1 9.5.1 http://www.w3.org/TR/CSS21/visuren.html#float-position has the exact (rather complex) ruleset for positioning floats, the relevant part here is that a float can never be higher than any preceding float, even if they are floated in different directions.
More specifically, my issue is that the two left-aligned thumbnail images, [[File:Mukudori 05z4384cs.jpg|left|200px|thumb|Adult male (left) and female]] and [[File:Mukudori 0406214s.jpg|thumb|left|Fledglings]], are being displaced downwards from where they should be. The first should be in the "Description" section, and the second should be "In popular culture" section.
Pine
On Fri, Aug 7, 2015 at 12:00 AM, Gergo Tisza gtisza@wikimedia.org wrote:
On Thu, Aug 6, 2015 at 11:07 PM, Pine W wiki.pine@gmail.com wrote:
This is the second article recently in which I've encountered unexpected behavior when trying to align images.
https://en.wikipedia.org/wiki/White-cheeked_starling
Am I missing something, or is there a bug that's resulting in images being misplaced?
This would be easier to answer if you explained what the unexpected behavior is :) If you are referring to the vertical positioning of the image, it is pushed down by the previous (right-floated) image which in turn is being pushed down by the infobox. CSS 2.1 9.5.1 http://www.w3.org/TR/CSS21/visuren.html#float-position has the exact (rather complex) ruleset for positioning floats, the relevant part here is that a float can never be higher than any preceding float, even if they are floated in different directions.
Multimedia mailing list Multimedia@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/multimedia
That's what Gergo explained. The right-floated video is pushing down the left-floated images, because floated images cannot be higher in a page than previously floated images. You can fix it by altering the location of the video (move it down, perhaps below the second image). But then there are various problems depending on screen/window width (e.g. "sandwiching" at narrow widths), which I don't have time to determine an optimum solution for.
On Fri, Aug 7, 2015 at 12:12 AM, Pine W wiki.pine@gmail.com wrote:
More specifically, my issue is that the two left-aligned thumbnail images, [[File:Mukudori 05z4384cs.jpg|left|200px|thumb|Adult male (left) and female]] and [[File:Mukudori 0406214s.jpg|thumb|left|Fledglings]], are being displaced downwards from where they should be. The first should be in the "Description" section, and the second should be "In popular culture" section.
Pine
On Fri, Aug 7, 2015 at 12:00 AM, Gergo Tisza gtisza@wikimedia.org wrote:
On Thu, Aug 6, 2015 at 11:07 PM, Pine W wiki.pine@gmail.com wrote:
This is the second article recently in which I've encountered unexpected behavior when trying to align images.
https://en.wikipedia.org/wiki/White-cheeked_starling
Am I missing something, or is there a bug that's resulting in images being misplaced?
This would be easier to answer if you explained what the unexpected behavior is :) If you are referring to the vertical positioning of the image, it is pushed down by the previous (right-floated) image which in turn is being pushed down by the infobox. CSS 2.1 9.5.1 http://www.w3.org/TR/CSS21/visuren.html#float-position has the exact (rather complex) ruleset for positioning floats, the relevant part here is that a float can never be higher than any preceding float, even if they are floated in different directions.
Multimedia mailing list Multimedia@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/multimedia
Multimedia mailing list Multimedia@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/multimedia
It seems to work as Pine expects in this article: https://sv.wikipedia.org/wiki/Stare
Perhaps someone made a change to the enwiki taxobox template?
*Med vänliga hälsningar,Jan Ainali*
Verksamhetschef, Wikimedia Sverige http://wikimedia.se 0729 - 67 29 48
*Tänk dig en värld där varje människa har fri tillgång till mänsklighetens samlade kunskap. Det är det vi gör.* Bli medlem. http://blimedlem.wikimedia.se
2015-08-07 23:38 GMT+02:00 quiddity pandiculation@gmail.com:
That's what Gergo explained. The right-floated video is pushing down the left-floated images, because floated images cannot be higher in a page than previously floated images. You can fix it by altering the location of the video (move it down, perhaps below the second image). But then there are various problems depending on screen/window width (e.g. "sandwiching" at narrow widths), which I don't have time to determine an optimum solution for.
On Fri, Aug 7, 2015 at 12:12 AM, Pine W wiki.pine@gmail.com wrote:
More specifically, my issue is that the two left-aligned thumbnail images, [[File:Mukudori 05z4384cs.jpg|left|200px|thumb|Adult male (left) and female]] and [[File:Mukudori 0406214s.jpg|thumb|left|Fledglings]], are being displaced downwards from where they should be. The first should be in the "Description" section, and the second should be "In popular culture" section.
Pine
On Fri, Aug 7, 2015 at 12:00 AM, Gergo Tisza gtisza@wikimedia.org wrote:
On Thu, Aug 6, 2015 at 11:07 PM, Pine W wiki.pine@gmail.com wrote:
This is the second article recently in which I've encountered unexpected behavior when trying to align images.
https://en.wikipedia.org/wiki/White-cheeked_starling
Am I missing something, or is there a bug that's resulting in images being misplaced?
This would be easier to answer if you explained what the unexpected behavior is :) If you are referring to the vertical positioning of the image, it is pushed down by the previous (right-floated) image which in turn is being pushed down by the infobox. CSS 2.1 9.5.1 http://www.w3.org/TR/CSS21/visuren.html#float-position has the exact (rather complex) ruleset for positioning floats, the relevant part here is that a float can never be higher than any preceding float, even if they are floated in different directions.
Multimedia mailing list Multimedia@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/multimedia
Multimedia mailing list Multimedia@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/multimedia
Multimedia mailing list Multimedia@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/multimedia
If you right-float that first image (just change "left" to "right"), it will show the same problem. Here's a preview: https://i.imgur.com/7hFNbf1.png
On Fri, Aug 7, 2015 at 2:53 PM, Jan Ainali jan.ainali@wikimedia.se wrote:
It seems to work as Pine expects in this article: https://sv.wikipedia.org/wiki/Stare
Perhaps someone made a change to the enwiki taxobox template?
*Med vänliga hälsningar,Jan Ainali*
Verksamhetschef, Wikimedia Sverige http://wikimedia.se 0729 - 67 29 48
*Tänk dig en värld där varje människa har fri tillgång till mänsklighetens samlade kunskap. Det är det vi gör.* Bli medlem. http://blimedlem.wikimedia.se
2015-08-07 23:38 GMT+02:00 quiddity pandiculation@gmail.com:
That's what Gergo explained. The right-floated video is pushing down the left-floated images, because floated images cannot be higher in a page than previously floated images. You can fix it by altering the location of the video (move it down, perhaps below the second image). But then there are various problems depending on screen/window width (e.g. "sandwiching" at narrow widths), which I don't have time to determine an optimum solution for.
On Fri, Aug 7, 2015 at 12:12 AM, Pine W wiki.pine@gmail.com wrote:
More specifically, my issue is that the two left-aligned thumbnail images, [[File:Mukudori 05z4384cs.jpg|left|200px|thumb|Adult male (left) and female]] and [[File:Mukudori 0406214s.jpg|thumb|left|Fledglings]], are being displaced downwards from where they should be. The first should be in the "Description" section, and the second should be "In popular culture" section.
Pine
On Fri, Aug 7, 2015 at 12:00 AM, Gergo Tisza gtisza@wikimedia.org wrote:
On Thu, Aug 6, 2015 at 11:07 PM, Pine W wiki.pine@gmail.com wrote:
This is the second article recently in which I've encountered unexpected behavior when trying to align images.
https://en.wikipedia.org/wiki/White-cheeked_starling
Am I missing something, or is there a bug that's resulting in images being misplaced?
This would be easier to answer if you explained what the unexpected behavior is :) If you are referring to the vertical positioning of the image, it is pushed down by the previous (right-floated) image which in turn is being pushed down by the infobox. CSS 2.1 9.5.1 http://www.w3.org/TR/CSS21/visuren.html#float-position has the exact (rather complex) ruleset for positioning floats, the relevant part here is that a float can never be higher than any preceding float, even if they are floated in different directions.
Multimedia mailing list Multimedia@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/multimedia
Multimedia mailing list Multimedia@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/multimedia
Multimedia mailing list Multimedia@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/multimedia
Multimedia mailing list Multimedia@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/multimedia
Sure, but in both examples all images are left floated but they behave differently.
*Med vänliga hälsningar,Jan Ainali*
Verksamhetschef, Wikimedia Sverige http://wikimedia.se 0729 - 67 29 48
*Tänk dig en värld där varje människa har fri tillgång till mänsklighetens samlade kunskap. Det är det vi gör.* Bli medlem. http://blimedlem.wikimedia.se
2015-08-08 0:06 GMT+02:00 quiddity pandiculation@gmail.com:
If you right-float that first image (just change "left" to "right"), it will show the same problem. Here's a preview: https://i.imgur.com/7hFNbf1.png
On Fri, Aug 7, 2015 at 2:53 PM, Jan Ainali jan.ainali@wikimedia.se wrote:
It seems to work as Pine expects in this article: https://sv.wikipedia.org/wiki/Stare
Perhaps someone made a change to the enwiki taxobox template?
*Med vänliga hälsningar,Jan Ainali*
Verksamhetschef, Wikimedia Sverige http://wikimedia.se 0729 - 67 29 48
*Tänk dig en värld där varje människa har fri tillgång till mänsklighetens samlade kunskap. Det är det vi gör.* Bli medlem. http://blimedlem.wikimedia.se
2015-08-07 23:38 GMT+02:00 quiddity pandiculation@gmail.com:
That's what Gergo explained. The right-floated video is pushing down the left-floated images, because floated images cannot be higher in a page than previously floated images. You can fix it by altering the location of the video (move it down, perhaps below the second image). But then there are various problems depending on screen/window width (e.g. "sandwiching" at narrow widths), which I don't have time to determine an optimum solution for.
On Fri, Aug 7, 2015 at 12:12 AM, Pine W wiki.pine@gmail.com wrote:
More specifically, my issue is that the two left-aligned thumbnail images, [[File:Mukudori 05z4384cs.jpg|left|200px|thumb|Adult male (left) and female]] and [[File:Mukudori 0406214s.jpg|thumb|left|Fledglings]], are being displaced downwards from where they should be. The first should be in the "Description" section, and the second should be "In popular culture" section.
Pine
On Fri, Aug 7, 2015 at 12:00 AM, Gergo Tisza gtisza@wikimedia.org wrote:
On Thu, Aug 6, 2015 at 11:07 PM, Pine W wiki.pine@gmail.com wrote:
This is the second article recently in which I've encountered unexpected behavior when trying to align images.
https://en.wikipedia.org/wiki/White-cheeked_starling
Am I missing something, or is there a bug that's resulting in images being misplaced?
This would be easier to answer if you explained what the unexpected behavior is :) If you are referring to the vertical positioning of the image, it is pushed down by the previous (right-floated) image which in turn is being pushed down by the infobox. CSS 2.1 9.5.1 http://www.w3.org/TR/CSS21/visuren.html#float-position has the exact (rather complex) ruleset for positioning floats, the relevant part here is that a float can never be higher than any preceding float, even if they are floated in different directions.
Multimedia mailing list Multimedia@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/multimedia
Multimedia mailing list Multimedia@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/multimedia
Multimedia mailing list Multimedia@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/multimedia
Multimedia mailing list Multimedia@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/multimedia
Multimedia mailing list Multimedia@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/multimedia
On Fri, Aug 7, 2015 at 3:11 PM, Jan Ainali jan.ainali@wikimedia.se wrote:
Sure, but in both examples all images are left floated but they behave differently.
The top edge of a floated box can never be higher than the top edge of another floated box that precedes it in document order (ie. appears first in wikitext). That's true of both pages. Typically you have this problem when a big infobox pushes down a right-floated image (because they are both right-floated) and that image pushes down a left-floated image (because of the top edge rule).
In other words what happens is that when a float gets pushed down, all following floats get pushed down as well - the first float stays on top of them. The infobox pushes File:Sturnus cineraceus - feeding - Japan- 2014.ogv down (it's actually defined at the very beginning of the article) and the left-hand images are pushed down to stay below it. When all floats are all on the same side, this kind of chained pushing effect is exactly how you would expect the to behave; but for those which are on the other side, and look unrelated, it's very unintuitive.
There are workarounds for this at varying levels of crappiness; you can wrap the infobox and the video in a single floated div, you can reposition the video, I think there is even a script around that does that dynamically, but none of those are great, and dumping huge blocks of non-text into an article without any kind of organization is just not a very good way of creating a readable document.
I see, somehow I missed the video completely.
It looks much better now: https://en.wikipedia.org/w/index.php?title=White-cheeked_starling&type=r...
*Med vänliga hälsningar,Jan Ainali*
Verksamhetschef, Wikimedia Sverige http://wikimedia.se 0729 - 67 29 48
*Tänk dig en värld där varje människa har fri tillgång till mänsklighetens samlade kunskap. Det är det vi gör.* Bli medlem. http://blimedlem.wikimedia.se
2015-08-08 1:25 GMT+02:00 Gergo Tisza gtisza@wikimedia.org:
On Fri, Aug 7, 2015 at 3:11 PM, Jan Ainali jan.ainali@wikimedia.se wrote:
Sure, but in both examples all images are left floated but they behave differently.
The top edge of a floated box can never be higher than the top edge of another floated box that precedes it in document order (ie. appears first in wikitext). That's true of both pages. Typically you have this problem when a big infobox pushes down a right-floated image (because they are both right-floated) and that image pushes down a left-floated image (because of the top edge rule).
In other words what happens is that when a float gets pushed down, all following floats get pushed down as well - the first float stays on top of them. The infobox pushes File:Sturnus cineraceus - feeding - Japan- 2014.ogv down (it's actually defined at the very beginning of the article) and the left-hand images are pushed down to stay below it. When all floats are all on the same side, this kind of chained pushing effect is exactly how you would expect the to behave; but for those which are on the other side, and look unrelated, it's very unintuitive.
There are workarounds for this at varying levels of crappiness; you can wrap the infobox and the video in a single floated div, you can reposition the video, I think there is even a script around that does that dynamically, but none of those are great, and dumping huge blocks of non-text into an article without any kind of organization is just not a very good way of creating a readable document.
Multimedia mailing list Multimedia@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/multimedia
multimedia@lists.wikimedia.org