verschiedene Link-Style und IE

[Björn]

Hallo liebe Leut,

ich habe auf meiner Seite Links, die ich mit einem <a href...> bediene, wobei die Textfarbe sich nur dann verändern soll, wenn man mit der Maus drüber fährt. Folgend gelöst:

Index-Datei:
[...
<a class="textlink" href="index.php">Startseite</a>
...]

CSS-Datei
[...
a:link.textlink, a:visited.textlink, a:focus.textlink, a:active.textlink
   {
   font-size:14px;
   color:white;
   font-weight:bold;
   text-decoration:none;
   }
a:hover.textlink
   {
   font-size:14px;
   font-weight:bold;
   color:#D58129;
   text-decoration:underline;
   }
...]

Soweit setzt sowohl Firefox als auch der IE alles so um, wie ich es wollte.

Nun möchte ich über einen weiteren <a href...> verschiedene Bilderchens darstellen, die erst dann den Rand farblich verändern, wenn man mit der Maus drüber fährt. Umgesetzt wie folgt:

Index-Datei:
[...
<a class="bildlink" href="index.php"><img class="bild" name="test" src="test.jpg" border="4"></a>
...]

CSS-Datei
[...
a:link.bildlink, a:visited.bildlink, a:focus.bildlink, a:active.bildlink
   {
   color:#000000;
   }
a:hover.bildlink
   {
   color:#D58129;
   }
...]

Firefox macht alles richtig, der IE allerdings stellt die Rahmen in hellblau dar und ändert auch nichts daran, wenn ich mit der Maus drüber fahre. Der erste Link 'textlink' bleibt weiterhin richtig dargestellt.

Kann der IE nicht mit zwei verschiedenen <a href...>´s um oder habe ich da was übersehen?

Übrigens habe ich es auch nicht geschafft den Borderrand von 4px für meine Bilderchens (class=bild) in CSS zu definieren (border:4px;) wurde ignoriert...

Vielen Dank für Hilfestellung/en

Gruß Björn

[Der Martin]

Hi,

Nun möchte ich über einen weiteren <a href...> verschiedene Bilderchens darstellen, die erst dann den Rand farblich verändern, wenn man mit der Maus drüber fährt. Umgesetzt wie folgt:

a:link.bildlink, a:visited.bildlink, a:focus.bildlink, a:active.bildlink

{
   color:#000000;
   }
a:hover.bildlink
   {
   color:#D58129;
   }

  
du legst hiermit für Bild-Links eine Textfarbe fest. Meinst du das ernst? Du sagst doch schon selbst, du willst den Rand, also den Rahmen, sprich: border verändern. Die einzige Stolperfalle ist hier eigentlich, dass man diesen Rahmen fälschlicherweise dem a-Element zuordnet; in Wirklichkeit gehört er dem img-Element.  
  

> Kann der IE nicht mit zwei verschiedenen <a href...>´s um oder habe ich da was übersehen?  
  
Oder. ;-)  
  

> Übrigens habe ich es auch nicht geschafft den Borderrand von 4px für meine Bilderchens (class=bild) in CSS zu definieren (border:4px;) wurde ignoriert...  
  
Vielleicht solltest du außer einer Rahmenstärke auch eine Rahmenart und -farbe angeben.  
  
So long,  
 Martin  

-- 
Okay, Alkohol ist keine Antwort.  
Aber manchmal vergisst man beim Trinken wenigstens die Frage.  

[Björn]

Hallo Martin

Die einzige Stolperfalle ist hier eigentlich, dass man diesen Rahmen fälschlicherweise dem a-Element zuordnet; in Wirklichkeit gehört er dem img-Element.

Ich kann aber doch nicht direkt beim img-Element die Randfarbe bestimmen, wenn dieser Rand sich verändern soll, sobald man mit der Maus 'drüber fährt'.

Ich muss doch beim <a href...>-Element die border-color bestimmen, oder sehe ich das falsch?
Wenn ich (border-color:#000000;) nutze, wird zwar ein Rahmen dargestellt, dieser erscheint jedoch zwei Pixel unter dem Bild und reicht nur wenige Pixel hoch, sodass er hinter dem Bild verläuft, es aber lange nicht umfasst.
So gehts also auch nicht... :(

Vielleicht solltest du außer einer Rahmenstärke auch eine Rahmenart und -farbe angeben.

Das hat geklappt - hierfür schonmal danke

Noch Ideen bezüglich des Link-Rahmens?

Danke Björn

[Der Martin]

Hallo Björn,

Die einzige Stolperfalle ist hier eigentlich, dass man diesen Rahmen fälschlicherweise dem a-Element zuordnet; in Wirklichkeit gehört er dem img-Element.
Ich kann aber doch nicht direkt beim img-Element die Randfarbe bestimmen, ...

doch, kannst du: Für img-Elemente, die sich innerhalb eines a-Elements im hover-Zustand befinden. Dafür gibt es ja den Nachfahrenselektor.

Ich muss doch beim <a href...>-Element die border-color bestimmen, oder sehe ich das falsch?

Ja, das siehst du falsch. Du musst border-color für das img-Element festlegen.

Wenn ich (border-color:#000000;) nutze, wird zwar ein Rahmen dargestellt, dieser erscheint jedoch zwei Pixel unter dem Bild und reicht nur wenige Pixel hoch, sodass er hinter dem Bild verläuft, es aber lange nicht umfasst.

Dann hast du ein anderes Problem. Es hört sich so an, als ob du das img-Element floatest oder absolut positionierst. Beides bewirkt, dass es für Größe und Position seines Elternelements nicht mehr relevant ist; es liegt in einem eigenen Kontext und ist für den Rest des Dokuments quasi nicht da.
Falls hier keine absolute Position oder Floating im Spiel ist, solltest du etwas mehr zeigen (HTML und CSS), dass man den Effekt nachvollziehen kann. Am besten ein Online-Beispiel.

So long,
 Martin

[Björn]

Hey Martin,

Du hast recht, das img-Element befindet sich innerhalb eines a-Elements, welches sich wiederum in einem Div-Element befindet.
Dieses Div-Element hat das Attribut 'position:absolute;' was auch nicht zu umgehen ist.

Heisst das jetzt, dass ich meinen Rahmen nicht farblich ändern kann, sobald man mit der Maus 'drüber fährt'?

Was habe ich da noch für Möglichkeiten?

Danke für die Gedult

Björn

[ChrisB]

Hi,

Du hast recht, das img-Element befindet sich innerhalb eines a-Elements,

Gut - für diesen Fall hat dir Martin bereits beschrieben, wie vorzugehen ist.

welches sich wiederum in einem Div-Element befindet.
Dieses Div-Element hat das Attribut 'position:absolute;' was auch nicht zu umgehen ist.

Was auch vollkommen uninteressant ist.

MfG ChrisB

[MudGuard]

Hi,

du legst hiermit für Bild-Links eine Textfarbe fest. Meinst du das ernst? Du sagst doch schon selbst, du willst den Rand, also den Rahmen, sprich: border verändern.

Initial Value für die border-color ist der Wert von color.

cu,
Andreas

[Der Martin]

Hallo,

du legst hiermit für Bild-Links eine Textfarbe fest. Meinst du das ernst? Du sagst doch schon selbst, du willst den Rand, also den Rahmen, sprich: border verändern.
Initial Value für die border-color ist der Wert von color.

danke, das erklärt einiges. Wusste ich noch nicht.

Ciao,
 Martin