[Problem] list-style-image

JohnReinert · 28.11.2007, 18:41

Hi Leute,

ich habe ein Layout das aus DIV-Containern besteht, in einem dieser Container habe ich auch eine Listendarstellung dessen Bullet ich mittels list-style-image einer Grafik zuweise, der Code sieht wie folgt aus:

Code:

#sidebar ul {
	list-style-image: url(images/img07.jpg);
	border-top: 0.1em solid #1801C5;
	border-bottom: 0.1em solid #1801C5;
}

#sidebar li {
	font-size: 0.8em;
}

Nun habe ich das Problem das die Bullets mitten in der Listenschrift erscheinen, das sieht wie folgt aus:

Jemand eine Idee wo das Problem liegen könnte?

EDIT:
Wie auffällt ist die Grafik immer im letzten "N" des Listentextes, vielleicht liegt darin ja die Lösung - ich komme jedenfalls im Moment nicht drauf wo das Problem liegen könnte.

JohnReinert · 28.11.2007, 19:17

Habe jetzt mal die andere Variante genommen die überall empfohlen wird da Sie Browser-Übergreifend sein soll:

Code:

#sidebar ul {
	list-style: none;
	padding: 19px 0 15px 15px;
	border-top: 0.1em solid #1801C5;
	border-bottom: 0.1em solid #1801C5;
}

#sidebar li {
	padding: 15px 0 15px 25px;
	background: url(images/img07.jpg) no-repeat ;
	font-size: 0.8em;
}

Nun habe ich das Problem das das Bullets etwas oberhalb des Listentextes steht, mal schauen ob ich das mit dem MARGIN-TAG nun in eine Zeile bekomme!

JohnReinert · 28.11.2007, 19:27

Problem gelöst, zwar nicht mit dem MARGIN-TAG aber dennoch effektiv

Code:

background: url(images/img07.jpg) no-repeat 10px 80% ;

hero-master · 29.11.2007, 14:53

Zitat:

Zitat von JohnReinert

Code:

background: url(images/img07.jpg) no-repeat 10px 80% ;

Versuche Prozentangaben und Pixel für die Positionierung eines Objektes zu vermeiden