Weblogeintrag vom 21. October 2004

Thursday, 2004-10-21 08:54

Meine Methode, externe Links mit einem Symbol zu versehen, funktioniert nicht richtig:
Bildschirmfoto

Oben das korrekte Verhalten von Mozilla, Firefox, Opera etc., unten Internet Explorer 6.0. Das dazu gehörende CSS:

a.extern {
background-image: url(link.png);
background-position: 0 75%;
background-repeat: no-repeat;
padding-left: 8px;
}

Das Problem ist offenbar, dass IE als obere linke Ecke den am weitesten links liegenden Textteil annimmt, also den Teil nach dem Zeilenumbruch. Bei allen anderen Browsern bleibt die obere linke Ecke dort, wo sie hingehört, egal ob mit oder ohne Zeilenumbruch.

Ich tendiere dazu, dieses Problem zu ignorieren. Möglich wäre auch, den CSS3-Selektor a[href^="http://"] zu verwenden. Das ist dann nur in Mozilla, Firefox etc. zu sehen, nicht aber in IE (und auch nicht in Opera). Was meint ihr?

Übrigens: Opera 6 stellt dieses Hintergrundbild gar nicht dar, reserviert aber den Platz. Mit anderen Worten: Opera 6 ist nicht in der Lage, Inline-Elemente mit Hintergrundbildern auszustatten. Konqueror kann mit no-repeat nichts anfangen und pflastert den Link-Hintergrund mit hunderten kleinen Grafiken. Genauer: Konqueror unterstützt background-repeat nur für Block-, nicht aber für Inline-Elemente.

Vergleiche Link-Setzen in Webtexten für Anfänger.

2004-10-21 12:35: das Problem ist mir schon aufgefallen ... eine funktionierende Triviallösung: Links bestehen nur aus einem Wort ...

zu Opera6 -> er ist veraltet - und man kann ohne dem Icon den Text vernünftig lesen. Das Icon bietet ja nur zusätzliche Infos, die eigentlich auch in der URL schon stecken ...

Konquerer könnte man umgehen, in dem die Grafik nicht ca. 10*10 Pixel groß ist, sondern z.B. 500*30. Der Rest ist einfach transparente Farbe, und ist vom Speicher nicht wesentlich größer ...; René
2004-10-21 17:06: Super Idee...; Thiemo
2004-10-21 21:28: LAß es einfach wie es ist - umgebrochene Verweise im Text sehen sowieso immer etwas komisch aus (z.B. beim Highlight...); T$
2004-10-23 15:21: achso: ich habe die Link einmal probiert mit before / after zu setzen. Das wäre auch eine Lösung für den IE: der beherrscht es noch nicht!; René
2004-11-05 14:24: Die <a=link.png>Grafik</a> ist jetzt 8 x 512 Pixel groß. Damit wiederholt sie sich in x-Richtung praktisch nicht mehr. In y-Richtung darf ich sie nicht vergrößern, weil sonst die relative Positionierung nicht mehr klappt. Darum sieht es in Konqueror zwar immer noch etwas komisch aus, aber man kann zumindest den Linktext wieder lesen. Danke für den Tipp.; Thiemo

Kommentare zu diesem Beitrag können per E-Mail an den Autor gesandt werden.

Thiemos Archiv