WordPress.org

Make WordPress Core

Opened 3 years ago

Last modified 3 months ago

#44829 new defect (bug)

Twenty Sixteen: Microsoft Edge -- List Item Display Problem

Reported by: pracko Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version: 4.9.8
Component: Bundled Theme Keywords:
Focuses: ui Cc:

Description

When a left-aligned image is adjacent to a UL in MS Edge browser, a large gap appears between the list-item disc and the text within the LI.

This problem does not occur in Chrome or Firefox.

https://imgur.com/NPYJ7Pw

Attachments (3)

NPYJ7Pw - Imgur.jpg (31.8 KB) - added by SergeyBiryukov 3 years ago.
2016-left-image-list-edge-91.jpg (73.5 KB) - added by sabernhardt 3 months ago.
Twenty Sixteen: lists next to a left-aligned image in Edge 91 (Windows)
left-aligned-image-text-wrap.png (176.1 KB) - added by sabernhardt 3 months ago.
an extreme example of text wrapping around a floating image

Download all attachments as: .zip

Change History (8)

#1 @joyously
3 years ago

I think I've seen it in SeaMonkey browser.

#2 follow-up: @SergeyBiryukov
3 years ago

  • Component changed from General to Bundled Theme
  • Focuses ui added
  • Keywords reporter-feedback added

Hi @pracko, welcome to WordPress Trac! Thanks for the report.

Which theme are you seeing the issue in?

#3 in reply to: ↑ 2 @pracko
3 years ago

Replying to SergeyBiryukov:

Hi @pracko, welcome to WordPress Trac! Thanks for the report.

Which theme are you seeing the issue in?

I have tested and confirmed this problem on both Twenty Sixteen and Customify themes. Here is screenshot of the problem in Twenty Sixteen (previous screenshot is using Customify) :

https://imgur.com/a/OPy7k2R

#4 @laurelfulford
3 years ago

  • Keywords reporter-feedback removed
  • Summary changed from Microsoft Edge: List Item Display Problem to Twenty Sixteen: Microsoft Edge -- List Item Display Problem

@sabernhardt
3 months ago

Twenty Sixteen: lists next to a left-aligned image in Edge 91 (Windows)

#5 @sabernhardt
3 months ago

The modern, Chromium-based Edge correctly places list item markers next to the text. I can't test legacy Edge, but Internet Explorer 11 had the same problem with the markers after a left-floated element (in Twenty Fifteen and Twenty Seventeen as well).

A different issue with the aligned images is that now the block default style overrides the Twenty Sixteen margins for alignleft and alignright, so bullet points can touch the image. Twenty Seventeen has an additional rule to re-establish the side margin, and something similar might belong in Twenty Sixteen.

If you want to add an image to the left of text, however, I recommend using the Columns block or another way to set them side-by-side that does not involve floating. The text can wrap around the image poorly at various screen/browser widths.

@sabernhardt
3 months ago

an extreme example of text wrapping around a floating image

Note: See TracTickets for help on using tickets.