Klappmenü im FF

JackyD · 5. August 2005

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

Sven Mintel · 5. August 2005

Weise statt "inline" garnix zu, also eine leere Zeichenkette.

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

JackyD · 6. August 2005

Danke es funktioniert jetzt. Zwar nicht ganz so wie im IE, aber es ist aktzeptabel. Thx

Klappmenü im FF

JackyD

Erfahrenes Mitglied

Sven Mintel

Mitglied

JackyD

Erfahrenes Mitglied

Neue Beiträge