Fontdarstellung in Listen mit CSS

[undine]

Hallo Forum,

ich habe etwas mir nicht erklärliches entdeckt:

ich habe den Font in einem Stylesheet für den body definiert. Da ich keinen anderen Font für <p> definiert habe, erscheint der Font natürlich auch in den Absätzen. Wenn ich eine Liste anlege, erscheint der für den body definierte Font auch hier.

Nun aber möchte ich die Listenpunkte nicht direkt aufeinanderfolgend haben, sondern durch eine Leerzeile getrennt, und habe die einzelnen <li>....</li> in Absätze eingebettet, also:

<ul>
<p><li>...</li></p>
<p><li>...</li></p>
<p><li>...</li></p>
<ul>

MS hat keine Probleme, aber unter NS geschieht nun dies:

Die ersten beiden Listenpunkte enthalten den im Stylsheet unter body definierten Font, die folgenden und die gesamten folgenden Textabsätze nach der Liste erscheinen im Default-Browser Font. Egal wieviele Punkte die Liste hat, nach der Liste geht es immer im Default Font weiter, warum?? Und warum erscheinen die ersten zwei Punkte korrekt definiert, und danach im Default Font?

Definiere ich im Stylesheet auch für <p> einen Font, sind die nach der Liste folgenden Absätze zwar im gewünschten Font, aber innerhalb der Liste erfolgt auch jetzt noch ab dem 3. Punkt eine Darstellung im Default Font. Was hat es nur mit diesem offensichtlich magischen 3. Listenpunkt auf sich???

Grüße von Undine

[Thomas J.S.]

Hallo!

Nun aber möchte ich die Listenpunkte nicht direkt aufeinanderfolgend haben, sondern durch eine Leerzeile getrennt, und habe die einzelnen <li>....</li> in Absätze eingebettet, also:

<ul>
<p><li>...</li></p>
<p><li>...</li></p>
<p><li>...</li></p>
<ul>

Ist nett, aber falsch.
1)Laut html4.0 darf <p> kein anderes Blocklevel-Element enthalten. Listen sind als solches Blocklevel-Elemente, obwohl du sie hier etwas zerstückelt hast.

2. Damit sowohl in NS als auch im IE die CSS für Listen angezeigt werden muss du etwas so machen:
   ul,ol,li { font-family:Arial; }

3. durch eine Leerzeile getrennt:
   <ul>
   <li>...</li><br><br>
   <li>...</li><br><br>
   <li>...</li><br><br>
   </ul>

Grüße
Thomas

[undine]

Hallo,

Ist nett, aber falsch.
1)Laut html4.0 darf

»»  kein anderes Blocklevel-Element enthalten. Listen sind als solches Blocklevel-Elemente, obwohl du sie hier etwas zerstückelt hast.

Ach so.... alles klar!

Wieso aber muß für eine Leerzeile zwischen den Listenpunkten nach den <li>..</li> zweimal <br><br> stehen? Wieso bricht eines nicht schon um?

Grüße von undine

[Thomas J.S.]

Hallo!

Wieso aber muß für eine Leerzeile zwischen den Listenpunkten nach den <li>..</li> zweimal stehen? Wieso bricht eines nicht schon um?

So wie es aussieht wird der erste <br> ignoriert, obwohl ein <li> automatisch zu einem Zeilenumbruch führt. Weiss auch nicht warum.

Es gibt auch eine elegantere Lösung:
li { margin-bottom:20px; }

Leider verschiebt der NS dabei nur den Text vom <li> nicht aber die Aufzählungszeichen.
Falls du also eine liste ohne die Bullets [ul { list-style-type:none; }] verwendest kannst du es einsetzten.

Grüße
Thomas