✔ IE 8 bereitet Probleme bei ausklappbarem Menü

[nimenn]

Hallo,

beim Überarbeiten einer Webseite habe ich festgestellt, daß der IE 8 das Menü beim Navigieren innerhalb des Menüs gelegentlich "zusammenklappt".
Im aktuellen FF oder im IE mit der Kompatibilitätsansicht funktioniert das Ganze.

Kennt jemand eine Möglichkeit, daß Ganze zu vermeiden?

Hier die URL: http://hofmannlp.menninger.org/
z.B. bei Produkte zwischen Mechanik und Fotoplott

Herzlichen Dank
Nils

 

[awortmeier]

Wenn du bisschen Code postest dann kann man sich den auch anschauen...

 

[nimenn]

Hallo,

daran soll es nicht scheitern

		<div id="menu">
			<ul id="navigation">
				<li><a href="index.shtml">Home</a></li>
				<li><a href="produkte.shtml">Produkte</a>
					<ul>
						<li><a href="leiterplatten.shtml">Leiterplatten</a></li>
						<li><a href="mechanik.shtml">Mechanik</a></li>
						<li><a href="fotoplott.shtml">Fotoplott</a></li>
						<li><a href="datenblaetter.shtml">Datenblätter</a></li>
					</ul>
...
...

*:first-child+html ul#navigation li{	/* Korrektur fuer den IE 7 */
		margin-bottom:-0.1em;
}

*:first-child+html ul#navigation ul{	/* Workaround fuer den IE 7 */
		background-color:silver;
		padding-bottom:0.2em;
}

* html ul#navigation a, * html ul#navigation span{
		width:8.6em;	 /* Breite nach altem MS-Boxmodell für IE 5.x */
		w\idth:8.6em;	/* korrekte Breite fuer den IE 6 im standardkonformen Modus */
}

* html ul#navigation li{	/* Korrektur fuer den IE 5 und 6 */
		margin-bottom:-0.4em;
}

* html ul#navigation li ul{	/* Korrektur fuer IE 5.x */
		left:-1.5em;
		lef\t:-0.4em;
}

li a#aktuell{	/* aktuelle Rubrik kennzeichnen */
		background-color:silver;
		color:maroon; 
}

ul#navigation{
		margin:0;
		padding:0;
		text-align:center;
}

ul#navigation li{
		float:left;	/* ohne width - nach CSS 2.1 erlaubt */
		list-style:none;
		margin:0.1em 0.4em 0.1em 0.4em;
		padding:0;
		position:relative;
}

ul#navigation li ul{
		display:none;	/* Unternavigation ausblenden */
		left:-0.4em;
		margin:0;
		padding:0;
		position:absolute;
		top:1.4em;
}

ul#navigation li:hover ul{ 
		display:block;	/* Unternavigation in modernen Browsern einblenden */
}

ul#navigation li ul li{
		display:block;
		float:none;
		margin-bottom:1px;
	}

ul#navigation a, ul#navigation span{
		background-color:#CFDEED;
		border:2px solid #EF8716;
		border-left-color:#EEEEEE;
		border-top-color:#EEEEEE;
		color:#000DFF; 
		display:block;
		font-size: 9pt;
		font-weight:bolder;
		padding:0.4em 0.85em;
		text-decoration:none; 
		width:100px;	/* Breite den in li enthaltenen Elementen zuweisen */
		z-index:20;
}


ul#navigation a:hover, ul#navigation span, li a#aktuell{
		background-color:gray; 
		border-color:#000DFF;;
		border-left-color:black;
		border-top-color:black;
		color:#000DFF;; 
}

ul#navigation li ul span{	/* aktuelle Unterseite kennzeichnen */
		background-color:#000DFF;
}

Die Seite ist enthält nach Durchlauf durch die üblichen Validatoren:
- valides HTML 4.01 Strict
- valides CSS lvl 2.1

Gruß
Nils

 

[Maik]

Hi,

versuch es mal über eine Angabe zur Schichtposition z-index für den DIV-Block #menu, und beachte hierbei, dass diese ohne eine Angabe zur Positionsart position (absolute oder relative) wirkungslos bleibt, wie z.B. im Selektor "ul#navigation a, ul#navigation span" - siehe hierzu auch http://de.selfhtml.org/css/eigenschaften/positionierung.htm#z_index.

Wenn du bisschen Code postest dann kann man sich den auch anschauen...

Reicht dir der genannte Link nicht, um einen Blick in den Quellcode zu werfen?

mfg Maik

 

[nimenn]

Hallo Maik,

danke für deinen Ansatz, aber leider ändert sich das Ergebnis dadurch nicht.
Der z-index:20; stand gerade deshalb noch drin, weil ich es mit position
probiert hatte.

Ich habe jetzt folgendes, zugegeben vorgefertigtes JS eingebunden.
Und damit funktioniert es.

Das "warum" erschließt sich mir auf Anhieb allerdings noch nicht.

// JavaScript Document
if(window.navigator.systemLanguage && !window.navigator.language) {
	function hoverIE() {
		var LI = document.getElementById("navigation").firstChild;
		do {
			if (sucheUL(LI.firstChild)) {
				LI.onmouseover=einblenden; LI.onmouseout=ausblenden;
			}
			LI = LI.nextSibling;
		}
		while(LI);
	}

	function sucheUL(UL) {
		do {
			if(UL) UL = UL.nextSibling;
			if(UL && UL.nodeName == "UL") return UL;
		}
		while(UL);
		return false;
	}

	function einblenden() {
		var UL = sucheUL(this.firstChild);
		UL.style.display = "block"; UL.style.backgroundColor = "white";
	}
	function ausblenden() {
		sucheUL(this.firstChild).style.display = "none";
	}

	window.onload=hoverIE;
	}

Gruß
Nils

 

[Maik]

Das "warum" wird sich dir erschließen, wenn du mal testweise den nachfolgenden IE7-Workaround für den IE8 zugänglich machst:

*:first-child+html ul#navigation ul{	/* Workaround fuer den IE 7 */
		background-color:silver;
		padding-bottom:0.2em;
}

mfg Maik

 

[nimenn]

Hmm. Wald vor lauter Bäumen.

Danke und damit erledigt.
Nils