Bild mit Liste umfließen lassen

[Dharokan]

Hallo Ihr,

ich habe auf einer Seite links ein Bild im Text, daß vom Text umflossen wird.
float:left - soweit kein Problem.

Nun können im Text aber auch mal Aufzählungslisten vorkommen. Und genau das scheint nicht zu klappen. Ich ersetze die bullets durch eine Hintergrundgrafik. Und im Chrome, sowie Firefox 3.5 bleiben diese bullets jetzt linksbündig hinter der Grafik verborgen. Firefox 2.0 stellt es aber richtig dar

Ich bastel da jetzt schon 'ne Weile rum, finde aber keine Lösung. Kennt jemand von Euch das Phänomen und vielleicht sogar einen Workaround?

Grüße,
Dharokan

PHP-Code:

CSS:

img {
    float: left;
    margin-right: 1em;
}

ul.bkgbullets li {
    list-style:        none;
    list-style-image:     none; /* for ie win 5.x */
    padding:        0 0 0 26px;
    background:        transparent url(bullet.gif) no-repeat 7px .6em;
} 


<div class="wrap">
	<img src="test.png" width="150" height="150" alt="Hilfe! Ich werde umflossen!">
	<h1>Liste mit normalen bullets</h1>
	<ul>
		<li>Punkt eins</li>
		<li>Punkt zwei</li>
		<li>Punkt zweieinhalb, der ein bisschen aus der Reihe tanzt, weil er so viel l&auml;nger ist als die anderen</li>
		<li>Punkt drei</li>
		<li>Punkt vier</li>
		<li>Punkt f&uuml;nf</li>
		<li>Punkt sechs</li>
		<li>Punkt sieben</li>
		<li>Punkt. Aus. Ende.</li>
	</ul>
</div>

<div class="wrap">
	<img src="test.png" width="150" height="150" alt="Hilfe! Ich werde umflossen!">
	<h1>Liste mit background-bullets</h1>
	<ul class="bkgbullets">
		<li>Punkt eins</li>
		<li>Punkt zwei</li>
		<li>Punkt zweieinhalb, der ein bisschen aus der Reihe tanzt, weil er so viel l&auml;nger ist als die anderen</li>
		<li>Punkt drei</li>
		<li>Punkt vier</li>
		<li>Punkt f&uuml;nf</li>
		<li>Punkt sechs</li>
		<li>Punkt sieben</li>
		<li>Punkt. Aus. Ende.</li>
	</ul>
</div>

[kobo1]

Ist ein ganz logisches Verhalten. Wenn du dir kurz Gedanken machst, verstehst du auch warum, denn dein Ansatz ist falsch!
Wenn du ein Background-Image einfügst richtet sich dieses immer links oben innerhalb des Blocks aus. Wenn du einen float hast, fängt der Block des List Items trotzdem am linken Rand des zuletzt mit "position" ausgerichteten Elements an.

Deshalb bringt dies die Lösung:

PHP-Code:

ul.bkgbullets li {
    list-style-image:     url(bullet.gif);
} 


Warum so kompliziert, wenn das Gute liegt so nah... ;-)
Habs jetzt nur im FF 3.6.3 getestet, sollte aber überall funktionieren.

[Dharokan]

Zitat von kobo1

Ist ein ganz logisches Verhalten. Wenn du dir kurz Gedanken machst, verstehst du auch warum, denn dein Ansatz ist falsch!
Wenn du ein Background-Image einfügst richtet sich dieses immer links oben innerhalb des Blocks aus. Wenn du einen float hast, fängt der Block des List Items trotzdem am linken Rand des zuletzt mit "position" ausgerichteten Elements an.

Jau! Stimmt ja.
Hatte mir das früher so angehöhnt, weil es für horizontale Navileisten der beste Weg war und (damals) die Browser das wie gewünscht interpretierten. Und wie das nunmal mit Gewohnheiten ist, da waren die Scheuklappen mal wieder viel zu robust.

Danke für Deine Augen-öffnende Antwort. Werde ich später oder am Wochenende direkt mal näher ausprobieren.

Grüße,
Dharo