Question

I’ve got a small issue with Derobin’s implementation of WMD editor.

It doesn’t seem to be formatting properly and I’m not entirely sure why. Though I’m not sure if I should be asking this on Doctype or not either.

I was using the markdown text examples from the SO reference, which of course should look like the below:

1. Lists in a list item:
   • Indented four spaces.
     • indented eight spaces.
   • Four spaces again.

2. Multiple paragraphs in a list items:
   It’s best to indent the paragraphs four spaces
   You can get away with three, but it can get
   confusing when you nest other things.
   Stick to four.

   We indented the first line an extra space to align
   it with these paragraphs. In real use, we might do
   that to the entire list so that all items line up.

   This paragraph is still part of the list item, but it looks messy to humans. So it’s a good idea to wrap your nested paragraphs manually, as we did with the first two.

3. Blockquotes in a list item:

Skip a line and
indent the >’s four spaces.

4. Preformatted text in a list item:

   Skip a line and indent eight spaces.
   That's four spaces for the list
   and four to trigger the code block.
   

However, what I get looks like this:

I think this is CSS related, but I can’t see what’s causing it. I can post the CSS if it’s needed but I’d probably post all of it as I’m not sure what’s causing it. However, I’m not sure if it could be the actual script itself (which I find doubtful as the examples work and I have merely copied the same exact code).

I should also point out, that the example that comes with the download of WMD works fine on it’s own, but once I add it to my application, the above occurs.

I should also add that this problem is persistent in IE7/8 and Firefox 3.5.

Any help is much appreciated.

---

EDIT: Solved the Bullets/Numbers appearing outside the box with adding CSS style for ol and ul of list-style-position: inside; but the rest still remains the same.

EDIT: Edit based on user comments. The HTML being output is:

<ol>
<li>Lists in a list item:
<ul><li>Indented four spaces.
<ul><li>indented eight spaces.</li></ul></li>
<li>Four spaces again.</li></ul></li>
<li><p>Multiple paragraphs in a list items:
It's best to indent the paragraphs four spaces
You can get away with three, but it can get
confusing when you nest other things.
Stick to four.</p>

<p>We indented the first line an extra space to align
it with these paragraphs.  In real use, we might do
that to the entire list so that all items line up.</p>

<p>This paragraph is still part of the list item, but it looks messy to humans. So it's a good idea to wrap your nested paragraphs manually, as we did with the first two.</p></li>
<li><p>Blockquotes in a list item:</p></li>
</ol>

<blockquote>
<p>Skip a line and
indent the >'s four spaces.</p>
</blockquote>

<ol>
<li><p>Preformatted text in a list item:</p>

<pre><code>Skip a line and indent eight spaces.
That's four spaces for the list
and four to trigger the code block.
</code></pre></li>
</ol>

Answer 1

in your css file you have this:

* {
    margin:0;
    padding:0;
}

which is a universal reset that removes padding and margin from everything. As I said on Doctype.com.

You will need to remove that, and use a more controllable reset, or set some default padding and margins for ul’s and li’s in general.

As every browser seems to have different defaults for ul’s I tend to omit them from my reset and set nav ul’s specifically.

here’s the reset I use:

div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, acronym, address, big, cite, code,
del, dfn, font, img, ins, kbd, q, s, samp,
small, strike, sub, sup, tt, var,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-weight: inherit;
    font-style: inherit;
    font-size: 100%;
    font-family: inherit;
    vertical-align: baseline;
    }

which resets almost everything other than lists.