RSS Feed

Internet Explorer list-style-image float left Fehler

19.08.2009 by naden

Da selbst noch der Internet Explorer 8 die Grafiken nicht anzeigt, wenn man eine Liste <ul> mit float horizontal ausrichtet und den Listenelelementen über list-style-image eine eigene Grafik als Aufzählungszeichen zugewiesen hat … Hier der Workaround über background. Ohne CSS-Weiche, Javascript oder ähnlichen Zauber.

Das Stylesheet

ul {
  margin: 0;
  padding: 0;
}
li {
  float: left;
  /* wichtig, den Listentype erstmal auf none setzen*/
  list-style-type: none;
  /* und eine alternative Grafik alt Hintergrundbild laden */
  background: url(pfeil.gif) left top no-repeat;
  /* padding nach bel. und anhand der Abmessungen der Grafik einstellen */
  padding: 0 10px 10px 10px;
}

HTML wie gewohnt nutzen

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ul>

Demo


2 Kommentare »

  1. schmunk sagt:

    Danke, Mann! :)

  2. naden sagt:

    Ich schick dir ne Rechnung ;) Der Hack hat mich Stunden gekostet.

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

*

Du kannst folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>