Icon bei Link unterstrichen - was tun

[Antonia Lutz]

warum sind hier die Icon-Grafiken auch unterstrichen?

http://www.fire.ch/icon/icons-externelinks3.html

Der Link umfasst hier den Text und das Icon. Ich habe schon herausgefunden, dass das Problem weg ist, wenn ich die Document Type Definition oben rauslösche, aber das ist kein gangbarer Weg.

Ideen, wie ich den Strich unter dem icon wegbekommen kann? d.h. nur der Text soll unterstrichen sein, das Icon nicht.

[Antonia]

vielleicht muss ich präzisieren: Die Icons sind unterstrichen auf Mac in Safari und Firefox, aber nicht im Explorer.

Daher eine weitere Frage: Bei wem bzw. welchen Browsern erscheinen die Icons bei den Links unterstrichen?

[mbr]

Hallo Antonia

vielleicht muss ich präzisieren: Die Icons sind unterstrichen auf Mac in Safari und Firefox, aber nicht im Explorer.

Daher eine weitere Frage: Bei wem bzw. welchen Browsern erscheinen die Icons bei den Links unterstrichen?

Also: Bei mir: Windows XP: Netscape 7.2 unterstrichen, IE 6 nicht unterstrichen

Der IE unterstreicht es sogar dann nicht, wenn ich den style (text-decoration:none;) rausnehme. Anscheinend wird hier wirklich nur Text unterstrichen, während beim Netscape der gesamte Inhalt des <a> Tags unterstrichen wird. Bin mir jetzt nicht ganz sicher, was in der Spezifikation gefordert wird, oder was ich besser finden sollte.

Habe übrigens gerade mal folgendes probiert: Das Icon einfach mal als extra link mit demselben Verweis wie vorher den Text. Ist zwar nicht besonders schön, wäre aber zumindest ne Idee für einen workaround
(Mir ist klar, dass es erstens hässlich aussieht - im Quelltext ;-) - und sich zweitens mehr Fehler einschleichen können, weil man die Adressen dann immer doppelt eingeben muss. Dafür hat man das Problem mit dem Unterstreichen gelöst...)

Vielleicht hat ja noch einer der Experten ne bessere Idee.

Erstmal viel Erfolg und liebe Grüße

mbr

[Antonia]

Habe übrigens gerade mal folgendes probiert: Das Icon einfach mal als extra link mit demselben Verweis wie vorher den Text. Ist zwar nicht besonders schön, wäre aber zumindest ne Idee für einen workaround
(Mir ist klar, dass es erstens hässlich aussieht - im Quelltext ;-) - und sich zweitens mehr Fehler einschleichen können, weil man die Adressen dann immer doppelt eingeben muss. Dafür hat man das Problem mit dem Unterstreichen gelöst...)

Klar würde das gehen, aber diese doppelten Links wollten wir eben vermeiden. Ist auch von der Accessability her schlecht, ein Screenreader liest dann zweimal denselben Link vor.

[Ashura]

puts "Hallo " + gets.chomp + "."

?> Antonia
=> Hallo Antonia.

warum sind hier die Icon-Grafiken auch unterstrichen?

http://www.fire.ch/icon/icons-externelinks3.html

Bei mir nicht.

Ideen, wie ich den Strich unter dem icon wegbekommen kann? d.h. nur der Text soll unterstrichen sein, das Icon nicht.

Simpel:

<a><img>Foo</a> --> <img><a>Foo</a>

Einen schönen Freitag noch.

Gruß, Ashura

[Antonia]

Simpel:

<a><img>Foo</a> --> <img><a>Foo</a>

dann ist das Bild aber kein Link mehr, oder? wir möchten eben, dass der Benutzer auch auf das Icon klicken kann.

[Ashura]

puts "Hallo " + gets.chomp + "."

?> Antonia
=> Hallo Antonia.

<a><img>Foo</a> --> <img><a>Foo</a>

dann ist das Bild aber kein Link mehr, oder?

Nein, natürlich nicht. Entweder gehört beides zum Link und der UserAgent entscheidet, wie er damit zu verfahren hat, oder das Bild wird aus dem Link genommen und unterliegt damit nicht mehr der willkürlichen Darstellung des UserAgents.

wir möchten eben, dass der Benutzer auch auf das Icon klicken kann.

Dann sehe ich keine verlässliche Möglichkeit.

Einen schönen Samstag noch.

Gruß, Ashura

[Marian]

Hi Antonia,

warum sind hier die Icon-Grafiken auch unterstrichen? http://www.fire.ch/icon/icons-externelinks3.html

Ideen, wie ich den Strich unter dem icon wegbekommen kann? d.h. nur der Text soll unterstrichen sein, das Icon nicht.

du solltest mit css festlegen, dass ein link unterstrichen ist und dich nicht darauf verlassen, dass das im browser als standard eingestellt ist (bei mir ist es das nämlich nicht, deswegen sind sie auch nicht unterstrichen).

  
img, img:link, img:hover {text-decoration:none}  

sollte so funktionieren... (vielleicht noch :focus und :active, probiers aus)

Gruß, Marian

[Ashura]

puts "Hallo " + gets.chomp + "."

?> Marian
=> Hallo Marian.

img, img:link, img:hover {text-decoration:none}

> sollte so funktionieren... (vielleicht noch :focus und :active, probiers aus)  
  
Warum sollte es? Nicht das img-Element ist unterstrichen, sondern sein Elternelement, das a-Element.  
  
Zudem kann ein img-Element (zumindest zum jetzigen Zeitpunkt noch nicht) Träger einer Hypertextverknüpfung sein.  
  
  
Einen schönen Freitag noch.  
  
Gruß, Ashura  

-- 
Selfcode: sh:( fo:) ch:? rl:( br:^ n4:& ie:{ mo:) va:) de:> zu:) fl:( ss:| ls:[ js:|  
[30 Days to becoming an Opera8 Lover](http://operalover.tntluoma.com/8/) -- [Opera 8.02 mit Bittorent-Unterstützung](http://operalover.tntluoma.com/8/opera_802_with_bittorrent)  
Meine Browser: Opera 8.01 | Firefox 1.0.4 | Lynx 2.8.3 | Netscape 4.7 | IE 6.0  
[\[Deshalb frei! - Argumente pro freie Software\]](http://deshalbfrei.org/)

[Marian]

Hi Ashura,

img, img:link, img:hover {text-decoration:none}

Warum sollte es? Nicht das img-Element ist unterstrichen, sondern sein Elternelement, das a-Element.

Zudem kann ein img-Element (zumindest zum jetzigen Zeitpunkt noch nicht) Träger einer Hypertextverknüpfung sein.

dann halt 'a img {}' (aber das img am anfang geht trotzdem (auch wenn :link vielleicht nicht geht), das bild wird dann halt nicht unterstrichen, das geerbte unterstrichen vom a wird überschrieben)

Gruß, Marian

[Ashura]

puts "Hallo " + gets.chomp + "."

?> Marian
=> Hallo Marian.

(aber das img am anfang geht trotzdem (auch wenn :link vielleicht nicht geht), das bild wird dann halt nicht unterstrichen, das geerbte unterstrichen vom a wird überschrieben)

Nein. Im Firefox erreichst du damit gar nichts. Opera und IE unterstreichen das Bild standardmäßig nicht.

Mein Vorschlag scheint wohl nicht zu gefallen, wie mir scheint...

Einen schönen Freitag noch.

Gruß, Ashura

[Maxx]

Hallo Antonia,

warum sind hier die Icon-Grafiken auch unterstrichen?
http://www.fire.ch/icon/icons-externelinks3.html
Ideen, wie ich den Strich unter dem icon wegbekommen kann? d.h. nur der Text soll unterstrichen sein, das Icon nicht.

spontan hätte ich gesagt a img { text-decoration:none; } aber aus unerfindliche Gründen klappt das nicht.

Allerdings könntest du es andersrum lösen.
a      { text-decoration:none; }
a span { text-decoration:underline; }

<a href="#"><span>Linktext</span><img src="... border="0"></a> weiter im Text

Mein FF macht es so wie gewünscht. Ich habe allerdings keinen Mac zum ausprobieren. Denke aber, dass es da auch klappt.

Grüße,

Jochen

[Antonia]

Allerdings könntest du es andersrum lösen.
a      { text-decoration:none; }
a span { text-decoration:underline; }

<a href="#"><span>Linktext</span><img src="... border="0"></a> weiter im Text

Mein FF macht es so wie gewünscht. Ich habe allerdings keinen Mac zum ausprobieren. Denke aber, dass es da auch klappt.

Ja, so würde es gehen! Problem ist, dass in dem Stylesheet, das ich nachher verwenden muss, die Links als unterstrichen definiert sind. Ich weiss noch nicht, ob es möglich ist, das Stylesheet anzupassen, also z.B. eine Klasse für diese Links mit Icons zu definieren.

ich könnte es natürlich lokal machen:
<a href="#" style="text-decoration:none"><span style="text-decoration:underline">Linktext</span><img src="..."></a>
das würde funktionieren, ist aber relativ aufwändig. Mal schauen.

[Gunnar Bittersmann]

Hi Antonia,

http://www.fire.ch/icon/icons-externelinks3.html

</faq/#Q-19>, danke.

Ideen, wie ich den Strich unter dem icon wegbekommen kann? d.h. nur der Text soll unterstrichen sein, das Icon nicht.

a img {text-decoration: none} tut’s zwar im IE, aber nicht im FF.

a img {position: relative; top: 0.2em} gewinnt sicher keinen Preis, aber die Unterstreichung ist weg (genauer: hinter dem Bild).

Gruß,
Gunnar

[Antonia]

http://www.fire.ch/icon/icons-externelinks3.html

</faq/#Q-19>, danke.

sorry, bin ganz neu hier...

a img {position: relative; top: 0.2em} gewinnt sicher keinen Preis, aber die Unterstreichung ist weg (genauer: hinter dem Bild).

interessante Idee! Aber das Icon ist für meinen Geschmack dann zu weit unten (weiter unten als die Unterstreichung des Linktextes.

[Ingo Turski]

Hi,

a img {position: relative; top: 0.2em} gewinnt sicher keinen Preis, aber die Unterstreichung ist weg (genauer: hinter dem Bild).

interessante Idee! Aber das Icon ist für meinen Geschmack dann zu weit unten (weiter unten als die Unterstreichung des Linktextes.

wenn Du das anwenden wolltest: was hindert Dich, die Grafik nach unten um 2 transparente Pixel zu erweitern?

freundliche Grüße
Ingo

[Gunnar Bittersmann]

Hi Ingo,

a img {position: relative; top: 0.2em} gewinnt sicher keinen Preis, aber die Unterstreichung ist weg (genauer: hinter dem Bild).

wenn Du das anwenden wolltest: was hindert Dich, die Grafik nach unten um 2 transparente Pixel zu erweitern?

Ähm, transparent? Sieht man dann nicht die Unterstreichung durch? Die Pixel müssten wohl die Farbe des Seitenhintergrunds haben.

Dann bietet sich natürlich auch die Angabe der Verschiebung nach unten (top) in Pixeln (nicht em) an.

Gruß,
Gunnar