Hallo zusammen,

in unserem CMS werden alle Arten von Links automatisch mit gesonderten CSS-Klassen versehen für externe Links, interne, PDF-Dateien, usw.

Dies nutzen wir um automatisch per CSS kleine Icons vor bzw. nach dem Link anzeigen zu lassen.

Dies funktioniert soweit auch ganz gut.

Nun haben wir das Problem, immer dann wenn ein Link über 2 Zeilen geht (z.b. in einer Aufzählung) dann zeigt der IE7 das Icon nicht am Ende vom Link in der zweiten Zeile an, sondern mittem im letzten Buchstaben der 1 Zeile (siehe Anhang).

Der CSS Code für den Link lautet:

#content ul .externerLink { background:url(symbols/extern_gruen.png) 100% top no-repeat; padding-right: 12px; padding-left: 0px; text-decoration: none; }

Ich hab da schon einiges ausprobiert mit der Hintergrundpositionierung (also statt 100% und top alles mögliche an anderen Kombinationen) aber im IE hat noch nix hingehauen. Im Firefox 3 wird es richtig angezeigt.

Hat da irgendjemand eine Lösung?

Vielen Dank und viele Grüße
Mark

Angehängte Grafiken

screen-aufzählung.jpg (52,6 KB, 20x aufgerufen)

Also eigentlich brauchst du doch nur zu schreiben:

background: url(symbols/extern_gruen.png) center right no-repeat;
padding-right: 12px;

Leider nicht,

Wenn ich statt "top" dort "center" eingebe, dann rutscht das Icon bissl runter, aber noch lange nicht dahin wo es hin soll und wird auch nur noch halb dargestellt bei den zweizeiligen Links (siehe Anhang).

Gebe ich "bottom" ein, verschwindet das Icon bei den zweiweiligen Links komplett

Angehängte Grafiken

screen-aufzählung2.jpg (47,1 KB, 5x aufgerufen)

Öhm, dann brauchen wir mal etwas mehr Quellcode.

Verquer positionierte HG-Bilder von Inline-Elementen mit mehrzeiligem Text sind ein bekanntes IE-Problem. display: block; für die Links würde helfen, aber dann stünde das Icon immer ganz rechts, also u.U. weit vom Textende entfernt. float (ohne width) oder zoom: 1; (nicht valide) statt display dagegen stellt die Links ebenfalls als Block dar (zoom als Inline-Block), aber lässt sie außerdem auch auf die Breite Ihres Inhalts zusammenschrumpfen (es reicht, wenn nur der IE float sieht, zoom dagegen sollte sogar definitiv nur der IE sehen).