# Mozilla&Firefox 1px linien neben grafik ?



## sound (26. September 2006)

ich habe einen komischen fehler in meinem HTML dokument der im Firefox und Mozilla auftaucht:

sobald ich mit der maus über die navigation rolle erscheinen auf der rechten seite vertikale linien neben den bildern.

an was könnte das liegen?

für jeden button habe ich folgenden HTML code:

```
<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('nav_v','','links/nav_v_2.gif',1)"><img src="nav_v_1.gif" name="nav_v" width="220" height="21" border="0" id="nav_v" /></a>
<br />
<img src="ffffff.gif" width="20" height="1" border="0" /><img src="000000.gif" width="220" height="1" border="0" /><br />
```


----------



## Maik (26. September 2006)

Könntest Du bitte auch den dazugehörigen Quellcode (HTML + CSS) zeigen?

Und bitte achte in Deinen Beiträgen auf die Groß- und Kleinschreibung.


----------



## Maik (26. September 2006)

Anhand des gezeigten Codeschnipsels kann ich den Grund für den Darstellungsfehler nicht nachvollziehen.

Vielleicht solltest Du den kompletten Code zeigen, oder noch besser den Link zur Seite nennen, damt man da mal einen Blick drauf werfen kann.


----------



## sound (26. September 2006)

hallo, erst mal danke für deine geschätzte hilfe.

einen link kann ich dir leider nicht geben da ich das ganze lokal entwickle/teste. ich habe die knöpfe mal testweise aus der tabelle genommen und die linien waren nicht mehr da. aber wo der fehler liegt - dahinter bin ich noch nicht gekommen :-(

hier den code der index seite:

```
<?php
// ------------------------------------- Random Ausgabe Fotos
// verzeichniss öffnen
$dirname = "inhalte/bilder";
$dh = opendir($dirname);
while ($file = readdir( $dh ))
{
// wenn file und kein verzeichniss
if ( is_file( "$dirname/$file" ) )
// in array abfüllen
$my_array_splash[] = $file;
}
closedir( $dh );
//echo count($my_array_splash);
// randomisieren array
shuffle ($my_array_splash);
$randombild = $my_array_splash[0];
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>--</title>
<link href="links/pl_css.css" rel="stylesheet" type="text/css" />
<link rel="SHORTCUT ICON" type="image/png" 	href="links/pl_icon.png" />
<script type="text/JavaScript">
<!--
function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>
<body onload="MM_preloadImages('links/nav_vp_2.gif','links/nav_ps_2.gif','links/nav_da_2.gif','links/nav_kontakt_2.gif')">
<table width="714" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="240" height="40"><img src="links/plcom_1.gif" width="240" height="40" border="0" /></td>
<td width="20" height="40"><img src="links/line_top.gif" width="20" height="40" border="0" /></td>
<td width="414" height="40"><img src="links/line_top.gif" width="414" height="40" border="0" /></td>
<td width="40" height="40"><img src="links/line_top.gif" width="20" height="40" border="0" /><img src="links/ffffff.gif" width="20" height="40" border="0" /></td>
</tr>
<tr>
<td width="240" height="414" align="left" valign="top" class="xxx"><img src="links/plcom_2.gif" width="240" height="26" border="0" /><br />
<img src="links/ffffff.gif" width="20" height="21" border="0" /><a href="vp_samples.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('nav_vp','','links/nav_vp_2.gif',1)"><img src="links/nav_vp_1.gif" name="nav_vp" width="220" height="21" border="0" id="nav_vp" class="bildx" /></a><br />
<img src="links/ffffff.gif" width="20" height="1" border="0" /><img src="links/000000.gif" width="220" height="1" border="0" /><br />
<img src="links/ffffff.gif" width="20" height="21" border="0" /><a href="ps_samples.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('nav_ps','','links/nav_ps_2.gif',1)"><img src="links/nav_ps_1.gif" name="nav_ps" width="220" height="21" border="0" id="nav_ps" /></a><br />
<img src="links/ffffff.gif" width="20" height="1" border="0" /><img src="links/000000.gif" width="220" height="1" border="0" /><br />
<img src="links/ffffff.gif" width="20" height="21" border="0" /><a href="daverwaltung.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('nav_da','','links/nav_da_2.gif',1)"><img src="links/nav_da_1.gif" name="nav_da" width="220" height="21" border="0" id="nav_da" /></a><br />
<img src="links/ffffff.gif" width="20" height="1" border="0" /><img src="links/000000.gif" width="220" height="1" border="0" /><br />
<img src="links/ffffff.gif" width="20" height="21" border="0" /><a href="kontakt.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('nav_kontakt','','links/nav_kontakt_2.gif',1)"><img src="links/nav_kontakt_1.gif" name="nav_kontakt" width="220" height="21" border="0" id="nav_kontakt" /></a>
<img src="links/ffffff.gif" width="20" height="1" border="0" /><img src="links/000000.gif" width="220" height="1" border="0" /><br />
<table width="240" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="left" valign="top" class="tabelle_unter_navi_abs">abs</td>
</tr>
</table></td>
<td width="20" height="414"><img src="links/ffffff.gif" width="20" height="414" /></td>
<td width="414" height="414"><img src="inhalte/bilder/<?php echo($randombild); ?>" width="414" height="414" border="0" /></td>
<td>&nbsp;</td>
</tr>
<tr>
<td width="240" height="40"><img src="links/ffffff.gif" width="20" height="40" border="0" /><img src="links/line_foot.gif" width="220" height="40" border="0" /></td>
<td><img src="links/line_foot.gif" width="20" height="40" border="0" /></td>
<td width="414" height="40"><img src="links/line_foot.gif" width="414" height="40" border="0" /></td>
<td width="40" height="40"><img src="links/line_foot.gif" width="20" height="40" border="0" /><img src="links/ffffff.gif" width="20" height="40" border="0" /></td>
</tr>
</table>
<br />
<br />
<img src="links/plcom_2.gif" width="240" height="26" border="0" /><br />
<img src="links/ffffff.gif" width="20" height="21" border="0" /><a href="vp_samples.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('nav_vp1','','links/nav_vp_2.gif',1)"><img src="links/nav_vp_1.gif" name="nav_vp1" width="220" height="21" border="0" id="nav_vp1" class="bildx" /></a><br />
<img src="links/ffffff.gif" width="20" height="1" border="0" /><img src="links/000000.gif" width="220" height="1" border="0" /><br />
<img src="links/ffffff.gif" width="20" height="21" border="0" /><a href="ps_samples.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('nav_ps1','','links/nav_ps_2.gif',1)"><img src="links/nav_ps_1.gif" name="nav_ps1" width="220" height="21" border="0" id="nav_ps1" /></a><br />
<img src="links/ffffff.gif" width="20" height="1" border="0" /><img src="links/000000.gif" width="220" height="1" border="0" /><br />
<img src="links/ffffff.gif" width="20" height="21" border="0" /><a href="daverwaltung.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('nav_da1','','links/nav_da_2.gif',1)"><img src="links/nav_da_1.gif" name="nav_da1" width="220" height="21" border="0" id="nav_da1" /></a><br />
<img src="links/ffffff.gif" width="20" height="1" border="0" /><img src="links/000000.gif" width="220" height="1" border="0" /><br />
<img src="links/ffffff.gif" width="20" height="21" border="0" /><a href="kontakt.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('nav_kontakt1','','links/nav_kontakt_2.gif',1)"><img src="links/nav_kontakt_1.gif" name="nav_kontakt1" width="220" height="21" border="0" id="nav_kontakt1" /></a>
</body>
</html>
```

und hier das CSS:


```
body {
  background-color: #FFFFFF;
	margin-left: 40px;
	margin-top: 40px;
	margin-right: 40px;
	margin-bottom: 40px;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  color: #333333;
  font-size: 11px;
}
a:link {
	color: #000000;
	text-decoration: none;
	font-style: normal;
	font-weight: normal;
	text-decoration:underline;
}
a:visited {
	color: #000000;
	text-decoration: none;
	font-style: normal;
	font-weight: normal;
text-decoration:underline;
}
a:hover {
	color: #CCCCCC;
	text-decoration: none;
	font-style: normal;
	font-weight: normal;
	text-decoration:underline;
}
a:active {
	color: #CCCCCC;
	text-decoration: none;
	font-style: normal;
	font-weight: normal;
	text-decoration:underline;
}
.tabelle_unter_navi_abs{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #000000;
font-style:normal;
font-weight:normal;
padding-top : 8px;
padding-bottom : 0px;
padding-left : 20px;
padding-right : 20px;
}
.fliesstext_1{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #000000;
font-style:normal;
font-weight:normal;
padding-top : 0px;
padding-bottom : 0px;
padding-left : 0px;
padding-right : 0px;
}
```


----------



## Maik (26. September 2006)

Wenn Du die Seite nicht online zur Verfügung stellen kannst, dann packe doch bitte alle Dateien (incl. der Grafiken) in eine ZIP-Datei und lade sie hier hoch, denn ohne die erforderlichen Grafiken, lässt sich die Ursachenforschung nur schwer betreiben, da Firefox nichts zum Darstellen hat.

Ich bitte Dich jetzt zum zweiten (und letzten) mal, auf die Groß- und Kleinschreibung zu achten, siehe  hierzu auch die Netiquette Nr.15 dieses Forums.


----------



## sound (26. September 2006)

So nun konnte ich eine kleine Testversion online stellen.
Der erste "Home" Link ist ein normaler Link - also ohne RollOver - der funktioniert auch.
Der zweite "Home" Link hat einen RollOver - und eben auch den Fehler das eine Vertikale Linie erscheint sobald ich mit der Maus darüber rolle (Firefox, Mozilla).

Wo könnte hier der Fehler liegen?

http://www.carpenoctem.ch/test/


----------



## Maik (26. September 2006)

Bei mir wird beim Rollover keine Linie neben der Grafik dargestellt.

Ich häng hier mal die Screenshots vom Firefox 1.5.0.7 und Mozilla 1.7.12 an:


----------



## sound (26. September 2006)

Mhhh ... im Firefox/Mozilla auf dem Mac schon :-(


----------



## Maik (26. September 2006)

Sorry, ich arbeite / teste hier unter Win2k und kann Dir daher zu den Darstellungsfehlern auf dem Mac-PC keine Lösungsvorschläge empfehlen


----------



## sound (26. September 2006)

Aber grundsätzlich scheint nichts falsch zu sein im code oder?


----------



## Maik (26. September 2006)

Hast Du schon mal darüber nachgedacht, die Navigation anstelle der Tabelle mit einer Liste zu strukturieren und das Listenmenü anschliessend mit CSS zu formatieren?

Listamatic: one list, many options zeigt da einige interessante Möglichkeiten.


----------



## msycho (26. September 2006)

Das hier dürfte auch noch was für dich sein. (Eventuell hat michaelsinterface dort seinen Link schon bezogen)

http://stichpunkt.de/css/menues.html
http://www.accessify.com/tools-and-wizards/list-o-matic/list-o-matic.asp


----------

