afklappendes Menu

[Baerwatz]

Hallo,

ich hab ein Problem mit nem Menu, das man auf- und zuklappen kann.
Und zwar sieht es in NS genau so aus, wie es sein soll und im IE hab ich immer Lücken dazwischen.

Hier mal der Code:

<script type="text/javascript">
<!--
function showHideMenu()
{
arrImages=new Array();
arrImages['none']='imgs/menu_zu.gif';
arrImages['block']='imgs/menu_auf.gif';
showHide=(document.getElementById('links').style.display!='none')?'none':'block';
document.menu.src=arrImages[showHide];
document.getElementById('links').style.display=showHide;
}
//-->
</script>

Und nun noch im body:

  <tr>
   <td>
   <div style="width:185px" id="menu">
    <img src="imgs/menu_auf.gif" name="menu" width="185" height="40" alt="Menu" onclick="showHideMenu();">
    <div id="links">
	 <img src="imgs/blank.gif" width="185" height="1" alt="">   
     <a href="raum.html">
	 <img src="imgs/b_raum_na.gif" width="185" height="19" alt="Raumbelegung" onMouseOver="this.src='imgs/b_raum_a.gif'" onMouseOut="this.src='imgs/b_raum_na.gif'">
     </a>
	 <img src="imgs/blank.gif" width="185" height="1" alt="">     
     <a href="ansprechp.html">
     <img src="imgs/b_ansprechp_na.gif" width="185" height="19" alt="Ansprechpartner" onMouseOver="this.src='imgs/b_ansprechp_a.gif'" onMouseOut="this.src='imgs/b_ansprechp_na.gif'">
     </a>
    </div>
   </div>
   </td>
  </tr>

So, ich hoffe ich hab nix vergessen.
Ich stell mal noch ein Bild dazu, wies aussehen soll und im nächsten Beitrag noch, wies im IE aussieht.

 

[Baerwatz]

So, und hier jetzt, wie IE mir das ganze zeigt.

 

[Krypthonas]

Tada es werde enger:

<script type="text/javascript">
<!--
function showHideMenu()
{
arrImages=new Array();
arrImages['none']='imgs/menu_zu.gif';
arrImages['block']='imgs/menu_auf.gif';
showHide=(document.getElementById('links').style.display!='none')?'none':'block';
document.menu.src=arrImages[showHide];
document.getElementById('links').style.display=showHide;
}
//-->
</script>
<style type="text/css">
<!--
DIV.neu {
	line-height: 0px;
	border: 0px none;
}
-->
</style>
<div id="menu" class="neu">
<table width=100%>
	<tr>
		<td valign="top">
			<table width="100%" cellpadding="0" cellspacing="0" border="0">
 				<tr>
					<td>
						<img src="imgs/menu_auf.gif" name="menu" width="185" height="40" alt="Menu" onclick="showHideMenu();">
					</td>
				</tr>
				<tr>
					<td valign="top" height="1">
    				<div id="links" class="neu">
	 				<img src="#" width="165" height="1"><br>
					<a href="#"><img src="imgs/b_raum_na.gif" width="185" height="19" alt="Raumbelegung" onMouseOver="this.src='imgs/b_raum_a.gif'" onMouseOut="this.src='imgs/b_raum_na.gif'" border="0"></a><br>
   					<img src="#" width="165" height="1"><br>
					<a href="#"><img src="imgs/b_ansprechp_na.gif" width="185" height="19" alt="Ansprechpartner" onMouseOver="this.src='imgs/b_ansprechp_a.gif'" onMouseOut="this.src='imgs/b_ansprechp_na.gif'" border="0"></a>
    				</div>
 					</td>
 				</tr>
  			</table>
		</td>
  </tr>
</table> 
 </div>

 

[Baerwatz]

Danke für den Tipp,

aber irgendwie klappt es nicht.
Ich probier nochmal ein bisschen daran rum, vielleicht bekomm ichs ja noch hin.

 

[Krypthonas]

Wieso sollte dieser nicht funktionieren?

Kopiere den Code in ein Leeres HTML Dokument. und öffne es mit IE/OPERA/NETSCAPE und die Bilder sind zusammen.

Wenn du mehr Hilfe brauchst dann schreibe Sie auch in den Post ;-)

In diesem Sinne

 

[Sven Mintel]

Probiere mal, innerhalb des <div> 'links'alle Leerzeichen zwischen den Tags zu entfernen.

Der Grund....
das <div> ist 185px breit, die Bilder auch, ...die Leerzeichen müssen aber auch angezeigt werden... daher muss für diese eine neue Zeile erzeugt werden....
ergo.... keine Leerzeichen->keine neue Zeile nötig.

 

[Baerwatz]

Es ändert sich auch nix, wenn ich die Leerzeichen entferne.

Außerdem werden doch Leerzeichen ignoriert, außer im Fließtext.
Wenn ich zwischen zwei Bildern eine Leerzeichen erstellen will, muss ich doch mit

 

ein Leerzeichen erzwingen.
Deshalb glaub ich nicht, dass es daran liegt.

Dennoch danke für Eure Hilfe.
Ich bin mir sicher, dass es kein großer Fehler bei mir ist, da es ja wenigstens in einem Browser korrekt angezeigt wird. Ich probier heute noch ein bisschen daran herum, vielleicht finde ich es ja heraus, woran es liegt.

 

[Krypthonas]

Bitte? Was hast du für ein IE Browser?

Das Script wurde ab IE 5.0 getestet und funktioniert...

In diesem Sinne

 

[Baerwatz]

@Krypthonas:
Ich hab den IE 5.0. Wenn ich Dein Script als eigene HTML-Seite getestet hab, hats auch funktioniert. Nur im Zusammenhang mit meinem schon existierenden Quelltext hab ich wohl immer irgendwas falsch gemacht.

Aber nichts desto trotz hab ich jetzt meinen Fehler gefunden:
Ich hab die Tabelle um 5 px verbreitert und nach jedem img ein <br> gesetzt, jetzt passts.

Nochmals danke für Eure Hilfe und die Mühe, die Ihr Euch mit mir gemacht habt.
Das ganze gab mir den Schubbs in die richtige Richtung, so dass ich eine annehmbare Lösung von selbst finden konnte.