naden.de/blog » Stylesheets http://www.naden.de/blog /* no comment */ Mon, 26 Dec 2011 15:17:30 +0000 en hourly 1 http://wordpress.org/?v=3.0.5 Internet Explorer list-style-image float left Fehler http://www.naden.de/blog/internet-explorer-list-style-image-float-left-fehler http://www.naden.de/blog/internet-explorer-list-style-image-float-left-fehler#comments Wed, 19 Aug 2009 17:39:27 +0000 naden http://www.naden.de/blog/internet-explorer-list-style-image-float-left-fehler 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

]]> http://www.naden.de/blog/internet-explorer-list-style-image-float-left-fehler/feed 2