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

[kajalgohel]

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%;
}

[kajalgohel]

display: inline-block property is removed.

[SergeyBiryukov]

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

Introduced in [17776] / #17198.

[audrasjb]

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

[kajalgohel]

Hi @audrasjb

Can u please provide the steps for testing ?

Thanks

[audrasjb]

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]

width decrease by 1% and float: left removed.

[sabernhardt]

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

[sabernhardt]

​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]

Added patch

[audrasjb]

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]

removing float, with smaller width and vertical alignment

[sabernhardt]

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

[sabernhardt]

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).

[peterwilsoncc]

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

[costdev]

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.

[sabernhardt]

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