Klappmenü im FF

JackyD

Erfahrenes Mitglied
Hallo @ all,
ich hab folgendes Klappmenü:

HTML:
<script language="JavaScript" type="text/javascript">
 function jsroot(id)
 {
 	if(document.getElementById("root").style.display == 'none')
 	 {
 		 document.getElementById("root").style.display = "inline";
 		document.getElementById("top").style.display = "inline";
 		document.getElementById("top3").style.display = "inline";
 		document.getElementById("middle1").style.display = "inline";
 		document.getElementById("middle12").style.display = "none";
 		document.getElementById("middle13").style.display = "none";
 		document.getElementById("middle2").style.display = "inline";
 		document.getElementById("middle22").style.display = "none";
 		document.getElementById("middle23").style.display = "none";
 		document.getElementById("imgroot").src = "offen.gif";
 		document.getElementById("imgroot").alt = "offen";
 		document.getElementById("imgtop").src = "offen.gif";
 		document.getElementById("imgtop").alt = "offen";
 		document.getElementById("imgmiddle1").src = "zu.gif";
 		document.getElementById("imgmiddle1").alt = "zu";
 		document.getElementById("imgmiddle2").src = "zu.gif";
 		document.getElementById("imgmiddle2").alt = "zu";
 	}
 	else
 	{
 		document.getElementById("root").style.display = "none";
 		   document.getElementById("top").style.display = "none";
 		document.getElementById("top3").style.display = "none";
 		document.getElementById("middle1").style.display = "none";
 		document.getElementById("middle12").style.display = "none";
 		document.getElementById("middle13").style.display = "none";
 		document.getElementById("middle2").style.display = "none";
 		document.getElementById("middle22").style.display = "none";
 		document.getElementById("middle23").style.display = "none";
 		document.getElementById("imgroot").src = "zu.gif";
 		document.getElementById("imgroot").alt = "zu";
 		document.getElementById("imgtop").src = "zu.gif";
 		document.getElementById("imgtop").alt = "zu";
 		document.getElementById("imgmiddle1").src = "zu.gif";
 		document.getElementById("imgmiddle1").alt = "zu";
 		document.getElementById("imgmiddle2").src = "zu.gif";
 		document.getElementById("imgmiddle2").alt = "zu";
 	}
 }
 
 function jstop(id)
 {
 	if(document.getElementById("top3").style.display == 'none')
 	 {
 		 document.getElementById("top3").style.display = "inline";
 		document.getElementById("middle1").style.display = "inline";
 		document.getElementById("middle12").style.display = "none";
 		document.getElementById("middle13").style.display = "none";
 		document.getElementById("middle2").style.display = "inline";
 		document.getElementById("middle22").style.display = "none";
 		document.getElementById("middle23").style.display = "none";
 		document.getElementById("imgtop").src = "offen.gif";
 		document.getElementById("imgtop").alt = "offen";
 		document.getElementById("imgmiddle1").src = "zu.gif";
 		document.getElementById("imgmiddle1").alt = "zu";
 		document.getElementById("imgmiddle2").src = "zu.gif";
 		document.getElementById("imgmiddle2").alt = "zu";
 	}
 	else
 	{
 		   document.getElementById("top3").style.display = "none";
 		document.getElementById("middle1").style.display = "none";
 		document.getElementById("middle12").style.display = "none";
 		document.getElementById("middle13").style.display = "none";
 		document.getElementById("middle2").style.display = "none";
 		document.getElementById("middle22").style.display = "none";
 		document.getElementById("middle23").style.display = "none";
 		document.getElementById("imgtop").src = "zu.gif";
 		document.getElementById("imgtop").alt = "zu";
 		document.getElementById("imgmiddle1").src = "zu.gif";
 		document.getElementById("imgmiddle1").alt = "zu";
 		document.getElementById("imgmiddle2").src = "zu.gif";
 		document.getElementById("imgmiddle2").alt = "zu";
 	}
 }
 
 function jsmiddle1(id)
 {
 	if(document.getElementById("middle13").style.display == 'none')
 	 {
 		 document.getElementById("middle13").style.display = "inline";
 		document.getElementById("middle12").style.display = "inline";
 		document.getElementById("imgmiddle1").src = "offen.gif";
 		document.getElementById("imgmiddle1").alt = "offen";
 	}
 	else
 	{
 		   document.getElementById("middle13").style.display = "none";
 		document.getElementById("middle12").style.display = "none";
 		document.getElementById("imgmiddle1").src = "zu.gif";
 		document.getElementById("imgmiddle1").alt = "zu";
 	}
 }
 
 function jsmiddle2(id)
 {
 	if(document.getElementById("middle23").style.display == 'none')
 	 {
 		 document.getElementById("middle23").style.display = "inline";
 		document.getElementById("middle22").style.display = "inline";
 		document.getElementById("imgmiddle2").src = "offen.gif";
 		document.getElementById("imgmiddle2").alt = "offen";
 	}
 	else
 	{
 		   document.getElementById("middle23").style.display = "none";
 		document.getElementById("middle22").style.display = "none";
 		document.getElementById("imgmiddle2").src = "zu.gif";
 		document.getElementById("imgmiddle2").alt = "zu";
 	}
 }
 
 </script>
 <table border="2" cellspacing="0" cellpadding="2" width="100%">
   <tr valign="top"> 
 	<td> <a href="#" onClick="jsroot(); return false;"> <img src="offen.gif" border="0" id="imgroot"></a> 
 	  &nbsp;<b>Root</b> <span id="root" style="display:inline"></span> </td>
 	  <td>&nbsp;</td>
 	  <td>&nbsp;</td>
 	  <td>&nbsp;</td>
   </tr>
   <tr id="top" valign="top"> 
 	<td width="49">&nbsp;</td>
 	<td> <a href="#" onClick="jstop(); return false;"> <img src="offen.gif" border="0" id="imgtop"></a> 
 	  &nbsp;Top<span id="top3" style="display:inline"></span></td>
 	  <td>&nbsp;</td>
 	  <td>&nbsp;</td>
   </tr>
   <tr id="middle1"> 
   <td width="49">&nbsp;</td>
 	<td width="45">&nbsp;</td>
 	<td><a href="#" onClick="jsmiddle1(); return false;"> <img src="zu.gif" id="imgmiddle1" border="0"> 
 	  </a> &nbsp;<b>Middle&nbsp;1</b><span id="middle13" style="display:none"></span> 
 	</td>
 	<td>&nbsp;</td>
   </tr>
   <tr id="middle12" style="display:none"> 
   <td width="49">&nbsp;</td>
   <td width="49">&nbsp;</td>
 	<td width="88">&nbsp;</td>
 	<td> 
 	  <p><b>Bottom1:</b>
 		  TextTextTextText<br>
 		TextTextTextText</p>
 	</td>
   </tr>
   <tr id="middle2">
   <td width="49">&nbsp;</td>
   <td width="49">&nbsp;</td>
 	<td> <a href="#" onClick="jsmiddle2(); return false;"> <img src="zu.gif" id="imgmiddle2" border="0"> 
 	  </a>&nbsp; <b>Middle&nbsp;2</b><span id="middle23" style="display:none"></span> 
 	</td>
 	<td>&nbsp;</td>
   </tr>
   <tr id="middle22" style="display:none"> 
   <td width="49">&nbsp;</td>
   <td width="49">&nbsp;</td>
 	<td width="88">&nbsp;</td>
 	<td> 
 	  <p><b>Bottom2:</b>TextTextTextText<br>
 		TextTextTextText</p>
 	</td>
   </tr>
 </table>

im IE funktioniert das Menü sehr gut, aber imm FF wird es total verzogen. Die JavaScript Konsole gibt keinen Fehler aus, ich vermute, dass das Problem bei den display:inline liegt, habe es auch schon mit block probiert, allerdings hat das auch nicht funktioniert. Ich hoffe es kann mir jemand weiterhelfen.
Damit ihr es nicht Local zusammenbauen müsst habe ich es online gestellt: http://www.daniel-web.space4free.net/menu.htm
 
Weise statt "inline" garnix zu, also eine leere Zeichenkette.

Korrekt wäre da zwar table-row, damit kommt der IE aber wiederum nicht klar.
 
Zurück