nicht angemeldet
IE: Background-Image in Links in Aufzählungen rechts ausrichten
Hallo zusammen,
in unserem CMS werden alle Arten von Links automatisch mit gesonderten CSS-Klassen versehen für externe Links, interne, PDF-Dateien, usw.
Also z.b.
"<a href="..." class="extern">Externer Link</a>
Dies nutzen wir um automatisch per CSS kleine Icons als background-image vor bzw. nach dem Link anzeigen zu lassen.
Dies funktioniert soweit auch ganz gut solange das Icon VOR dem Link ist.
Ich hätte das Icon aber lieber hinter dem Link, denn gerade bei Aufzählungen sieht das in meinem Fall blöd aus, wenn erst das Aufzählungszeichen kommt, dann das Link_Symbol, dann der eigentliche Link.
Vor allem wenn in einer Aufzählung manche Listenpunkte verlinkt sind und andere nicht, dann "flattert" der Text denn einmal ist ein Link-Symbol da, das andere mal nicht. Also wäre es mir lieber das Symbol wäre am Ende vom Link.
Funktioniert auch wunderbar solange der Link nicht über 2 Zeilen geht.
Aber immer dann wenn ein Link über 2 Zeilen geht dann zeigt der IE7 das Icon nicht am Ende vom Link in der zweiten Zeile an, sondern mittem im letzten Buchstaben der 1 Zeile. Firefox macht es richtig.
Der CSS Code für den Link lautet:
a.extern { background:url(symbols/extern_gruen.png) right top no-repeat; padding-right: 12px; padding-left: 0px; text-decoration: none; }
Das padding-right macht auch der IE immer richtig nach dem Link in der zweiten Zeile hin, aber das Icon setzt er ans Ende der ersten Zeile (und da sich das padding auf die zweite Zeile auswirkt fehlt es in der ersten und das Symbol sitzt über dem Linktext der 1. Zeile).
Ich hab da schon einiges ausprobiert mit der Hintergrundpositionierung (also statt right und top alles mögliche an anderen Kombinationen) aber im IE hat noch nix hingehauen. Im Firefox 3 wird es richtig angezeigt.
HTML-Code der Aufzählung:
<ul>
<li>Listenpunkt unverlinkt</li>
<li><a class="extern" href="http://www.xyz.de">einzeiliger Linktext</a></li>
<li><a class="extern" href="http://www.xyz.de">Linktext der aufgrund der Länge des Textes über zwei Zeilen geht</a></li>
</ul>
Hat da irgendjemand eine Lösung?
Was nicht geht ist manuell in den HTML Quellcode eingreifen da vom CMS über Templates genriert, d.h. ich kann nicht am Ende des Linktextes ein <span> oder sonstige HTMl Syntax mitgeben um das Hintergrundbild zu platzieren.
Ich muss mit der css Klasse für den Link bzw. mit ul oder li auskommen.
Vielen Dank und viele Grüße
Mark