Make WordPress Core

Opened 21 months ago

Closed 6 months ago

#55338 closed enhancement (wontfix)

Twenty Eleven: Invalid use of display and float together in style.css file

Reported by: kajalgohel's profile kajalgohel Owned by:
Milestone: Priority: normal
Severity: normal Version: 3.2
Component: Bundled Theme Keywords: has-patch needs-testing close
Focuses: css Cc:

Description

In the theme Twenty Eleven, there is an invalid use of float and display inline-block together in the CSS style sheet.

.indexed.format-image div.entry-meta {
	display: inline-block;
	float: left;
	width: 35%;
}

Attachments (7)

#55338.patch (378 bytes) - added by kajalgohel 21 months ago.
display: inline-block property is removed.
16c4d8dd4b8e6390250e32311204a1fb.gif (1.2 MB) - added by audrasjb 21 months ago.
#55338.2.patch (446 bytes) - added by kajalgohel 21 months ago.
width decrease by 1% and float: left removed.
55338.3.patch (511 bytes) - added by sabernhardt 21 months ago.
moving display: inline-block to (only) the second .entry-meta div
#55338.4.patch (406 bytes) - added by rehanali 21 months ago.
Added patch
55338.5.patch (486 bytes) - added by sabernhardt 21 months ago.
removing float, with smaller width and vertical alignment
floated-element-5.9.png (2.3 KB) - added by sabernhardt 21 months ago.
text in floated element (currently) can touch the next element

Download all attachments as: .zip

Change History (22)

@kajalgohel
21 months ago

display: inline-block property is removed.

#1 @kajalgohel
21 months ago

  • Keywords has-patch needs-testing added; needs-patch removed

#2 @SergeyBiryukov
21 months ago

  • Component changed from Themes to Bundled Theme
  • Milestone changed from Awaiting Review to 6.0
  • Summary changed from Invalid use of display and float together in style.css file to Twenty Eleven: Invalid use of display and float together in style.css file

Hi there, welcome back to WordPress Trac! Thanks for the patch.

Introduced in [17776] / #17198.

#3 @audrasjb
21 months ago

Hello and thank you for opening this ticket and for the patch!

However, I reproduced the context (image post format and blog/archive page) and it looks like we shouldn't remove this since it applies to both .entry-meta divs. Removing this CSS declaration breaks the design of the meta box on my side.

See the animated screenshot below

#4 @kajalgohel
21 months ago

Hi @audrasjb

Can u please provide the steps for testing ?

Thanks

#5 @audrasjb
21 months ago

  1. Use Twenty Eleven on your website
  2. Publish a post with the "Image" post format
  3. Go to front-end
  4. Inspect the entry-meta zone (see animated screenshot above)

@kajalgohel
21 months ago

width decrease by 1% and float: left removed.

#6 @kajalgohel
21 months ago

  • Keywords needs-design-feedback added

@sabernhardt
21 months ago

moving display: inline-block to (only) the second .entry-meta div

#7 @sabernhardt
21 months ago

  • Focuses css added
  • Keywords needs-design-feedback removed

Browsers compute floated inline-block elements as block anyway, so I do not think a change is necessary. However, inline-block only needs to apply to the un-floated second .entry-meta div.

@rehanali
21 months ago

Added patch

#8 @costdev
21 months ago

  • Version set to 3.2

#9 @audrasjb
21 months ago

  • Keywords close added

I feel a bit hesitant about this change. Does it solves any known issue? Does it helps passing CSS validation? Does it brings more "quality" to the theme?

If we can't find any relevant answer to these question, I'd suggest to close the ticket as wontfix.

I feel a bit concerned about breaking things for people who override the default behavior of this theme using a child theme, without solving any identified issue.

@sabernhardt
21 months ago

removing float, with smaller width and vertical alignment

@sabernhardt
21 months ago

text in floated element (currently) can touch the next element

#10 @sabernhardt
21 months ago

I lean toward closing, or at least I agree that my earlier patch is not safe enough.

The W3C CSS Validator only labels the negative padding (#46771) and the device-width entries as errors, and the float/display combination does not appear in the warnings list either.

Both CSS Portal and Code Beautify alert about the floating under the message "Require properties appropriate for display" (one identifies it as an error, the other calls it a warning).

I took another look at 55338.2.patch. As long as the vertical alignment is set, removing the float and reducing the width might be worth considering. Without floating, the two inline-block elements can have a slight space between them that is not always there on smaller screens (depending on content).

Last edited 21 months ago by sabernhardt (previous) (diff)

#11 @peterwilsoncc
21 months ago

Re the close discussion, #55362 is very similar so it seems sensible to make the same decision for both.

This ticket was mentioned in Slack in #core-themes by peterwilsoncc. View the logs.


20 months ago

#13 @costdev
20 months ago

  • Milestone changed from 6.0 to 6.1

With 6.0 Beta 1 released yesterday, I'm moving this ticket, and #55362 to the 6.1 milestone pending further discussion on whether this change is desired.

#14 @sabernhardt
15 months ago

  • Milestone changed from 6.1 to Future Release

With 6.1 Beta 1 next week, I'll move #55338 and #55362 to Future Release for a decision.

#15 @sabernhardt
6 months ago

  • Milestone Future Release deleted
  • Resolution set to wontfix
  • Status changed from new to closed

The proposal to retire old themes is not finalized yet, but I'll count that as the decision to close these two minor enhancement tickets.

Note: See TracTickets for help on using tickets.