Frage zu einer Liste (<ul>)

[MaWe]

Hallo.

Ich habe folgendes Problem:
Ich habe eine Liste (ul), bei der ich ein selbst definiertes Icon als Aufzählungszeichen verwende.
Nur ist das Zeichen etwas größer als die Schriftgröße (diese will ich auch nicht ändern) und die Schrift erscheint deshalb nicht mittig.
Siehe Bild:



HTML sieht so aus:

<ul>
  <li>Test1</li>
  <li>Test2</li>
  <li>Test3</li>
  <li>Test4</li>
</ul>

Hab' in CSS schon alles mögliche versucht, aber nichts hat bisher geklappt.
CSS sieht (momentan) so aus:

#inhalt ul li {
    font-size: 100%;
    list-style-image: url("../images/schere30.png");
    margin-left: 30px;
    vertical-align: middle;
}

Auch das vertical-align hat nichts gebracht.

Was kann ich machen ?

Danke für Eure Hilfe.
Gruß
Martin

 

[JoRu1407]

Hi, ich stand' mal vor dem selben Problem, was ich folgendermaßen gelöst habe:

Icon nicht als "list-style-image" sondern als "background-image" einbinden.
Damit die Schrift nicht Links über dem icon anfängt, das ganze mit "padding-left" beliebig einrücken.

Wenn das Icon noch nicht mittig ist, kannst du das "background-image" mit verschiedenen Eigenschaften versehen.

Beispiel:

#inhalt ul li { 
   font-size: 100%;     
   background-image: url("../images/schere30.png") no-repeat left [B]1px[/B]; 
   margin-left: 30px;
   padding-left: 20px;
   list-style-type: none;
}

 

[MaWe]

Hallo JoRu1407,

sorry für meine späte Antwort. Hatte jetzt leider länger keine Zeit das Thema weiter zu verfolgen.
Hab' Dein Ansatz mal ausprobiert und es funktioniert.
Muss jetzt nur das mit dem Einrücken machen und dann passt es.

Danke für den Tipp.

 

[pidd]

bei CSS reicht vermutlich schon ein einfaches line-height