Question only: Weird HTML showing up

[MirandaEcho]

We have this weird thing where in a number of stories, there’s a code in the original HTML on our Drupal site that looks like this:

<li dir="ltr">
      <p> XXXXXXX </p>
</li>

Not sure how that slipped into our editorial workflow. ... It’s unnecessary to have “direction=left to right” in the code, but it displays fine on Drupal. But it breaks in Wordpress — the bullet is on the line above the text. We could go in and fix all of these instances, but it would be a royal pain. Is there a stylesheet fix?

Examples:

{Bullets wonky on Wordpress: http://sfpublicpress.flywheelsites.com/san-francisco-shelter-in-place-order-could-be-extended-next-week} {Bullets coded the same but appearing fine on Drupal: https://sfpublicpress.org/news/2020-04/san-francisco-shelter-in-place-order-could-be-extended-next-week} {For reference, no wonky coding on Drupal: https://sfpublicpress.org/news/2020-01/california-agency-is-hiding-uber-and-lyft-accident-reports}

This will likely be a post-launch thing if there is a programmatic way to handle, but its worth us taking a quick look at now to know either way

[joshdarby]

@MirandaEcho These list items aren't breaking because of the dir="ltr" attribute. They're breaking because there's a <p> tag holding the text inside of the list item element.

The easiest solution for this would be to just add a display: inline; css attribute to any <p> tags inside of list items.

[MirandaEcho]

Thanks @joshdarby! Is that something John could add to the CSS customizer or would it need to go into the stylesheets?

[joshdarby]

@MirandaEcho It would be a better idea for us to update the theme styles.