Bilder ohne Textdecoration

[Marcel]

ich weiss schon oft diskutiert....aber eine Lösung für mein Problem war leider noch nicht da oder ich habs nicht gefunden.

mein problem: wieso wird bei allen Bildern mit Links die Linie
beim hover angezeigt ?? habe alle Varianten versucht. ich kriege die
Linie einfach nicht weg:

Hoffe ihr könnt mir hier einen Tipp geben. Leider kann ich für die standard-link oder die images keine neue Klasse vergeben.

css Einträge:
/* --- link standard --*/
 a { text-decoration:none; color:#3683cb; }
 a:link { text-decoration:none; color:#3683cb; }
 a:visited { text-decoration:none; }
 a:hover { text-decoration:none; border-bottom: 1px #444 dotted; color: #444; }
 a:focus { text-decoration:none; }
 a:active { text-decoration:none; }

/* ---- link for images without border  */
a img, a:link img, a:hover img { border-bottom:none; text-decoration:none; }

Danke für einen Tipp
Gruss marcel

[Jonas]

ich weiss schon oft diskutiert....aber eine Lösung für mein Problem war leider noch nicht da oder ich habs nicht gefunden.

Warum machst du nicht einfach

img{
 border: 0;
}

?

Gruss Jonas

[marcel]

ich weiss schon oft diskutiert....aber eine Lösung für mein Problem war leider noch nicht da oder ich habs nicht gefunden.

Warum machst du nicht einfach

img{
border: 0;
}

?

Gruss Jonas

ja schön wärs wenns so gehen würde. leider wird mir immer ein dotted border-bottom unter das bild gezeichnet wenn ich darüberfahre !?
und dies ist im IE und FF so, wobei im FF die dotted linie ca. 1px unterhalb des Bildes angezeigt wird, im IE6.0 bündig Unterkante Bild !

Ist es überhaupt möglich ein Bild das sich in einem <a>tag befindet mit einer standard img klasse zu belegen und so den <a>tag auszuschalten ?

[Længlich]

Ahoj!

ja schön wärs wenns so gehen würde. leider wird mir immer ein dotted border-bottom unter das bild gezeichnet wenn ich darüberfahre !?
und dies ist im IE und FF so, wobei im FF die dotted linie ca. 1px unterhalb des Bildes angezeigt wird, im IE6.0 bündig Unterkante Bild !

Kann es sein, daß dieser Effekt an einer anderen Stelle in Deinem CSS explizit erzeugt wird? Entweder weiter unten, oder durch einen spezifischeren Selektor? Oder eventuell sogar in einem style-Attribut?
Normalerweise klappt das nämlich, was Jonas geschrieben hat.
Hast Du eine Beispielseite?

Ist es überhaupt möglich ein Bild das sich in einem <a>tag befindet mit einer standard img klasse zu belegen und so den <a>tag auszuschalten ?

Du kannst Bilder in Links mit a img selektieren, oder ihnen eine Klasse zuweisen und sie darüber selektieren. Das geht in Links genauso wie überall sonst.

Viele Grüße vom Længlich

[Marcel]

Du kannst Bilder in Links mit a img selektieren, oder ihnen eine Klasse zuweisen und sie darüber selektieren. Das geht in Links genauso wie überall sonst.

Viele Grüße vom Længlich

hier die Seite in der Ansicht (habe ihn aus dem Gesamtkonzept
extrahiert...und siehe da - es geht auch nicht was ich möchte:

http://www.peetz-immobilien.com/test/index.html

den code siehst du ja in der Quellansicht. Sonst steht da nichts drin.

danke und Gruss
Marcel

[Længlich]

Shalom!

http://www.peetz-immobilien.com/test/index.html

den code siehst du ja in der Quellansicht. Sonst steht da nichts drin.

Daran liegt's (Zeile 11):
[code lang=css]a:hover { text-decoration:none; border-bottom: 1px #444 dotted; color: #444; }[/lang]

Die Border gehört also nicht dem Bild, sondern dem Link. Jetzt verstehe ich auch, was Du mit "und so den <a>tag auszuschalten" meintest. Und mir fällt auf, daß ich das schon im Ursprungsposting hätte sehen können. :-/
Hmm, das ist jetzt blöd. Ein a nur dann zu selektieren, wenn es ein img enthält, ist nicht möglich. (Ich nehme an, die Links ohne Bild sollen die Border behalten, sonst wäre es ja einfach.)
Meines Wissens ist die einzige Möglichkeit, den a-Elementen Klassen zu geben: Eine für die mit Bild, und eine für die ohne (wobei Du eine der beiden Klassen auch weglassen kannst).
Wenn das nicht geht, läßt es sich eventuell irgendwie tricksen, daß sich das Bild über die Border schiebt, vielleicht mit position:relative, oder indem Du die Höhe des Links so beschränkst, daß sie nicht mehr für das Bild ausreicht. Dann schiebt sich das Bild aber nicht nur über die Border, sondern auch über eventuellen Text darunter.

Viele Grüße vom Længlich

[Længlich]

Merhaba!

Im Firefox klappt es, wenn Du dem img
vertical-align:bottom;
gibst. Im Internet Explorer ist die Linie dann immer noch zu sehen. Wenn es Dich nicht stört, daß das Bild dann einen Pixel tiefer hängt als vorher, hilft:

position:relative;  
top:1px;

Andere Browser habe ich gerade nicht da (ist nicht mein Rechner ;-) ), aber ich denke, es sollte gehen. War also doch einfacher, als ich dachte, und auf den ersten Blick ohne Nebenwirkungen. ;-)

Viele Grüße vom Længlich

[Marcel]

Andere Browser habe ich gerade nicht da (ist nicht mein Rechner ;-) ), aber ich denke, es sollte gehen. War also doch einfacher, als ich dachte, und auf den ersten Blick ohne Nebenwirkungen. ;-)

Viele Grüße vom Længlich

Hehehe
super das klappt ja bestens , sieht keine "Sau" dass da getrickst wird. sieht gut aus.

Danke, danke.

[marcel]

Wenn das nicht geht, läßt es sich eventuell irgendwie tricksen, daß sich das Bild über die Border schiebt, vielleicht mit position:relative, oder indem Du die Höhe des Links so beschränkst, daß sie nicht mehr für das Bild ausreicht. Dann schiebt sich das Bild aber nicht nur über die Border, sondern auch über eventuellen Text darunter.

Viele Grüße vom Længlich

so geil....
dann bin ich erst mal froh dass es nicht geht...(also nur dass ich nicht ganz so ein Depp bin) und mir bleibt nichts Anderes übrig als entweder die images oder die Links mit einer class zu versehen und dieses Elend wegzukriegen. Das habe ich doch richtig verstanden so.
alles andere wäre ein Gebastel ;-)

na dann danke ich mal ganz herzlich für diese ausführliche Info. Dann mache ich mich mal ans umcodieren.

Danke und Gruss
Marcel

[EKKi]

Mahlzeit,

Daran liegt's (Zeile 11):

a:hover { text-decoration:none; border-bottom: 1px #444 dotted; color: #444; }[/lang]

Hmm, das ist jetzt blöd. Ein a nur dann zu selektieren, wenn es ein img enthält, ist nicht möglich. (Ich nehme an, die Links ohne Bild sollen die Border behalten, sonst wäre es ja einfach.)

Wieso ist das nicht möglich? Sollte es nicht so funktionieren:

[code lang=css]
a:hover { text-decoration:none; border-bottom: 1px #444 dotted; color: #444; }

a:hover img { border-bottom: 0; }

  
So müsste man doch für alle in <a> eingeschlossene <img> festlegen, dass sie eben keinen unteren Rand haben?  
  
  
MfG,  
EKKi  

-- 
sh:( fo:| ch:? rl:( br:> n4:~ ie:% mo:} va:) de:] zu:) fl:{ ss:) ls:& js:|

[Længlich]

N'Abend!

Hmm, das ist jetzt blöd. Ein a nur dann zu selektieren, wenn es ein img enthält, ist nicht möglich. (Ich nehme an, die Links ohne Bild sollen die Border behalten, sonst wäre es ja einfach.)

Wieso ist das nicht möglich? Sollte es nicht so funktionieren:

a:hover { text-decoration:none; border-bottom: 1px #444 dotted; color: #444; }

a:hover img { border-bottom: 0; }

>   
> So müsste man doch für alle in <a> eingeschlossene <img> festlegen, dass sie eben keinen unteren Rand haben?  
  
Damit selektierst Du das img innerhalb des a, nicht das a, das ein img enthält. Das img hat dann zwar keinen Rand, aber der vom a bleibt sichtbar. Deswegen war noch der Trick nötig, das img über diesen Rand vom a zu schieben (mit position:relative).  
  
Viele Grüße vom Længlich

[EKKi]

Mahlzeit,

Damit selektierst Du das img innerhalb des a, nicht das a, das ein img enthält. Das img hat dann zwar keinen Rand, aber der vom a bleibt sichtbar. Deswegen war noch der Trick nötig, das img über diesen Rand vom a zu schieben (mit position:relative).

*patsch*

Klar - Denkfehler meinerseits ... :-)

MfG,
EKKi