Css-Problem mit line-heigt und Liste

[mec]

Hallo,

ich habe folgendes Problem: ich habe eine Liste, für die ich die Zeilenhöhe mit line-height angegeben haben. Die einzelnen Listenpunkte sollen einen geringeren Abstand haben, wenn sie über mehrere Zeilen gehen. So sieht es mit line-heigt:2em aus:

1. Hunde

2. Katzen

3. Kühe und

Pferde

4. Kaninchen


Ich möchte es aber so:

1. Hunde

2. Katzen

3. Kühe und
Pferde

4. Kaninchen

Wenn ich für Punkt 3 eine andere line-heigt angeben, kommt immer folgendes raus (Punkt 4 klebt an Punkt 3):

1. Hunde

2. Katzen

3. Kühe und
Pferde
4. Kaninchen

Hab´s mit <span> probiert, aber war nichts...

Hoffe, ihr versteht mein Problem und könnt mir weiterhelfen.

Gruß
mec

 

[msslovi0]

Könnte man das mal als Code sehen? So ist zwar klar was du willst, ohne deine Implementierung zu sehen ist aber der Fehler schwer auszumachen.

Ins blaue getippt ist line-height der falsche Ansatz (zumal du das für einen optischen Abstand mißbrauchen willst), du solltest lieber mit paddings an den <li>s arbeiten.

Matt

 

[mec]

Ok, hier also der Ausgangs-Code:

<div id="submenue">
  <ul>
      <li><a href="#">Hunde</a></li>
      <li><a href="#">Katzen</a></li>
      <li class="eng"><a href="#">K&uuml;he und Pferde </a></li>
      <li><a href="#">Kaninchen </a></li>
    </ul>
  </div>

CSS:

#submenue {
font:12px Verdana, Arial, Helvetica, sans-serif;
width:155px;
margin:0;
padding-top:3px;
height:100%;
}

#submenue a:link {
text-decoration:none;
color:#000000;
}

ul {
list-style-type:none;
margin:0;
padding:15px 0 0 15px;
}

li {
line-height:2em;
}

.eng {
line-height:1em;
}

 

[ostersau]

Ich stimme msslovi0 zu, ich würde statt mit "line-height" mit padding arbeiten.
Lass die line-height z.B einheitlich auf 1em, und setzte für li ein padding-bottom ein. Dann solltest Du Dein gewünschtes Ergebnis erhalten.

 

[mec]

Tausend Dank,
ich hab´s jetzt mit padding-bottom gemacht, Ergebnis wie gewünscht. Super, habt mir echt geholfen!!!