2 Ebenen Navi, Problem mit IE

kirchel · 8. Februar 2006

Hallo liebe Leute,
Ich steh vor einem Rätsel, habe in CSS eine Navi gebaut, die eigentlich auch ganz gut .
Die Navi besteht aus 2 ebenen.
Der Firefox stellt die Seite ohne Probleme wie gewünscht dar.
Leider macht mir der IE erhebliche Probleme, den dieser Zeigt nicht die Zweite ebene der Navi an.

Woran kann es liegen?

Habe schon gesucht, aber abgesehen von Positionskorrekturen hab ich noch nichts finden können.

Wäre gut wenn mir jemand sagen kann woran liegt.

Ich häng den Code mal dran:

CSS:

Code:

ul#nav {
position: absolute;
top: 0px;
left: 0px;     
padding: 0px;
margin: 0px;
background-color: #1C5BA2;
color: white;
float: left;
width: 671px;
font-family: arial, helvetica, sans-serif;
border-top: 1px solid #ffffff;
}


ul#nav li { 
display: block; 
padding: 0.05em 1em;
height: 30px;
line-height: 30px;
font-size:12px;
float: left;
width: 80px;
border-right: 1px solid #fff;
list-style-type: none;
}

ul#nav li:hover {
background-color: #7197C1;
}

li ul {
	display: none;
	width: 80px;
}


ul#nav li:hover ul { 
position: relative;
top: 0px;
left: 0px;
margin: 0px;
padding: 0px;
display: block;
width: 80px;
z-index: 2;
text-align: left;
}

ul#nav li:hover ul li { 
position: relative;
display: block; 
height: auto;
margin: 0px;
padding: 0px;
width: 100px;
line-height: 20px;
font-size:12px;
font-color: #1C5BA2;
background-color: transparent;
float: left;
border: 0px;
list-style-type: none;
}


ul#nav li a {
position: relative;
padding: 0px;
margin: 0px;
height: 30px;
line-height: 30px;
background-color: transparent;
color: White;
text-decoration: none;
}


ul#nav li a:hover {
background-color: transparent;
color: #ffffff;
}


ul#nav li:hover ul li a { 
height: 12px;
line-height: 12px;
font-size:10px; 
color: #1C5BA2;
background-color: transparent;
}

ul#nav li:hover ul li a:hover { 
height: 12px;
line-height: 12px;
font-size:10px; 
color: #7197C1;
width: 80px;
background-color: transparent;
}

li:hover ul, 
li.over ul { 
	display: block; 
	width: 80px;
}

/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */

ul#nav li#kunde { 
	float: right;
	border-left: 1px solid #ffffff;

}

HTML

Code:

<ul id="nav">
<li><a href="#" class="current">Agentur</a>
<ul>
		<li><a href="#Beispiel">Über uns</a></li>
        <li><a href="#Beispiel">Das Team</a></li>       
    </ul>
</li>
<li><a href="#" class="current">Portfolio</a>
    <ul>
        <li><a href="#Beispiel">Full Service</a></li>
        <li><a href="#Beispiel">Corporate Design</a></li>
        <li><a href="#Beispiel">Klassische Medien</a></li>
        <li><a href="#Beispiel">Neu Medien</a></li>
    </ul>
</li>
<li><a href="#" classs="current">Referenzen</a>
    <ul>
        <li><a href="#Beispiel">Alle Kunden</a></li>
        <li><a href="#Beispiel">Air Liquide</a></li>
        <li><a href="#Beispiel">BQS</a></li>
        <li><a href="#Beispiel">CITEL</a></li>
    </ul>
</li>
<li><a href="#" class="current">Kontakt</a>
<ul>
    <li><a href="#Beispiel">Anfahrt</a></li>     
    </ul>
</li>


<li id="kunde"><a href="#">Kundenportal</a></li>
</ul>

Danke für die mühe, ich hoffe jemand kann mir weiterhelfen!

Ich bin echt ratlos!

Hier die Seite:

<<KLICK>>

Maik · 8. Februar 2006

Der IE unterstützt die Pseudoklasse :hover nur für das a-Element (a:hover) und wendet sie nicht auf die anderen HTML-Elemente an, in deinem Fall das li-Element.

Für den IE ist somit Javascript erforderlich, um die Ebenen einzublenden. Ein Lösungsbeispiel findest du hier: the Suckerfish.

kirchel · 8. Februar 2006

Danke für die schnelle antwort!
Ich glaube ich komm der sache näher!
Zumindest passiert schonmal etwas wenn ich über die schaltflächen fahre.
Habe jetzt einfach das javascript in den HTML Head eingefügt:

Code:

<script type="text/javascript"><!--//--><![CDATA[//><!--

startList = function() {
	if (document.all&&document.getElementById) {
		navRoot = document.getElementById("nav");
		for (i=0; i<navRoot.childNodes.length; i++) {
			node = navRoot.childNodes[i];
			if (node.nodeName=="LI") {
				node.onmouseover=function() {
					this.className+=" over";
				}
				node.onmouseout=function() {
					this.className=this.className.replace(" over", "");
				}
			}
		}
	}
}
window.onload=startList;

//--><!]]></script>

Leider es noch immer nicht, die Schaltflächen "springen" wenn man drauf ist, und die Ebene die sich ausklappen soll liegt hinter dem Bild und hat noch dazu riesiege Aussmaße.

Ich versteh garnix mehr, woher nimmt der IE den jetzt angaben wie größe etc.. wenn er doch nicht die "hover" beachtet?

Sollte ich da besser mal im JS Forum nachfragen?

Kann die Seite grade leider nicht neu Hochladen, damit ihr das Problem mal sehen könnt.

Danke !!

Maik · 8. Februar 2006

Du solltest auch das dazugehörige Stylesheet aus dem Demo übernehmen und die einzelnen CSS-Selektor-Formatierungen deinem Layout anpassen, denn an dem Javascript liegt es definitiv nicht ;-]

kirchel · 8. Februar 2006

Also irgend wie blick ich da nicht ganz durch,
sehe da keine wirklichen Parallelen, bei mir ist alles anders, und wenn ich das alles ändere hab ich ja nicht mehr das gewünschte Ergebnis...
Soviel kann bei mir doch nicht falsch sein, aber ich kann ändern was ich will in der css, es bleibt wie es ist...

Kann mir niemand sagen wo in meiner CSS der fehler liegt?

Maik · 12. Februar 2006

Es ist unbestritten, daß der IE mit deinem Stylesheet ein Darstellungsproblem hat.

Woran es liegt, kann ich dir, trotz mehrmaliger Untersuchung deines CSS-Codes, leider nicht sagen

SELFHTML demonstriert ebenfalls eine dynamische CSS-Navigation, die ich deinem gewünschten Layout angepasst habe:

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title></title>

<style type="text/css">
<!--
  body {
    margin: 0;
    padding: 0;
    font: 12px arial, sans-serif;
    color: #000000;
    background: #ffffff;
  }

  div#wrapper {
    width: 671px;
    padding: 0;
    margin: 0;
    background: #1C5BA2;
    border: 1px solid #fff;
   }

   div#wrapper div.clear {
     clear: left;
   }

  ul#navigation {
    margin: 0;
    padding: 0;
  }

  ul#navigation li {
    list-style: none;
    float: left;
    position: relative;
    margin: 0;
    padding: 0;
    line-height: 30px;
  }

  ul#navigation li ul {
    margin: 0;
    padding: 0;
    position: absolute;
    top: 30px;
    left: 0px;
    display: none;
  }

    ul#navigation li:hover ul {
    display: block;
  }

  ul#navigation li ul li {
    float: none;
    display: block;
  }

  ul#navigation li a {
    display: block;
    width: 80px;
    padding: 0;
    text-decoration: none;
    border-right: 1px solid #ffffff;
    color: #ffffff;
    background: #1C5BA2;
    padding-left: 10px;
  }

  ul#navigation li a:hover {
    border-right: 1px solid #ffffff;
    color: #ffffff;
    background: #7197C1;
  }

  ul#navigation li ul li a {
    width: 120px;
    color: #1C5BA2;
    background: transparent;
  }

  ul#navigation li ul li a:hover {
    color: #7197C1;
    background: transparent;
  }

  ul#navigation li#kunde {
        float: right;
  }

  ul#navigation li#kunde a {
        border-left: 1px solid #ffffff;
        border-right: 0;
  }
-->
</style>

<!--[if IE]><script type="text/javascript">
  function hoverIE() {
    var LI = document.getElementById("navigation").firstChild;
    do {
      if(LI.firstChild) {  // A (SPAN)
        if(LI.firstChild.nextSibling) {  // #text
          if(LI.firstChild.nextSibling.nextSibling) {  // UL ?
            LI.onmouseover=einblenden; LI.onmouseout=ausblenden;
          }
        }
      }
      LI = LI.nextSibling;
    }
    while(LI);
  }
  function einblenden() {
    this.firstChild.nextSibling.nextSibling.style.display = "block";
    this.firstChild.nextSibling.nextSibling.style.backgroundColor = "white";
  }
  function ausblenden() {
    this.firstChild.nextSibling.nextSibling.style.display = "none";
  }
window.onload=hoverIE;
</script><![endif]-->

</head>
<body>

<div id="wrapper">
  <ul id="navigation">
    <li><a href="#Beispiel">Agentur</a>
      <ul>
        <li><a href="#Beispiel">Über uns</a></li>
        <li><a href="#Beispiel">Das Team</a></li>
      </ul>
    </li>

    <li><a href="#Beispiel">Portfolio</a>
      <ul>
        <li><a href="#Beispiel">Full Service</a></li>
        <li><a href="#Beispiel">Corporate Design</a></li>
        <li><a href="#Beispiel">Klassische Medien</a></li>
        <li><a href="#Beispiel">Neu Medien</a></li>
      </ul>
    </li>

    <li><a href="#Beispiel">Referenzen</a>
      <ul>
        <li><a href="#Beispiel">Alle Kunden</a></li>
        <li><a href="#Beispiel">Air Liquide</a></li>
        <li><a href="#Beispiel">BQS</a></li>
        <li><a href="#Beispiel">CITEL</a></li>
      </ul>
    </li>

    <li><a href="#Beispiel">Kontakt</a>
      <ul>
        <li><a href="#Beispiel">Anfahrt</a></li>
      </ul>
    </li>

    <li id="kunde"><a href="#Beispiel">Kundenportal</a></li>
  </ul>
  <div class="clear"></div>
</div>


</body>
</html>

2 Ebenen Navi, Problem mit IE

kirchel

Erfahrenes Mitglied

Maik

kirchel

Erfahrenes Mitglied

Maik

kirchel

Erfahrenes Mitglied

Maik

Neue Beiträge