ungewollte Abstände in Liste (IE6)

[Tillmann]

Guten Abend zusammen!

Ich habe einige Zeit damit verbracht, für eine Webstie das Layout zu erneuern. Nur eines will mit partout nicht gelingen: die korrekte Darstellung der Untermenüeinträge im IE6. Das Menü besteht aus verschachtelten Listen. Während Firefox und Opera die Einträge wie erwartet darstellen, gibt es im IE6 ungewollte schmale Ränder über und unter einem Eintrag. Leider habe ich keine Ahnung, woran es liegen könnte. Daher meine Frage in die runde: Hat jemand eine Idee, wo das Problem liegen könnte?

Vielen Dank an jeden, der sich mit dem Problem beschäftigt schon jetzt!

Grüße,
Tillmann

Und hier die Seite(n):

http:||www.luebker.org|temp|geldanlage_bei_banken.php

Die CSS-Dateien finden sich unter:
http:||www.luebker.org|temp|css|formate.css
http:||www.luebker.org|temp|css|aufbau.css
und
http:||www.luebker.org|temp|css|ie.css

(senkrechte Striche bitte durch Slashes ersetzen.)

Der relevante CSS-Teil sieht so aus:

#menue {
float: left;
display: block;
width: 200px;   /*IE: 197px;  */
background-color: #b4e778;
color: #5abd1a;
margin: 5px 0;
padding: 0;
}
#menue ul li {
list-style-type: none;
}
#menue ul .normal {
margin: 0 0 0 20px;
}
.unter {
border:1px solid #5abd1a;
margin: 0 20px 0 40px;
}
.unter2 {
margin: 0;
}
#menue ul a {
display: block;
width: 144px;
color: #f1fee2;
}
#menue ul .untereintrag a {
display: block;
width: 124px;
}
#menue ul .untereintrag2 a {
display: block;
width: 124px;
}
#menue p.linear a {
display: inline;
width: auto;
}
#menue ul .normal a {
text-decoration: none;
font-weight: bold;
border: 1px solid #5abd1a;
margin: 15px 0 15px 0;
padding: 7px;
}
#menue ul .untereintrag  a {
text-decoration: none;
font-weight: bold;
border: 0;
margin: 0;
padding: 7px;
}
#menue ul .untereintrag2  a {
text-decoration: none;
font-weight: normal;
font-style: italic;
border: 0;
margin: 0;
padding: 0 7px 0 7px;
}
#menue a:link, #menue a:visited  {
background-color: #7fd138;
color: #f1fee2;
}
#menue a:hover {
background-color: #86dc3b;
color: #5abd1a;
}
#menue a:active {
background-color: #7fd138;
color: #5abd1a;
font-style:italic;
}

XHTML-Code:

<div id="menue">

<ul class="normal">
  <li class="normal"><a href="index.php">Startseite</a></li>
  <li class="normal"><a href="einfuehrung.php">Einführung</a></li>
  <li class="normal"><a href="geldanlage_bei_banken.php">Geldanlage Banken</a></li>
 </ul>

<ul class="unter">
  <li class="untereintrag"><a href="ethikbank.php">Ethikbank</a></li>
  <ul class="unter2">
   <li class="untereintrag2"><a href="anlagemoeglichkeiten_ethikbank.php">Anlage&shy;möglichkeiten</a></li>
   <li class="untereintrag2"><a href="ichbindabei_ethikbank.php">&laquo;Ich bin dabei&raquo;</a></li>
  </ul>
  <li class="untereintrag"><a href="gemeinschaftsbank.php">GLS-Bank</a></li>
  <li class="untereintrag"><a href="umweltbank.php">Umweltbank</a></li>
  <li class="untereintrag"><a href="ordensbank.php">Ordensbank</a></li>
  <li class="untereintrag"><a href="steylerbank.php">Steyler Bank</a></li>
  <li class="untereintrag"><a href="girokonto_vergleich.php">Girokonto Vergleich</a></li>
 </ul>

<ul class="normal">
  <li class="normal"><a href="geldanlage_nicht_banken.php">andere Geldanlage</a></li>
 </ul>

<ul class="normal">
  <li class="normal"><a href="linksammlung.php">Linksammlung</a></li>
  <li class="normal"><a href="literatur.php">Literatur</a></li>
 </ul>

</div>

[Dieter Raber]

Hallo Tillmann,

lass vor dem schliessenden </a> ein Leerzeichen

Gruß,

Dieter

[Tillmann]

lass vor dem schliessenden </a> ein Leerzeichen

Hallo Dieter,

danke für den Beitrag. Aber das bringt leider rein gar nichts ...

Grüße,
Tillmann

[wahsaga]

hi,

lass vor dem schliessenden </a> ein Leerzeichen

danke für den Beitrag. Aber das bringt leider rein gar nichts ...

Dann versuche es mit dem anderen gängigen Workaround, den Whitespace zwischen den Tags im kompletten Listenelement zu eliminieren.

gruß,
wahsaga

[Tillmann]

Hi wahsaga,

Dann versuche es mit dem anderen gängigen Workaround, den Whitespace zwischen den Tags im kompletten Listenelement zu eliminieren.

Das bringt leider auch keine Besserung. ;(

Vielleicht noch eine andere Idee? 1000 Dank im Voraus!

Tillmann

(ps: IE 6 auf WinXP/SP2)

[Struppi]

Vielen Dank an jeden, der sich mit dem Problem beschäftigt schon jetzt!

neben den anderen vorschlägen gibt es noch:

* html #menue ul a { width:100%; }

Struppi.

[Tillmann]

neben den anderen vorschlägen gibt es noch:

* html #menue ul a { width:100%; }

Danke, Struppi. Tatsächlich hilft dies (oder height:100%) bei den Einträgen 3. Ordnung weiter ... Aber ganz glücklich bin ich damit immer noch nicht. Noch eine andere Idee???

Grüße,
Tillmann

[Tillmann]

So, ich habe genug von den Probleme mit den Listen und das ganze umgestellt auf einfache Textauszeichnung ...

Grüße,
Tillmann

[Struppi]

Unterlisten müssen in einem Listenelement sein.

Du kannst dir auch die ganzen Klassen sparen, da du ohne Probleme jedes Element der Liste ansprechen kannst:
#menue ul li ul li ul li usw. je nachdem in welcher Ebene du bist.

Ich hab das mal nachgebaut

#menue  
#menue  
{  
    float: left;  
    display: block;  
    width: 200px;  
    background-color: #b4e778;  
    color: #5abd1a;  
    margin: 5px 0;  
    padding: 0;  
}  
  
/* Alle Listen */  
#menue ul  
{  
    list-style-type: none;  
    margin:0;  
    padding:0;  
}  
  
/* Liste 1. Ordnung */  
#menue ul  
{  
    margin-left:20px;  
}  
/* Liste 2. Ordnung */  
#menue ul ul  
{  
    margin-left:40px;  
}  
/* Liste 3. Ordnung */  
#menue ul ul ul  
{  
    margin-left:60px;  
}  
/* Listenelemente 1. Ordnung */  
#menue ul li  
{  
    width:144px;  
}  
/* Listenelemente 2./3. Ordnung */  
#menue ul ul li,  
#menue ul ul ul li  
{  
    width:124px;  
}  
#menue ul ul  
{  
    background-color:#ff0;  
}  
#menue li a  
{  
    display:block;  
    text-decoration: none;  
}  
* html #menue li a  
{  
    width:100%;  
}  
  
  
#menue a:link, #menue a:visited  
{  
border: 1px solid #5abd1a;  
text-decoration: none;  
font-weight: bold;  
background-color: #7fd138;  
color: #f1fee2;  
}  
#menue a:hover {  
background-color: #86dc3b;  
color: #5abd1a;  
}  
#menue a:active {  
background-color: #7fd138;  
color: #5abd1a;  
font-style:italic;  
}  

<div id="menue">  
 <ul>  
  <li><a href="index.php">Startseite</a></li>  
  <li><a href="einfuehrung.php">Einführung</a></li>  
  <li><a href="geldanlage_bei_banken.php">Geldanlage Banken</a></li>  
  <li>  
  <ul>  
      <li><a href="ethikbank.php">Ethikbank</a></li>  
      <li><ul>  
         <li><a href="anlagemoeglichkeiten_ethikbank.php">Anlage&shy;möglichkeiten</a></li>  
         <li><a href="ichbindabei_ethikbank.php">&laquo;Ich bin dabei&raquo;</a></li>  
         <li><a href="ichbindabei_ethikbank.php">&laquo;Ich bin dabei&raquo;</a></li>  
         </ul><li>  
      <li><a href="gemeinschaftsbank.php">GLS-Bank</a></li>  
      <li><a href="umweltbank.php">Umweltbank</a></li>  
      <li><a href="ordensbank.php">Ordensbank</a></li>  
      <li><a href="steylerbank.php">Steyler Bank</a></li>  
      <li><a href="girokonto_vergleich.php">Girokonto Vergleich</a></li>  
  </ul>  
 </li>  
  <li><a href="geldanlage_nicht_banken.php">andere Geldanlage</a></li>  
  <li><a href="linksammlung.php">Linksammlung</a></li>  
  <li><a href="literatur.php">Literatur</a></li>  
 </ul>  
  
</div>  

In etwa sollte deine Struktur so aussehen, ich hab den ganzen Kleinkram rausgeschmissen, du siehst es sind im IE fast keine Abstände mehr zwischen den Listen. Das einzige Problem ist die 3. Liste, dort wird immer ein Abstand zur letzten Zeile angezeigt. Kein schmutziger Trick hilft.

Naja, ich hab mir abgewöhnt den IE da noch gross zu beachten, mal schauen was die 7'er Version draus macht.

Struppi.

[Tillmann]

Hi Struppi,

herzlichen Dank für Deine Mühe! Ich werde schauen, daß ich die Formatierungen + Struktur übernehme und die Text-Auszeichnungs-Zwischenlösung wieder rausschmeiße ... Die funktioniert inzwischen jedoch einwandfrei (nur, daß der "Mouseover"-Effekt erst beim Überfahren des Textes greift).

Vielen Dank noch mal!

Grüße,
Tillmann