Enrico: Problem mit Listendarstellung und eingebetteten span-Bereichen

Hallo,

ich habe folgenden html-Code, der eine Auswahlliste nachbauen soll:

  
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
   <head>  
      <meta http-equiv="content-type" content="text/html; charset=UTF-8">  
      <link type="text/css" href="___DropDown.css" rel="stylesheet" media="screen">  
   </head>  
   <body>  
      <ul>  
[1]      <li class="UIMitte"><span class="UILinks"></span>Aktuelle Auswahl<span class="UIRechts"></span></li>  
 +---    <li>  
 |          <ul class="ListeMitte">  
 |             <li><span class="ListeLinks"></span>Listenpunkt 1<span class="ListeRechts"></span></li>  
[2]            <li><span class="ListeLinks"></span>Listenpunkt 2<span class="ListeRechts"></span></li>  
 |             <li><span class="ListeLinks"></span>Listenpunkt 3<span class="ListeRechts"></span></li>  
 |          </ul>  
 +---    </li>  
[3]      <li class="ListeAbschlussMitte"><span class="ListeAbschlussLinks"></span><span class="ListeAbschlussRechts"></span></li>  
      </ul>  
   </body>  
</html>  

Der zugehörige css-Code:

  
ul  
{  
   margin:  0px;  
   padding: 0px;  
}  
  
li  
{  
   list-style-type: none;  
}  
  
.UIMitte  
{  
   background:  url(DropDownUIMitte.png) repeat-x;  
   cursor:      pointer;  
   height:      34px;  
   line-height: 34px;  
   text-align:  center;  
}  
  
.UILinks  
{  
   background:   url(DropDownUILinks.png);  
   float:        left;  
   height:       34px;  
   margin-right: 14px;  
   width:        10px;  
}  
  
.UIRechts  
{  
   background:  url(DropDownUIRechts.png);  
   float:       right;  
   height:      34px;  
   margin-left: 30px;  
   width:       26px;  
}  
  
.ListeMitte  
{  
   background: url(DropDownListeMitte.png);  
}  
  
.ListeLinks  
{  
   background:   url(DropDownListeLinks.png) repeat-y;  
   float:        left;  
   margin-right: 14px;  
   width:        10px;  
}  
  
.ListeRechts  
{  
   background:  url(DropDownListeRechts.png) repeat-y;  
   float:       right;  
   margin-left: 30px;  
   width:       26px;  
}  
  
.ListeAbschlussMitte  
{  
   background: url(DropDownListeAbschlussMitte.png) repeat-x;  
   height:     13px;  
}  
  
.ListeAbschlussLinks  
{  
   background: url(DropDownListeAbschlussLinks.png);  
   float:      left;  
   height:     13px;  
   width:      10px;  
}  
  
.ListeAbschlussRechts  
{  
   background: url(DropDownListeAbschlussRechts.png);  
   float:      right;  
   height:     13px;  
   width:      26px;  
}  

Die mit den Ziffern 1 und 3 gekennzeichneten Zeilen funktionieren einwandfrei und erzeugen folgende schematische Ausgabe im Browser:

UIMitte
    +-----------------------------------------------------+
    |+-------+                                  +--------+|
[1] ||UILinks|                                  |UIRechts||
    |+-------+                                  +--------+|
    +-----------------------------------------------------+

ListeAbschlussMitte
    +-----------------------------------------------------+
    |+-------------------+          +--------------------+|
[3] ||ListeAbschlussLinks|          |ListeAbschlussRechts||
    |+-------------------+          +--------------------+|
    +-----------------------------------------------------+

Bei der mit der Ziffer 2 gekennzeichneten Zeile hingegen habe ich nur die füllende Hintergrundgrafik der Klasse ListeMitte, aber nicht die beiden span-Bereiche, die sich ebenfalls wieder links bzw. rechts ausrichten sollen.

Ein Online-Beispiel kann ich leider nicht anbieten, ledig eine Grafik

Woran liegt es, dass die mit der Ziffer 2 gekennzeichneten Zeilen sich anders verhalten wie die mit 1 und 3 gekennzeichneten?

Alle css-Angaben sind analog aufgebaut bzw. sehe ich mittlerweile keine(n) möglichen Fehler mehr, die Klassennamen stimmen überein, ebenso sind die Grafiken vorhanden (wenn ich deren Namen als Quelle für die Hintergrundgrafik angebe, dann werden mir diese auch angezeigt).

Vielen Dank für eure Hilfe.

Gruß,
Enrico

  1. Om nah hoo pez nyeetz, Enrico!

    Woran liegt es, dass die mit der Ziffer 2 gekennzeichneten Zeilen sich anders verhalten wie die mit 1 und 3 gekennzeichneten?

    Möglicherweise am float. Durch das Floaten werden die Elemente nur noch so groß, wie der Inhalt es erfordert. Die span-Elemente sind jedoch leer.

    Matthias

    --
    1/z ist kein Blatt Papier.

    1. Hallo Matthias,

      danke für Deine Antwort.

      Möglicherweise am float. Durch das Floaten werden die Elemente nur noch so groß, wie der Inhalt es erfordert. Die span-Elemente sind jedoch leer.

      Hm, aber die span-Bereiche der Ziffern 1 und 3 sind auch leer und da funktioniert alles wie gewünscht...

      Enrico

      1. Hi,

        Hm, aber die span-Bereiche der Ziffern 1 und 3 sind auch leer und da funktioniert alles wie gewünscht...

        Die haben aber auch explizite Größenangeben ...

        cu,
        Andreas

        --
        Warum nennt sich Andreas hier MudGuard?
        O o ostern ...
        Fachfragen per Mail sind frech, werden ignoriert. Das Forum existiert.
        1. Hallo Andreas,

          auch Dir danke für Deine Antwort.

          Die haben aber auch explizite Größenangeben ...

          • Mit height: 100%; in der css-Datei habe ich das selbe Resultat, dass die beiden äußeren Rahmen nicht angezeigt werden
          • Gebe ich - zu Testzwecken - die Höhe in px an, dann verschiebt sich alles
          • position-Angaben werden auch ignoriert

          Ich verzweifle jetzt bald und setze das mit Tabellen um...

          Gruß,
          Enrico