Background-image in Hyperlink wird nach Zeilen-Umbruch nicht mehr angezeigt

[Jochen]

Hallo,

ich möchte einem a-Tag mit einer CSS-Klasse ein Background-image zuweisen, dass dann als Icon-Grafik links neben dem Hyperlink steht.
Das ganze sieht so aus:

.link
{
padding-left: 15px;
background: url(icon.png) no-repeat left;
}

Das funktioniert auch, nur wenn der Link dann umbricht ist die Icon-Grafik im IE6 weg. Im Firefox funktioniert das ganze einwandfrei.
Weiß jemand eine Lösung?

Grüße,
Jochen

[Nico]

Hallo!

Du kannst natürlich auch vor jeden Link das Bild schreiben. Ich weiß ja nicht, wieviel du von denen hast und wieiel Arbeit das machen würde.

Nico

[Jochen]

Hi Nico,

es sind ziemlich viele Bilder und sie sollen auch alle über eine zentrale Stylesheet-Datei geändert werden können.
Deswegen würde ich die Lösung mit dem background-image bevorzugen.

Grüße,
Jochen

Hallo!

Du kannst natürlich auch vor jeden Link das Bild schreiben. Ich weiß ja nicht, wieviel du von denen hast und wieiel Arbeit das machen würde.

Nico

[Nico]

Hallo!

Da tut's mir leid. Ich hab leider keine Ahnung.

Nico

[Zeromancer]

Hallo,

.link
{
padding-left: 15px;
background: url(icon.png) no-repeat left;
}

Kann mir das grad schlecht vorstellen.

hilft vielleicht  background:url('icon.png') no-repeat top left;

?

Mit freundlichen Grüßen

André

[Jochen]

Hallo Zeromancer,

Leider nein, habs grade ausprobiert.
Trotzdem Danke!

Kann mir das grad schlecht vorstellen.

Also es ist so, dass wenn der Link mittendrin umbricht das Icon vor dem Link im IE einfach nicht mehr angezeigt wird. Stattdessen eine leere Fläche in der Länge des eingestellten paddings, die aber immernoch als Link anklickbar ist.

Grüße,
Jochen

Hallo,

.link
{
padding-left: 15px;
background: url(icon.png) no-repeat left;
}

Kann mir das grad schlecht vorstellen.

hilft vielleicht  background:url('icon.png') no-repeat top left;

?

Mit freundlichen Grüßen

André

[Jeena Paradies]

Hallo,

Das funktioniert auch, nur wenn der Link dann umbricht ist die Icon-Grafik im IE6 weg. Im Firefox funktioniert das ganze einwandfrei.
Weiß jemand eine Lösung?

Das ist ein Bug des IE 6. IE 5 kann gar nicht damit umgehen, IE 5.5 macht es richtig, aber halt der IE 6 falsch. Ich habe auf meiner Seite zur Zeit so ca 37% IE 6 User, nehme einfach in kauf dass das so ist und benutze es genau so wie du es auch vor hast. Je nachdem wie viele User du mit IE 6 hast währe es vielleicht doch besser ein extra Bildchen per <img> einzubinden, was auch den Vorteil hätte, dass es mit ausgedruckt werden würde, im gegenteil zum Hintergrundbildchen.

Grüße
Jeena Paradies

[Jochen]

Hi Jeena,

danke für den Hinweis!
Ich machs jetzt wahrscheinlich mit ganz normalen Bildchen.

Grüße,
Jochen

[Ashura]

Hallo Jeena.

Je nachdem wie viele User du mit IE 6 hast währe es vielleicht doch besser ein extra Bildchen per <img> einzubinden, was auch den Vorteil hätte, dass es mit ausgedruckt werden würde, im gegenteil zum Hintergrundbildchen.

Wenn Opera folgendes schon verstehen könnte, würde ich es sofort verwenden und alle <img /> Elemente rausschmeißen:

a[href^="http://"]:before{content:url(link_ext.gif)" ";}
a[href^="mailto:"]:before{content:url(link_mail.gif)" ";}

Aber leider können das nur die Geckos... ;(

Gruß, Ashura

[Jeena Paradies]

Hallo,

Aber leider können das nur die Geckos... ;(

Ja das nervt mich auch schon mittlerweile über zwei Jahre :-( deshalb gebe ich bis heute jedem link eine klasse class="intlink" class="extlink" oder class="mail" und mache es doch mit Hintergrundbildern damit der IE wenigstens auch ein bischen mitmachen kann ;-)

Grüße
Jeena Paradies

[Ashura]

Hallo Jeena.

Ja das nervt mich auch schon mittlerweile über zwei Jahre :-( deshalb gebe ich bis heute jedem link eine klasse class="intlink" class="extlink" oder class="mail" und mache es doch mit Hintergrundbildern damit der IE wenigstens auch ein bischen mitmachen kann ;-)

Aber wenn ich die Kleinigkeit einbinden will, dass auch das Bild selbst zum Link gehört, komme ich um <img /> nich umhin.

Die Möglichkeit der Klassenzuweisung für die Links lasse ich mir aber noch einmal durch den Kopf gehen...

Gruß, Ashura

[MudGuard]

Hi,

Das funktioniert auch, nur wenn der Link dann umbricht ist die Icon-Grafik im IE6 weg. Im Firefox funktioniert das ganze einwandfrei.

Ggf. das Umbrechen des Links verhindern - die white-space-Eigenschaft auf pre zu setzen sorgt aber dafür, daß im Link gar nicht mehr umgebrochen wird - wenn Du da längere Texte drin hast, geht das halt nicht so gut.

cu,
Andreas

[Jochen]

Hi Andreas,

hab ich auch schon probiert gehabt. IE6 bricht dann zwar den Link um, zeigt das Bildchen aber trotzdem nicht an :(

Grüße,
Jochen

[Cybaer]

Hi,

hab ich auch schon probiert gehabt. IE6 bricht dann zwar den Link um, zeigt das Bildchen aber trotzdem nicht an :(

Nochmal: Der IE 6 darf den Link *nicht* umbrechen!

Dann tritt das Problem nur auf, wenn der Link an den linken Rand "gedrückt" wird. Aber das ist nicht behebbar.

S. auch Coding: Link-Kennzeichnung

Die ganze Site ist derart iconifiziert.

Gruß, Cybaer