• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

Imagelink Bordercolor mittels CSS ändern

promillo

promillo

New member
Halllo,

habe folgedens Problem:
Ich möchte die Bordercolor die ein Bild einfasst ändern. Im Firefox funktioniert das mit folgdendem Beispiel ohne Probleme, nur im IE funktioniert das ganze irgendwie nicht...

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
 <link rel="stylesheet" type="text/css" href="style/style.css">
</head>
<body>
<a href="bild.png" target="_new"><img src="thumb_bild.png" width="50" border="1"></a>
</body>
</html>

Die CSS-Datei dazu:

HTML: 
body {font-size:9pt; font-family:arial; color:#000000;}
a {font-size:9pt; font-family:arial; color:#999999; text-decoration:none;}
a:link {font-size:9pt; font-family:arial; color:#999999; text-decoration:none;}
a:visited {font-size:9pt; font-family:arial; color:#999999; text-decoration:none;}
a:active {font-size:9pt; font-family:arial; color:#999999; text-decoration:none;}
a:hover {font-size:9pt; font-family:arial; color:#ff6600; text-decoration:none;}

Weiss jemand Rat oder kann mir dabei helfen?

Gruss & Thx
promillo
 
Hallo promillo,


schreibe mal:

<a href="bild.png" target="_new"><img src="thumb_bild.png" width="50" style="border-left: 1px solid black ; border-top: 1px solid black ; border-right: 1px solid white ; border-bottom: 1px solid white"></a>

oder nur style="border: 2px solid farbe"
 
danke hat mir weitergeholfen!

Zwar fehlt im IE nachwievor dann der Effekt, wenn man mit dem Cursor über das Bild fährt (img:hover tut nicht :( ), aber zumindest ist die Border nicht mehr blau. Habs folgender Maßen gemacht:

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html>
<head>
 <link rel="stylesheet" type="text/css" href="style/style.css">
</head>
<body>
 <a href="bild.png" target="_new"><img class="blub" src="thumb_bild.png" width="50" border="1"></a> 
</body>
</html>

CSS:

HTML: 
body {font-size:9pt; font-family:arial; color:#000000;}
a:link {font-size:9pt; font-family:arial; color:#999999; text-decoration:none;}
a:visited {font-size:9pt; font-family:arial; color:#999999; text-decoration:none;}
a:active {font-size:9pt; font-family:arial; color:#999999; text-decoration:none;}
a:hover {font-size:9pt; font-family:arial; color:#ff6600; text-decoration:none;}
img.blub { border-left: 1px solid #999999; border-top: 1px solid #999999; border-right: 1px solid #999999; border-bottom: 1px solid #999999 }
img.blub:hover { border-left: 1px solid #ff6600; border-top: 1px solid #ff6600; border-right: 1px solid #ff6600; border-bottom: 1px solid #ff6600 }

Denn Hover-Effekt würde man höchstwahrscheinlich nur mit einem JavaScript hinbekommen, was ich aber vermeiden wollte, da ich kein JavaScript einsetzen möchte. Haben die IE-User halt pech gehabt ;)

gruss
promillo
 
Der IE zeigt nur hover-Reaktionen,
wenn es sich um das <a>-Tag handelt.
Da Du das Pic als Link nutzt, kann man da schon was machen.
Du musst nur Deine CSS etwas umstellen.
Code: 
a:link {font-size:9pt; font-family:arial; color:#999; text-decoration:none; border: 0px;}
a:visited {font-size:9pt; font-family:arial; color:#999; text-decoration:none;border: 0px;}
a:hover {font-size:9pt; font-family:arial; color:#ff6600; text-decoration:none; [B]border: 1px solid #ff6600;[/B]}
a:active {font-size:9pt; font-family:arial; color:#999; text-decoration:none; border: 0px;}
Wenn Du die Link-CSS auch noch für Textlinks nutzt,
musst Du einfach obigem Bsp. eine class zuweisen.
Code: 
a.img:link {font-size:9pt; font-family:arial; color:#999; text-decoration:none; border: 0px;}
a.img:visited {font-size:9pt; font-family:arial; color:#999; text-decoration:none; border: 0px;}
a.img:hover {font-size:9pt; font-family:arial; color:#ff6600; text-decoration:none; [B]border: 1px solid #ff6600;[/B]}
a.img:active {font-size:9pt; font-family:arial; color:#999; text-decoration:none; border: 0px;}
Code: 
<a [B]class="img"[/B] href="bild.png" target="_new"><img class="blub" src="thumb_bild.png" width="50" height="50"></a>
Dan darf natürlich auch kein border="1px" drinstehen.
Und auf die Reihenfolge der Links achten:
a:link
a:visited
a:hover
a:active
;)
 
hm dein Tip funktioniert, wobei beim hover dann das Bild immer "zuckt", wenn man mit dem Cursor drüberfährt. Zusätzlich gibts im Firefox eine seltsame zusätzlich Box beim hover (siehe Anhang), ist wohl die border die bei a:hover angegeben wurde :(
 

Anhänge

  • box.jpg
    box.jpg
    12,1 KB · Aufrufe: 5
Probiere dann mal einfach bei den anderen Bezeichnungen border zu setzen,
aber in der Hintergrundfarbe Deiner Site.
Bsp.:
Code: 
a:link {font-size:9pt; font-family:arial; color:#999; text-decoration:none; [B]border: 1px solid #fff;[/B]}
a:visited {font-size:9pt; font-family:arial; color:#999; text-decoration:none;[B]border: 1px solid #fff;[/B]}
a:hover {font-size:9pt; font-family:arial; color:#ff6600; text-decoration:none; border: 1px solid #ff6600;}
a:active {font-size:9pt; font-family:arial; color:#999; text-decoration:none;[B] border: 1px solid #fff;[/B]}
 
also im IE passts, nur bleibt diese seltsame box bleibt im firefox erhalten, ich glaube ich lebe einfach so damit, IE user haben halt pech, hehe... oder halt ne browserweiche und entsprechende CSS-Dateien dann verlinken...
 
Das kann's doch nicht sein... :(
Hast Du eventuell einen Online-Link?
Dann könnte ich Dir effektivere Lösungsvorschläge geben...
 
Seltsame Geschichte...
Code: 
 <a href="bild.jpg" target="_new"><img class="docs" src="bild.jpg" width="500" border="1">
border solltest Du raus nehmen...
height hinzufügen...

das:
Code: 
 border-left: 1px solid #999999; border-top: 1px solid #999999; border-right: 1px solid #999999; border-bottom: 1px solid #999999
kürzt Du ab in:
Code: 
border:1px solig #999;

Habe grade reloaded, jetzt geht's doch, oder?
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben