Markdown lists display in different browsers

I noticed a strange behavior of displaying lists in both Markdown (Source) and Scribe (BWD) stacks. This happens with ordered and unordered lists.

Please, take a look at what I am seeing in Safari (as intended):

In Firefox, Brave and Opera (unexpected):

How can this be explained? Is there a remedy for this?

BTW, I don’t know what this looks like in Chrome or Edge, because I don’t have those browsers installed.

Here’s what I get previewing locally in FireFox and using Source Markdown stack.

Here is how I got it marked up in my Markdown and Scribe stacks:

1. **CERTIFICATES**: birth / baptism / death / marriage / divorce;

2. **CERTIFICATES**: high school diploma / graduation / army recruitment card / ID book / ID card / employment;

3. **RECOGNITION**: appointment / merit / award;

4. **OTHER**: passenger list / census / obituary / photograph.

What markup do you use, Rob?

BTW. Here’s my Markdown setup (click on the image to see it all):

@fapkogi I don’t know where the problem is, but I just tried your markdown, published and all looked fine in Safari, Firefox, Opera, and Chrome. See attached image of the markdown I used. Also my image from Firefox (but they all looked the same).

Technically speaking the markdown you present is “wrong” for lists. You seem to have a line break between each number in a list. There should be no line break. I realize that in fact there may be no line break and it’s an optical illusion on my part! But if you did have line breaks that’s one thing to correct.

I use the Markdown stack that comes with RW. So I’d try that as a check. It might let you know if there’s something “off” in the Markdown Source and Scribe stacks. I doubt it, but worth a check.

and

1 Like

The problem is as @mitchellm says - the lines between the list items This adds a paragraph tag inside each list item. Firefox defaults to list style decimal inside and pushed the paragraph to the next line. If you change the ol list-style to decimal ouside then the list marker number moves to the left of the div and the paragraph text remains on the same line.

All stacks including the Stacks Markdown stack just use the same markdown processor. None do or can do anything different in terms of the HTML generated - i.e. stacks play no part in it, just the same as RW styled text works in text and paragraph stacks.

With and without extra line breaks in markdown code :

2 Likes

Thanks @tav.

I find lists are probably the element of Markdown where people make the most mistakes. One is the no line break. The other common mistake is lists need a line break before they begin and another line break after the end. If those aren’t in place other wonky things happen.

What’s cool about markdown is you can have 1 or more line breaks before and after: it won’t make any difference. But there needs to be at least 1.

1 Like

Thank you, guys. You were right. When I eliminated lines between list items, everything lined up properly now.

This is a bit embarrassing because I thought I have checked it both with and without lines in between, but apparently I have not…

1 Like