Merkwürdiger Effekt im IE 6 bei background-image in <a>

[Elya]

Hallo liebe Kollegen,

Auf meiner Seite stelle ich gerade einen Darstellungsfehler fest, den ich mir nicht so recht erklären kann: ich habe mit

<p>laber laber laber <a href="http://www.example.com" class="ext">www.example.com</a> laber laber laber</p>

externe Links in meinen Texten gesetzt. Diese sind mit einem kleinen Icon gekennzeichnet:

#content a.ext {
                background-image:url(../img/icon_extlink.png);
                background-repeat:no-repeat;
                background-position:center left;
                padding-left:13px;
                white-space:nowrap;
                }

Zu besichtigen unter z.B. http://www.visuelya.de/pgs/kollegen_und_freunde.php und die CSS-Datei unter http://www.visuelya.de/css/styles.css

Soweit, so gut. Jetzt schiebt der IE 6 aber immer dann (und nur dann), wenn das "nowrap" zum Tragen kommt, nämlich der komplette Link aus Platzgründen im laufenden Text in die nächste Zeile rutscht, das Hintergrund-Icon in den Linktext hinein (oder umgekehrt).

<img src="http://www.visuelya.de/selfpics/linkfehler_ie6.png" border="0" alt="">

Steht der Link hingegen mitten in einer Zeile oder ist mit einem <br /> o.ä. in die nächste Zeile gezwungen, ist die Darstellung korrekt.

<img src="http://www.visuelya.de/selfpics/link_korrekt_ie6.png" border="0" alt="">

Ich habe ein wenig im CSS rumgespielt, mir fehlt es allerdings an griffigen Ideen, woran das liegen könnte. Interessant: IE 5.5 stellt es richtig dar.

Falls einzelne Seiten übrigens nicht ganz valide sind, bitte ich das gnädig zu übersehen, das liegt meist an meiner schlampigen Implementierung des Weblog-Scripts. Die Beispielseite und das CSS sind valide.

Gruß aus Köln-Ehrenfeld,

Elya

[Jeena Paradies]

Hallo Hans aus Deutschland,

<img src="http://www.visuelya.de/selfpics/linkfehler_ie6.png" border="0" alt="">

Das kenne ich von meinen Seiten auch. Deshalb habe ich das weggelassen und verwende nur noch :before für alles außer IE. Das ist aber nicht die optimale Lösung. Leider kenne ich die optimale Lösung noch nicht.

Ich habe ein wenig im CSS rumgespielt, mir fehlt es allerdings an griffigen Ideen, woran das liegen könnte. Interessant: IE 5.5 stellt es richtig dar.

Der IE 5 stellt das aber wiederum völlig falsch dar. Und es sind oft bis zu 10% der Surfer mit dem IE 5 unterwegs. Wie umgehst du da das Problem? Wenn du eine valide Lösung hast wäre ich dir sehr verbunden wenn du sie mir mitteilen würdest.

Grüße
Jeena Paradies

[Elya]

Hallo Jeena,

Der IE 5 stellt das aber wiederum völlig falsch dar. Und es sind oft bis zu 10% der Surfer mit dem IE 5 unterwegs. Wie umgehst du da das Problem? Wenn du eine valide Lösung hast wäre ich dir sehr verbunden wenn du sie mir mitteilen würdest.

Leider bin ich mit meinem Abwärts-CSS noch nicht richtig weiter, hab mich mal einen Sonntag in Netscape 4.7 gekniet und hatte dann erst mal genug davon... ;-) Alles eine "Work in progress". Das Problem beim ie5 ist grundsätzlich das nicht interpretierte padding bei Elementen ohne feste Breite. Wo es möglich ist, wäre also eine Breitenangabe angebracht. Hier natürlich nicht.

Zumindest weiß ich, daß das Problem nicht völlig vodoo ist, wenn Du es auch kennst ;-) Danke erstmal.

Gruß aus Köln-Ehrenfeld,

Hans aka elya

[Nicole]

Hallo Elya,
bei mir entstehen ähnliche Probleme, wenn die Links im
Quelltext nicht in der gleichen Zeile stehen wie der
Rest( ausser Tabelle <td>).

Glaube aber nicht, dass dies deinem Problem entspricht.

Ich antworte hauptsächlich auch nur weil ich wissen möchte
ob Du die Grafik deiner Seite oben
rechts (Kompliment dafür)selbst gemacht hast, und falls ja,
ob du Sowas für mich auch machen könntest. (Preis ?)

Gruss Nikki

[Elya]

Hallo Nicole,

Ich antworte hauptsächlich auch nur weil ich wissen möchte
ob Du die Grafik deiner Seite oben
rechts (Kompliment dafür)selbst gemacht hast, und falls ja,
ob du Sowas für mich auch machen könntest. (Preis ?)

du meinst die Karikatur links ;-) ? Wenn ja, kann ich Dir den Künstler vermitteln.

Gruß aus Köln-Ehrenfeld,

Elya

[Elya]

Hallo,

ich hab's jetzt mal umgedreht und die Grafik nach rechts gesetzt, und dafür gnadenlos bei http://www.svendtofte.com/ "geborgt", der es mit der Positionierung etwas anders löst. Das Ergebnis: Das Hintergrundbild wird jetzt in dem im OP genannten Fall gar nicht mehr angezeigt. Ich konstatiere, daß es nach rechts aus dem sichtbaren Bereich verschwunden ist...

Aktueller CSS-Code:
#content a.ext {
                background:transparent url('../img/icon_extlink.png') no-repeat 100% 60%;
                padding-right:13px;
                }

Immerhin sieht das etwas weniger kaputt aus als auf der linken Seite,  ich wüßte aber schon gerne, woran das liegen könnte.

Noch jemand eine Idee?

Gruß aus Köln-Ehrenfeld,

Elya