Linkfarben in IE

istfutz · 24.05.2007, 21:57

hallo,

ich habe auf meiner HP einige Bilder die verlinkt sind. Die Bilder haben einen dünnen, schwarzen Rahmen. Fährt man mit der Maus über das Bild, wird der Rahmen orange. Dies funktioniert allerdings nur im Firefox und leider nicht im IE. Weiß vielleicht jemand warum?

vielen dank im voraus

Mich@el · 24.05.2007, 22:02

Hallo!
Der Code würde Sinn machen! Aber schau auch mal hier. Möglicherweise was vergessen?

Grüße
Michael

istfutz · 24.05.2007, 22:22

hier der quellcode:

HTML-Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
	
	<title>pan</title>

	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta http-equiv="content-language" content="en" />

	<meta name="description" lang="en" content="Lightbox 2 is a simple, unobtrusive script used to overlay images on the current page. It's a snap to setup and works on all modern browsers." />
	<meta name="keywords" content="lightbox, lightbox2, lightbox 2, lightbox js, lokesh, dhakar" />
	
	<link rel="shortcut icon" type="image/ico" href="/images/favicon.gif" />	
	<link rel="stylesheet" href="http://www.mtbsuedeifel.de/pan/screen.css" type="text/css" media="screen" />
	<link rel="stylesheet" href="http://www.mtbsuedeifel.de/pan/lightbox.css" type="text/css" media="screen" />
	
	<script src="http://www.mtbsuedeifel.de/pan/prototype.js" type="text/javascript"></script>
	<script src="http://www.mtbsuedeifel.de/pan/scriptaculous.js?load=effects" type="text/javascript"></script>
	<script src="http://www.mtbsuedeifel.de/pan/lightbox.js" type="text/javascript"></script>

    <style type="text/css">
<!--
.Stil12 {font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #000000;
}
body {
	background-color: #ACACAC;
}
a:link {
	color: #000000;
}
a:hover {
	color: #FF9900;
}
.Stil13 {color: #333333; font-size: 24px; font-family: Arial, Helvetica, sans-serif;}
-->
    </style>
</head>
<body>
<p><br />
  <br />
  <br />
</p>
<table width="90%" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td><div align="left"><span class="Stil13">essen</span>
            <hr />
    </div></td>
  </tr>
</table>
<br />
<br />
<br />
<div class="section">
  <table width="90%" border="0" align="center" cellspacing="0">
      <tr>
        <td width="25%" align="left" valign="top"><a href="http://www.mtbsuedeifel.de/pan/bilder/essen/bank1_640.JPG" rel="lightbox"><img src="http://www.mtbsuedeifel.de/pan/bilder/essen/bank1_314.JPG" width="314" height="209" align="top"/></a></td>
        <td width="3%">&nbsp;</td>
        <td width="72%" align="left" valign="top"><div align="justify"><span class="Stil12">wir fertigen unsere massivholztische aus ausgesuchten hölzern, überwiegend aus heimischen beständen - qualität direkt vor ort. hierbei legen wir besonderen wert auf eine natürliche und angemessene oberflächenbehandlung. </span></div></td>
      </tr>
  </table>
	<p>&nbsp;</p>
	<div class="thumbnail">
		<a href="http://www.mtbsuedeifel.de/pan/image-2.jpg" rel="lightbox" title="Optional caption."></a>
	  <!-- end .section -->
</div>
</div>
  <!-- end .section -->
  <!-- end #content -->
</body>
</html>

th2409 · 25.05.2007, 09:10

@istfutz

1. Das Bild, also das unmittelbare <img>-Tag, sollte man mit dem Attribut border="0" ausstatten. In Deinem Quelltext würde es dann beipsielsweise so aussehen:

<img src="http://www.mtbsuedeifel.de/pan/bilder/essen/bank1_314.JPG" width="314" height="209" align="top" border="0"/>

Das ist "richtiges althergebrachtes" HTML, und die Browser machen sonst mit dem Bildrahmen bei Links unterschiedliche Dinge; je nach Linkstatus (Link, besucht, aktiv...) ändert er seine Farbe, und das ist meistens nicht gewollt.

Alle anderen Hervorhebungen bzw. Rahmen mache ich mit CSS. Dem Bild wird eine CSS-Klasse zugewiesen, und darin bekommt das Bild selbst einen Rahmen (mit Hintergrund identisch, damit praktisch nicht zu sehen). Der Hover-Zustand der Klasse kriegt dann eben für den Rahmen die Farbe orange oder hellkhaki (...) verpasst. Damit ist das Erscheinungsbild eigentlich am besten vorgegeben.

istfutz · 25.05.2007, 21:39

wenn ich doch border=0 mache ist doch der gesamte Rahmen weg.

Und ich möchte ja das der Rahmen in schwarz angezeigt wird und wenn ich mit der Maus drüber fahre das er dann orange wird.

th2409 · 29.05.2007, 08:56

Wiederholung ist die Mutter der Weisheit: Nimm CSS!

Definiere Die eine Klasse (z.B. "Bild"):

.bild {
border: 1px solid #000000;
}
.bild:hover {
border: 1px solid #FF6600;
}

Dein Quelltext mit dem Bild sollte dann in etwa so aussehen:
<img src="http://www.mtbsuedeifel.de/pan/bilder/essen/bank1_314.JPG" width="314" height="209" align="top" border="0" class="bild"/>

Damit hat Dein Bild einen schönen CSS-definierten Rahmen (schwarz). Beim Hovern wird der Rahmen orange.

istfutz · 09.06.2007, 03:03

vielen dank, es hat funktioniert