Nachdem ein paar Probleme mit Derobins MVW

Question

Ich habe ein kleines Problem mit Derobin Implementierung von WMD-Editor bekam.

Es scheint nicht richtig Formatierung zu werden, und ich bin mir nicht ganz sicher, warum. Obwohl ich bin mir nicht sicher, ob ich das auf Doctype stellen sollten oder nicht.

Ich war mit den Abschlag Textbeispiele aus der SO Referenz, das natürlich wie unten aussehen:

1. Listen in einer Liste Artikel:
   • vier Leerzeichen eingerückt.
     • eingekerbt acht Räume.
   • Vier Räume wieder.

2. Mehrere Absätze in einem Listenelement: Es ist am besten, die Absätze vier Leerzeichen einrücken Sie können mit drei weg, aber es kann erhalten verwirrend, wenn Sie nisten andere Dinge. Halten Sie sich an vier.

   Wir eingerückt der ersten Zeile einen zusätzlichen Raum zu align es mit diesen Absätzen. Im realen Einsatz, könnten wir tun dass auf die gesamte Liste, so dass alle Elemente in einer Reihe aufstellen.

   Dieser Absatz ist nach wie vor Teil des Listenelementes, aber es sieht chaotisch auf den Menschen. So ist es eine gute Idee, um Ihre verschachtelten Absätze manuell wickeln, wie wir mit den ersten beiden taten.

3. Blockzitate in einem Listenpunkt:

  

Skip Linie und   Einzug der> 's vier Räume.

4. vorformatierte Text in einem Listenpunkt:

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

Was ich jedoch aussieht bekommen wie folgt aus:

Ich denke, das CSS ist verwandt, aber ich kann nicht sehen, was es verursacht. Ich kann die CSS schreiben, wenn sie gebraucht wird, aber ich würde wahrscheinlich alles davon schreiben, wie ich bin nicht sicher, was es verursacht. Allerdings bin ich nicht sicher, ob es das eigentliche Skript könnte selbst (was ich zweifelhaft finden, wie die Beispiele arbeiten, und ich habe nur exakt das gleiche Code kopiert).

Ich mag auch darauf hinweisen, dass das Beispiel, das mit dem Download von WMD kommt funktioniert auf es selbst ist, aber wenn ich es zu meiner Anwendung hinzufügen, tritt das oben.

Ich möchte auch hinzufügen, dass dieses Problem in IE7 persistent / 8 und Firefox 3.5.

Jede Hilfe ist sehr geschätzt.

---

EDIT: Gelöst die Kugeln / Zahlen außerhalb der Box erscheinen mit CSS-Style Zugabe für ol und ul list-style-position: innen; aber der Rest bleibt gleich.

EDIT: Bearbeiten basierend auf Benutzerkommentare. Die HTML-Code ausgegeben wird:

<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 Ihrer CSS-Datei, die Sie haben diese:

* {
    margin:0;
    padding:0;
}

, die ein universelles zurückgesetzt ist, dass entfernt Polsterung und Marge von allem. Wie ich schon sagte auf Doctype.com.

Sie müssen das entfernen, und verwenden Sie einen kontrollierbaren Reset oder setzt einige Standard-Polsterung und Margen für UL und Li im Allgemeinen.

Da jeder Browser unterschiedliche Vorgaben zu haben scheint für UL neige ich dazu, sie von meinem Reset und Set nav ul wegzulassen ist speziell.

Hier ist die Reset-I Verwendung:

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

das setzt fast alles andere als Listen.