nicht angemeldet
Firefox zeigt Ränder zwischen Bildern
Hallo,
Ich haeb das Problem, dass Firefox mir zwischen als Link gesetzten Bildern Ränder anzeigt. Allerdings fügt sich nicht ein Abstand zwischen den Bildern ein, sondern es wird der rechte oder linke Rand (1px) des Bildes einfach schwarz.
Und das auch nur, wenn man mit der Maus über bestimmte Links rüberfährt,diese Ränder verbleiben dann aber dauerhaft.
Die Größe der Bilder habe ich schon überprüft
Opera zeigt alles tadellos an.
Folgendes ist ein Codeausschnitt:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta name="DC.Language" content="de"> <!-- de = deutschsprachig -->
<title>Verein</title>
<link rel="stylesheet" href="css/styles.css" type="text/css">
<link rel="shortcut icon" type="image/x-icon" href="img/favicon.ico" >
<script src="js/navi.js" type="text/javascript"></script>
</head>
<body onload="setDateTime();" style="background-image:url(img/hintergrund.png)">
<div align="center" width="100%">
<!-- Kopf-->
<div class="tabersatz1">
<a href="startseite.html"><img src="img/linksoben.png" border="0" style="float:left;" alt="FSV Rosenheim" /></a>
<a href="verein.html" onMouseOver="vereinknopf.src='img/vereinan.png';oeffne_navi('naviverein');" onMouseOut="vereinknopf.src='img/verein.png'; schliess_navi('naviverein');">
<img name="vereinknopf" src="img/verein.png" width="105px" height="66px" border="0" alt="Verein" style="float:left;"></a>
<a href="ausbildung.html" onMouseOver="ausbildungknopf.src='img/ausbildungan.png'; oeffne_navi('navileer');" onMouseOut="ausbildungknopf.src='img/ausbildung.png'; oeffne_navi('navileer');">
<img name="ausbildungknopf" src="img/ausbildung.png" width="120px" height="66px" alt="Ausbildung" border="0" style="float:left;"></a>
<a href="galerie.html" onMouseOver="galerieknopf.src='img/galeriean.png';oeffne_navi('navigalerie');" onMouseOut="galerieknopf.src='img/galerie.png';schliess_navi('navigalerie');">
<img name="galerieknopf" src="img/galerie.png" width="85px" height="66px" alt="Galerie" border="0" style="float:left;"></a>
<a href="wetter.html" onMouseOver="wetterknopf.src='img/wetteran.png';oeffne_navi('navileer');" onMouseOut="wetterknopf.src='img/wetter.png';oeffne_navi('navileer');">
<img name="wetterknopf" src="img/wetter.png" width="130px" height="66px" alt="Wetter" border="0" style="float:left;"></a>
<img src="img/kanteor.png" style="float:left;">
</div>
<!-- Mitte-->
<!--Submenüs-->
<table id="naviverein" width="760" cellpadding="0" cellspacing="0" style="display:none">
<tr>
<td width="190" style="background-image:url(img/feldlinks.png)">
</td>
<td align="right">
<a href="lage.html"><img src="img/navilage.png"></a>
</td>
<td align="right">
<a href="ausstattung.html"><img src="img/naviausstattung.png"></a>
</td>
<td align="right">
<a href="chronik.html"><img src="img/navichronik.png"></a>
</td>
<td align="right">
<img src="img/naviecke.png">
</td>
<td align="right">
<img src="img/navileerrechts.png">
</td>
<td width="10" style="background-image:url(img/feld.png)">
</td>
</tr>
</table>
<table id="navigalerie" width="760" cellpadding="0" cellspacing="0" style="display:none">
<tr>
<td width="190" style="background-image:url(img/feldlinks.png)">
</td>
<td>
<img src="img/navileermitte.png">
</td>
<td>
<a href="galeriepfl2008.html"><img src="img/navipfingst.png" border="0" ></a>
</td>
<td>
<a href="galerieff2008.html"><img src="img/naviflieg.png" border="0" ></a>
</td>
<td>
<a href="galeriesoml2008.html"><img src="img/navisom.png" border="0" ></a>
</td>
<td>
<a href="galerieimpress2008.html"><img src="img/naviimpress.png" border="0" ></a>
</td>
<td width="10" style="background-image:url(img/feld.png)" >
</td>
</tr>
</table>
<table id="navileer" width="760" cellpadding="0" cellspacing="0" style="display:inline">
<tr>
<td width="250" style="background-image:url(img/feldlinks.png)">
</td>
<td>
<img src="img/kopfoben.png" border="0">
</td>
<td width="10" style="background-image:url(img/feld.png)">
</td>
</tr>
</table>
</div>
</body>
</html>
-
Hallo,
Ich haeb das Problem, dass Firefox mir zwischen als Link gesetzten Bildern Ränder anzeigt.
Ja, so wie Textlinks unterstrichen werden, werden Grafiken eingerahmt. Leicht zu entrahmen:
a img {border:none}Kalle
-
Danke,
Hatte ich schon notiert. Es handelt sich ja auch nicht um gleichmäßige "Rahmen", es sind Ränder, die an dem Bild mal rechts, mal links auftauchen, und wieder verschwinden, wenn ich über benachbarte Links fahre.
Ich lass es gerade im IE testen,ich hab Linux :). Mal sehen, was dabei herauskommt.
Danke trotzdem, Gruß
-
Es handelt sich ja auch nicht um gleichmäßige "Rahmen", es sind Ränder, die an dem Bild mal rechts, mal links auftauchen, und wieder verschwinden, wenn ich über benachbarte Links fahre.
Ja, dann hast du bei hover eine andere Hintergrundfarbe eingesetllt. Hinter dem Bild erscheint diese Farbe (teste mal mit einem transparenten Bild).
Falls zwischen dem öffnenden <a> Tag und dem Bild ein Leerzeichen / Zeilenschaltung steht, siehst du diese Farbe links vom Bild, wahrscheinlich nicht genauso hoch wie das Bild, sondern in Texthöhe.
Bei Platz zwischen dem Bild und schließendem <a> Tag ist die Hover- Farbe rechts vom Bild zu sehen.
Ebenso, wenn zwar kein Leerzeichen, aber margin-left / right vorhanden ist.
Du kannst per CSS den hover- Effekt für a img ändern.
Kalle
-
Du kannst per CSS den hover- Effekt für a img ändern.
Sorry, das bringt ja nichts, ausserhalb des <img> bleibt der "Rand". Aber du kannst dem <a class=nohover ... geben und
a:hover {background-color:#f00}
.nohover {background-color:transparent}Habe ich jetzt nicht getestet, müsste aber gehen.
Kalle
-
Hat nichts geholfen,
IE funktioniert, und seltsamerweise FF auf Windows auch. Das muss reichen, damit habe ich ja den Großteil der Internetnutzer abgedeckt, und so marginal ist der Schwarze Rand auch wieder nicht. Zumal es sich nur um eine kleine Vereinshomepage handelt.
Trotzdem Danke, wenn ich eine Lösung finde, melde ich mich noch einmal.
Gruß
-
-
-
-