✔ IE zeigt navigations untermenü nicht an

Status
Nicht offen für weitere Antworten.
X

xtra6y

Grünschnabel
Hallo,

ich lese hier schon eine Weile mit und mich sprechen sowohl die Qualität und auch das Engagement in diesen Foren an.

Heute hab ich ein ziemlich Problem dass mich nun schon Tage beschäftigt. Mit Try und Error komm ich da nicht mehr weiter, dewegen die Bitte um Hilde.

Mein Problem:
Ich hab eine Navigationsleiste mit verdeckten Untermenüs mit CSS und Javascript. In allen Browsern Firefox, Netscape und Opera funktioniert es einwandfrei nur IE macht Probleme und zeigt beim Drüberfahren kein Untermenü an. Ich hab schon einiges versucht aber es will einfach nicht gelingen. Es ist ein XHTML valides Script.

Kann mir jemand einen kompetenten Hinweis geben:

Hier der Code:

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html lang="de" xmlns="http://www.w3.org/1999/xhtml">

	<head>
		<meta http-equiv="content-type" content="text/html;charset=utf-8" />
		<meta name="generator" content="Adobe GoLive" />
		<title>xtrablatt</title>
		<link href="css/basic.css" rel="stylesheet" type="text/css" media="all" />
		<style type="text/css" media="screen">

<script type="text/javascript">
if(window.navigator.systemLanguage if(parseInt(navigator.appVersion) 4) !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 = "silver";
  }
  function ausblenden() {
    sucheUL(this.firstChild).style.display = "none";
  }

  window.onload=hoverIE;
}
</script>
<style type="text/css">

  div#Rahmen { font-size: xx-small; font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif; font-weight: 200; font-stretch: narrower; font-size-adjust: 10; line-height: 100%; width: auto; padding: 0.8em;  background-color: none; position: relative; height: auto; }
  * html div#Rahmen {  
    width: 48.7em; w\idth: auto; height: auto; }
  div#Rahmen div { font-size: 100px; clear: left; }
  #Navigation {
    margin: 0; padding: 0;
    text-align: center;
  }

  ul#Navigation li {
    list-style: none;
    float: left; 
    position: relative;
    margin: 0.4em; padding: 0;
  }
  * html ul#Navigation li {  
    margin-bottom: -0.4em;
  }

  ul#Navigation li ul {
    margin: 0; padding: 0;
    position: absolute;
    top: 1.6em; left: -0.4em;
    display: none; 
  }
  * html ul#Navigation li ul {  
    left: -1.5em;
    left: -0.4em;
  }
  ul#Navigation li:hover ul {
    display: block;  
  }
  ul#Navigation li ul li {
    float: none;
    display: block;
    margin-bottom: 0.2em;
  }

  ul#Navigation a, ul#Navigation span {
    display: block;
    width: 6.4em;  
    padding: 0.2em 1em;
    text-decoration: none; font-weight: xxsmall;
    border: 1px solid black;
    border-left-color: white; border-top-color: white;
    color: #1106f7; background-color: #ccc;
  }
  * html ul#Navigation a, * html ul#Navigation span {
    width: 8.6em;   
    width: 6.4em; 
  }
  ul#Navigation a:hover, ul#Navigation span, li a#aktuell {
    border-color: white;
    border-left-color: black; border-top-color: black;
    color: white; background-color: gray;
  }
  li a#aktuell { 
    color: #1106f7; background-color: silver;
  }
  ul#Navigation li ul span { 
    background-color: #1106f7;
  }
#Ebene2 { height: 100px; width: 700px; left: 50px; top: 125px; position: relative; z-index: 20; visibility: visible; }

html, body {
  background-color: #858585;
  color: #000000;
  height: 100%;
  margin: 0%;
  padding: 0%;
}
#startseite { position: relative; z-index: 30; visibility: visible; }
#bild { position: relative; visibility: visible; }
#bildunter { left: -4.27px; top: 17.07px; position: absolute; visibility: visible; }
#foto { position: relative; visibility: visible; }
#restaura { position: relative; visibility: visible; }
#ausstell { position: relative; visibility: visible; }
#text { position: relative; visibility: visible; }
#gestalt { position: relative; visibility: visible; }
#gestaltunter { left: -4.27px; top: 17.07px; position: absolute; visibility: visible; }
#fahnen { position: relative; visibility: visible; }
#plakate { position: relative; visibility: visible; }
#flyer { position: relative; visibility: visible; }
#internet { position: relative; visibility: visible; }
#galeerie { position: relative; visibility: visible; }
#impressum { position: relative; visibility: visible; }
#links { position: relative; visibility: visible; }
#spacer{
 position:absolute;
 margin:0px;
 padding:0px;
 width:100%;        
 height:100%;       
 min-width:770px;   
 min-height:575px;  
}
#wrapper { position:absolute; width: 800px; height: 620px; top: 50%; left: 50%; margin-left: -400px; margin-top: -300px; padding: 0; background-image:url(hinter_new_04-neu-leer.jpg); visibility: visible; }

--></style>
</head>
<body>

		<div id="spacer"></div>
	<div id="wrapper">	
	
	
	<div id="Ebene2">
	<div id="Rahmen" style="font-size:xx-small;">
				<ul id="Navigation">
					<li><a href="#Beispiel">Startseite</a></li>
					<li><a href="#Beispiel">Bild</a>
						<ul>
							<li><a href="#Beispiel">Fotografie</a></li>
							<li><a href="#Beispiel">Restauration</a></li>
							<li><a href="#Beispiel">Ausstellungen</a></li>
						</ul>
					</li>
					<li><a href="#Beispiel">Text</a></li>
					<li><a href="#Beispiel">Gestaltung</a>
						<ul>
							<li><a href="#Beispiel">Fahnen</a></li>
							<li><a href="#Beispiel">Plakate</a></li>
							<li><a href="#Beispiel">Flyer</a></li>
							<li><a href="#Beispiel">Internet</a></li>
						</ul>
					</li>
					<li><a href="#Beispiel">Galerie</a></li>
					<li><a href="#Beispiel">Impressum</a></li>
					<li><a href="#Beispiel">Links</a></li>
				</ul>
				<div></div>
			</div>
		</div>
	</div>
 <p>
    <a href="http://validator.w3.org/check?uri=referer"><img
        src="http://www.w3.org/Icons/valid-xhtml10"
        alt="Valid XHTML 1.0 Transitional" height="31" width="88" /></a>
  </p>
</body>	
</html>
 
Wenn ich das Script aus dem originalen SELFHTML-Beispiel in das Dokument einbinde, funktioniert die Navigationsleiste ebenso wenig im IE.

Von daher tippe ich mal, das der Fehler im Stylesheet zu suchen ist und schiebe den Thread auf Verdacht ins CSS-Board.
 
uups das ging aber schnell "michaelsinterface" na so original selfhtml ist das auch nicht mehr, das hab ich schon nach meinen Bedürfnissen angepasst. Aber ich komm einfach nicht darauf wo der Fehler liegt

Aber herzlichen Dank für die schnelle Reaktion
 
So läuft es auch im IE ;)

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html lang="de" xmlns="http://www.w3.org/1999/xhtml">

        <head>
                <meta http-equiv="content-type" content="text/html;charset=utf-8" />
                <meta name="generator" content="Adobe GoLive" />
                <title>xtrablatt</title>
                <link href="css/basic.css" rel="stylesheet" type="text/css" media="all" />


<!--[if IE]><script type="text/javascript">
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 = "silver";
  }
  function ausblenden() {
    sucheUL(this.firstChild).style.display = "none";
  }

  window.onload=hoverIE;
}
</script><![endif]-->


<style type="text/css">

  div#Rahmen { font-size: xx-small; font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif; font-weight: 200; font-stretch: narrower; font-size-adjust: 10; line-height: 100%; width: auto; padding: 0.8em;  background-color: none; position: relative; height: auto; }
  * html div#Rahmen {
    width: 48.7em; w\idth: auto; height: auto; }
  div#Rahmen div { font-size: 100px; clear: left; }
  #Navigation {
    margin: 0; padding: 0;
    text-align: center;
  }

  ul#Navigation li {
    list-style: none;
    float: left;
    position: relative;
    margin: 0.4em; padding: 0;
  }
  * html ul#Navigation li {
    margin-bottom: -0.4em;
  }

  ul#Navigation li ul {
    margin: 0; padding: 0;
    position: absolute;
    top: 1.6em; left: -0.4em;
    display: none;
  }
  * html ul#Navigation li ul {
    left: -1.5em;
    left: -0.4em;
  }
  ul#Navigation li:hover ul {
    display: block;
  }
  ul#Navigation li ul li {
    float: none;
    display: block;
    margin-bottom: 0.2em;
  }

  ul#Navigation a, ul#Navigation span {
    display: block;
    width: 6.4em;
    padding: 0.2em 1em;
    text-decoration: none; font-weight: xxsmall;
    border: 1px solid black;
    border-left-color: white; border-top-color: white;
    color: #1106f7; background-color: #ccc;
  }
  * html ul#Navigation a, * html ul#Navigation span {
    width: 8.6em;
    width: 6.4em;
  }
  ul#Navigation a:hover, ul#Navigation span, li a#aktuell {
    border-color: white;
    border-left-color: black; border-top-color: black;
    color: white; background-color: gray;
  }
  li a#aktuell {
    color: #1106f7; background-color: silver;
  }
  ul#Navigation li ul span {
    background-color: #1106f7;
  }
#Ebene2 { height: 100px; width: 700px; left: 50px; top: 125px; position: relative; z-index: 20; visibility: visible; }

html, body {
  background-color: #858585;
  color: #000000;
  height: 100%;
  margin: 0%;
  padding: 0%;
}
#startseite { position: relative; z-index: 30; visibility: visible; }
#bild { position: relative; visibility: visible; }
#bildunter { left: -4.27px; top: 17.07px; position: absolute; visibility: visible; }
#foto { position: relative; visibility: visible; }
#restaura { position: relative; visibility: visible; }
#ausstell { position: relative; visibility: visible; }
#text { position: relative; visibility: visible; }
#gestalt { position: relative; visibility: visible; }
#gestaltunter { left: -4.27px; top: 17.07px; position: absolute; visibility: visible; }
#fahnen { position: relative; visibility: visible; }
#plakate { position: relative; visibility: visible; }
#flyer { position: relative; visibility: visible; }
#internet { position: relative; visibility: visible; }
#galeerie { position: relative; visibility: visible; }
#impressum { position: relative; visibility: visible; }
#links { position: relative; visibility: visible; }
#spacer{
 position:absolute;
 margin:0px;
 padding:0px;
 width:100%;
 height:100%;
 min-width:770px;
 min-height:575px;
}
#wrapper { position:absolute; width: 800px; height: 620px; top: 50%; left: 50%; margin-left: -400px; margin-top: -300px; padding: 0; background-image:url(hinter_new_04-neu-leer.jpg); visibility: visible; }

</style>
</head>
<body>

                <div id="spacer"></div>
        <div id="wrapper">


        <div id="Ebene2">
        <div id="Rahmen" style="font-size:xx-small;">
                                <ul id="Navigation">
                                        <li><a href="#Beispiel">Startseite</a></li>
                                        <li><a href="#Beispiel">Bild</a>
                                                <ul>
                                                        <li><a href="#Beispiel">Fotografie</a></li>
                                                        <li><a href="#Beispiel">Restauration</a></li>
                                                        <li><a href="#Beispiel">Ausstellungen</a></li>
                                                </ul>
                                        </li>
                                        <li><a href="#Beispiel">Text</a></li>
                                        <li><a href="#Beispiel">Gestaltung</a>
                                                <ul>
                                                        <li><a href="#Beispiel">Fahnen</a></li>
                                                        <li><a href="#Beispiel">Plakate</a></li>
                                                        <li><a href="#Beispiel">Flyer</a></li>
                                                        <li><a href="#Beispiel">Internet</a></li>
                                                </ul>
                                        </li>
                                        <li><a href="#Beispiel">Galerie</a></li>
                                        <li><a href="#Beispiel">Impressum</a></li>
                                        <li><a href="#Beispiel">Links</a></li>
                                </ul>
                                <div></div>
                        </div>
                </div>
        </div>
 <p>
    <a href="http://validator.w3.org/check?uri=referer"><img
        src="http://www.w3.org/Icons/valid-xhtml10"
        alt="Valid XHTML 1.0 Transitional" height="31" width="88" /></a>
  </p>
</body>
</html>
Du hattest vor dem Javascript ein style-Element geöffnet, aber nicht geschlossen.

Zudem erzeugte das Script eine Fehlermeldung, weshalb ich mal das "aktuelle" Script von SELFHTML eingesetzt habe.
 
Vielen Dank michaelsinterface,
es klappt tatsächlich im IE und auch in opera aber lach bitte nich jetz spielen Netscape und Firefox verückt und zeigen den Text ungeordnet übereinanderliegend in riesigen Buchstaben. Ich krieg ne Krise, aber erst Morgen, weil ich mach Schluß für heute. Herzlichen Dank an dich michaelsinterface. Ich wünsch dir noch einen schönen und kreativen Abend.

xtra6y
 
Setze mal den Wert für die CSS-Eigenschaft font-size-adjust: auf 0.5, oder entferne die Eigenschaft komplett aus dem Selektor div#Rahmen, und alles wird gut im Firefox und Netscape.
 
Das Script kann man übrigens auch vor dem IE7 verstecken, da der mit der hover-Pseudoklasse am LI-Element zurecht kommt. Also:
Code: 
<!--[if lt IE 7]>
<script type="text/javascript">
...
</script>
<![endif]-->
 
Guten Morgen michaelsinterface, guten Morgen hela

es passt perfekt ich danke euch für eure schnelle und umfassende Hilfe.

Viel Erfolg bei euren eigenen Projekten wünscht

xtra6y
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück