list-style-image und text-align Probleme

CSS Labor: Listenproblem mit Safari 3.x und Konqueror 3.x

Safari 3.x unter MacOS und Windows, sowie Konqueror 3.5.x haben ein Problem mit einer rechtsbündigen Liste, welche eine durch CSS angehängte Grafik besitzt. In der Beispielliste unten wird der Text der Liste rechtsbündig über text-align positioniert und eine Grafik an den zweiten Listeneintrag mit list-style-image hinzugefügt. Getestet wurden diversen Browser, doch nur Safari und Konqueror zeigen die Grafik am linken Rand des Browserfensters an.

  • Listeneintrag ohne Grafik mit "list-style: none;"
  • Listeneintrag mit "list-style-image: (url_of_image);"

CSS Part:


  .entry-footer {
    margin: 0;
    padding: 0.4em 0 0.4em 0;
    width: 100%;
    font-size: 80%;
    text-align: right;
    line-height: 140%; 
    border-top: 0.1em dotted #999;   
  }

  .posting-added {
    list-style: none;
  }

  .img-comment {
    list-style-image: url(../../images/haken.png);  /* Häckchen Grafik */
  }

(X)HTML Part:


  <ul class="entry-footer">
    <li class="posting-added">Listeneintrag ohne Grafik mit "list-style: none;"</li> 
    <li class="img-comment">Listeneintrag mit "list-style-image: (url_of_image);"</li>
  </ul>

 

Lösung des Listenproblem mit Safari 3.x und Konqueror 3.x

Coole Sache, man füge einfach das CSS Element list-style-position mit entsprechender Parametrierung ein und schon funktioniert es zumindest mit Safari 3.1 Windows und Konqueror 3.5.5 OpenSuSE.

  • Listeneintrag ohne Grafik mit "list-style: none;"
  • Listeneintrag mit "list-style-image: (url_of_image);"

Ergänzungen im CSS:


  .img-comment {
    list-style-position: inside; /* Safari und Konqueror fix */
    list-style-image: url(../../images/haken.png);  /* Häkchen Grafik */
  }

Allerdings hat jetzt der IE 6 und IE 7 leichte Probleme, da die Grafik keinen Abstand mehr zum Text hat. Das lässt sich aber mit einer Vergrößerung der rechten Seite in der Grafik umgehen, was in diesem Beispiel nicht gemacht wurde.

Nach oben

Nach oben