[CSS] <li> "erzeugt&quot; Fehler

[Meflin]

Aloa!

Mal wieder ein CSS-Problem :bouncing4: Der Aufbau meines Designs ist wie folgt:

Code:

  <div class="box&quot;>
    &lt;div id=&quot;inner&quot;&gt;
      &lt;div id=&quot;head&quot;&gt;Überschrift hier&lt;/div&gt;
        &lt;ul&gt;...Inhalt hier&lt;/ul&gt;  
      &lt;/div&gt;
  &lt;/div&gt;

Die CSS-Definitionen dazu:

Code:

div.box {
   padding: 1px;
   border: 1px solid #CCCCCC;
   display: block;
   font-family: Georgia, "Times New Roman", Times, serif;
   margin-bottom: 5px;
}

div.box #head {
   background-color: #99CC66;
   font-size: 14px;
   padding: 4px;
   color: #336600;
   font-weight: bold;
   margin-bottom: 2px;
}

div.box #inner {
   background-color: #F6FEDF;
}

Aussehen tut das ganze wie Anhang 2, aussehen sollte es wie Anhang 1. Das Problem tritt nur auf, wenn innerhalb des divs lis verwendet werden :( Wie bekomm ichs weg?

[Mystic]

Kannst du eine Seite, die das Problem zeigt, mal irgendwo online stellen?

[Meflin]

http://www.acira.net/adriana/snippet.php

voila, funktioniert zwar kein bisschen, aber lasst euch von den php-errors nicht stören: das eigentliche problem ist sichtbar (eigentlich läuft das bei mir nur lokal, daher noch nicht funktionstüchtig ;) )

[cruiser]

Sieht irgendwie aus als würde der Parser spinnen und sämtliche Sonderzeichen nach dem ersten " in entsprechende Deklarationen umschreiben. Ohne entsprechenden PHP-Code (nehm ich mal an) kann man so keinen Fehler herausfinden.

Edit: ich bin vom &quot; etc. ausgegangen... also doch ein Style-Problem...

Edit2: ich hab mir den Source mal angeschaut, allerdings bei den vielen Verschachtelungen nichts brauchbares gefunden. Der Weisse "Strich" unten rührt zumindest aus irgend einem Problem zwischen pre.delphi und div #inner. Die li's sind zumindest nicht schuld.

[Mystic]

Hier die Lösung (oder doch nur ein Workaround?):

Code:

.delphi, .delphi ol {
  margin-bottom: 0;
}

[S2B]

Ähm, ich würde mal behaupten, dass man innerhalb eines <pre>-Elements keine Listen schreiben darf. Versuch doch mal die CSS-Eigenschaft white-space: pre. :zwinker:

Edit: Oder das... kA. :cyclops:

[Mystic]

Ich würde für Code jedenfalls das <code>-Element nehmen.

[Thorben77]

Nochmal für ganz Dumme: Geht's hier jetzt um Probleme mit Anführungszeichen oder mit CSS :gruebel: ?

Im Quelltext der "Testseite" sind jedenfalls ein paar IDs die Du wohl besser durch Klassen ersetzen solltest, weil sie mehrfach verwendet werden.

[cruiser]

stimmt pre.delphi und das eingelagerte ol erben (im gegensatz zum div.inner) die bottom-margin: 5px; vom div.box. Soll heissen die musst du als Erben wieder umdefinieren, aber nur weil es (wie schon geschrieben) eher nicht vorgesehen ist, dass der Tag mit Listen verwendet wird.

Ansonsten hätte ich aus meiner Sicht noch bemängeln dass du für Aufgaben, für die class="..." vorgesehen ist id="..." nutzt. id soll ja wirklich eindeutig einen Tag kennzeichnen.

Edit:
Tidy meint dazu übrigens auch:
Warning: missing </pre> before[list=1]

und:
Warning: <div> anchor "head" already defined
bzw. das selbe mit "inner" in Massen

[Meflin]

Zitat:

Zitat von Mystic

Hier die Lösung (oder doch nur ein Workaround?):

ein workaround, aber erfüllt erstmal seinen zweck ;)

Zitat:

Zitat von Thorben77

Nochmal für ganz Dumme: Geht's hier jetzt um Probleme mit Anführungszeichen oder mit CSS :gruebel: ?

es geht hier NICHT um Anführungszeichen - das ist einzig und allein ein Problem der DP, siehe Thread in Fragen und Anregungen :wall:

Zitat:

Zitat von cruiser

aber nur weil es (wie schon geschrieben) eher nicht vorgesehen ist, dass der Tag mit Listen verwendet wird.

Das ist nicht auf meinem Mist gewachsen... GeSHi macht das so :angel2:

Zitat:

Ansonsten hätte ich aus meiner Sicht noch bemängeln dass du für Aufgaben, für die class="..." vorgesehen ist id="..." nutzt. id soll ja wirklich eindeutig einen Tag kennzeichnen.

Stimmt ich weis, ABER: wenn man die ids durch class (oder span) ersetzt, sieht das ganze nicht mehr wirklich so aus wie es jetzt aussieht... das funktioniert EINZIG UND ALLEIN mit id! Sonst werden wohl irgendwie die CSS-Definitionen nicht angewandt (die mit #)