✔ Problem im IE mit CSS Menu

[the_royal]

Hallo Zusammen
Ich habe für ein Websiteprojekt eine Navigation mit CSS eingebaut.
Im Firefox sieht alles auch so aus wies soll, da es dort auch entwickelt wurde. =) Der Schock folgt allerdings im Internet Explorer...
Ich hab euch mal die Bilder wies in den beiden Browsern ausschaut und den Datzugehörigen Code gepostet.
Hoffe jemand sieht das Problem und kann mir helfen. =)

#divNav {
	margin: 0;
	padding: 0;
	height: 80px;
	width: 940px;
}

#nav {
	position: relative;
	top: 155px;
	height: 80px;
	width: 940px;
}

#nav li ul,#nav li ul {
	margin: 0;
	padding: 0;
}

#nav a {
	text-decoration: none;
}

#nav li { /*float the main list items*/
	margin: 0;
	float: left;
	display: block;
	padding-right: 15px;
}

#nav li ul {
	display: none;
}

#nav li.off ul,#nav li.on ul { /*put the subnav below*/
	position: absolute;
	top: 25px;
	left: 0;
	padding-top: 10px;
	background: #b9121b;
	height: 25px;
	width: 940px;
	padding-left: 60px;
}

#nav li.on ul {
	background: #393939;
}

#nav li.on:hover ul,#nav li.over ul { /*for ie*/
	background: #6d6d6d;
}

#nav li a {
	color: #6d6d6d;
	font-weight: bold;
	display: block;
	width: 93px;
	padding: 0;
}

#nav li.on a {
	color: #b9121b;
}

#nav li.on ul a,#nav li.off ul a {
	border: 0;
	float: left; /*ie doesn't inherit the float*/
	color: #b9121b;
	width: auto;
	margin-right: 15px;
}

#nav li.on:hover ul a,#nav li.over ul li a {
	/*for ie - the specificity is necessary*/
	background: #6d6d6d;
}

#nav li.on ul {
	display: block;
}

#nav li.off:hover ul,#nav li.over ul {
	display: block;
	z-index: 6000;
}

#nav li.off a:hover,#nav li.on a:hover {
	color: #393939;
}

#liHome a,#liueberUns a,#liRatgeber a,#liPublikationen a,#liGalerie a,#liIntern a
	{
	display: block;
	position: relative;
	height: 25px;
}

/*subnav formatting*/
#nav li.off ul a,#nav li.on ul a {
	display: block;
	background: #b9121b;
	color: #fff;
	font-family: arial, verdana, sans-serif;
	font-size: small;
}

#nav li.on ul a {
	background: #393939;
}

 

[Maik]

Hi,

wie lautet denn der HTML-Code der Seite?

Und in welcher IE-Version taucht das Problem auf?

mfg Maik

 

[the_royal]

Hier ist der HTML Code der Navi:

<?php

$id=$_GET['pid'];

echo'<div id="login">';
if($_SESSION['access'] == "erz"){
	echo'<form action="?pid=2" method="post">
		<table><tr>
		<td>Sie sind eingeloggt als '.$_SESSION['access'].'&nbsp; &nbsp; &nbsp; &nbsp;</td>
		<td><input type="submit" name="submit" value="Logout" class="btn" /></td><tr>
		</table>
	</form>
	</div>';
}

else if($_SESSION['access'] == "admin"){
	echo'
	<form action="?pid=2" method="post">
		<table><tr><td>Sie sind eingeloggt als '.$_SESSION['access'].' &nbsp; &nbsp; &nbsp; &nbsp;</td><td>
		<input type="submit" name="submit" value="Logout" class="btn"/></td></tr>
	</table></form></div>';
}

else{
	echo'
	<form action="?pid=3" method="post" name="login" onsubmit="return pruefen()">
	<table> 
		<tr><td><label name="userid">User</label></td><td>
 		 <input type="text" name="userid" id="userid" /></td>
  		<td><label name="password">Pass</label></td><td>
  		<input type="password" name="password" id="password" /></td>
  		<td></td><td><input type="submit" name="submit" value="Login" class="btn" /></td><tr>
	</table>
	</form>
</div>';
}

echo'
<div id=jscript>
<noscript>Bitte aktivieren Sie JavaScript um die Seite optimal anzuzeigen!
</noscript>
</div>

<ul id="nav">';
//Findet mit Hilfe der pidheraus, welches Menu aktiv sein soll
$homeclass="off";
$ueberUnsclass="off";
$ratgeberclass="off";
$publikationenclass="off";
$galerieclass="off";
$internclass="off";

switch($id){
	case 1:$ueberUnsclass="on";
	break;
	case 17:$ueberUnsclass="on";
	break;
	case 18:$ueberUnsclass="on";
	break;
	case 4:$ueberUnsclass="on";
	break;
	case 5:$ueberUnsclass="on";
	break;
	case 6:$ratgeberclass="on";
	break;
	case 7: $publikationenclass="on";
	break;
	case 8: $publikationenclass="on";
	break;
	case 9: $publikationenclass="on";
	break;
	case 10: $publikationenclass="on";
	break;
	case 11: $galerieclass="on";
	break;
	case 12: $internclass="on";
	break;
	case 13: $internclass="on";
	break;
	case 14: $internclass="on";
	break;
	case 15: $internclass="on";
	break;
	case 16: $internclass="on";
	break;
	case 27: $homeclass="on";
	break;
	default: $homeclass="on";
	break;

}

echo'<li id="liHome" class="'.$homeclass.'"><a href="?pid=0">Home</a>
<ul>
<li><a href="?pid=27">News</a></li>
</ul></li>
<li id="liueberUns" class="'.$ueberUnsclass.'"><a href="">Über uns</a>
<ul>
  <li><a href="?pid=1">Aufgabe</a></li>
  <li><a href="?pid=17">Geschichte</a></li>
  <li><a href="?pid=18">Grundlagen</a></li>
  <li><a href="?pid=4">Delegierte</a></li>
  <li><a href="?pid=5">Vorsitzende</a></li>
</ul></li>
<li id="liRatgeber" class="'.$ratgeberclass.'"><a href="">Ratgeber</a>
<ul>
  <li><a href="?pid=6">Konfliktschema</a></li>
</ul></li>
<li id="liPublikationen" class="'.$publikationenclass.'"><a href="">Publikationen</a>
<ul>
  <li><a href="?pid=7">Kursangebote</a></li>
  <li><a href="?pid=8">Merkblätter / Flyer</a></li>
  <li><a href="?pid=9">Konzepte</a></li>
  <li><a href="?pid=10">Weitere Informationen</a></li>
</ul></li>
  <li id="liGalerie" class="'.$galerieclass.'"><a href="?pid=11">Galerie</a>';
if($_SESSION['access']=="erz"||$_SESSION['access'] == "admin"){
	echo'
<li id="liIntern" class="'.$internclass.'"><a href="">Intern</a>
<ul>
  <li><a href="?pid=12">Allgemeines</a></li>
  <li><a href="?pid=13">Elternrat Geisshubel</a></li>
  <li><a href="?pid=14">Elternrat Steinbach</a></li>
  <li><a href="?pid=15">Elternrat Zentral</a></li>
  <li><a href="?pid=16">Elternrat Sek I</a></li>
</ul></li>
</ul>
';	
}
echo'
</ul>
';

?>
<script Language="JavaScript">
function pruefen(){
 a = document.login;
 	 if(a.userid.value == '')
	{alert("Bitte Username eingeben!");
 	a.userid.focus();
 	return false;
}
 if(a.password.value == '')
	{alert("Bitte Passwort eingeben!");
 	a.password.focus();
 	return false;
}
 if(a.Antwort.value == '')
	{alert("Bitte Captcha beantworten!");
 	a.Antwort.focus();
 	return false;
}
}
</script>

Das ganze wird in IE8 nicht korrekt angezeigt!

Gruss Marco

 

[Maik]

Kannst du hier bitte den geparsten PHP-Code zeigen, also die HTML-Ausgabe des Browsers (Ansicht -> Seitenquelltext anzeigen).

Vielen Dank!

Beim Überfliegen deines Codes würde ich aus dem Bauch heraus sagen, dass es an diesem Deklarationsblock liegt, der nicht das oberste <ul>-Element mit einschließt, um seine voreingestellten Polsterungseigenschaften zurückzusetzen:

#nav li ul,#nav li ul {
	margin: 0;
	padding: 0;
}

Stattdessen müsste er so lauten:

#nav,#nav li ul {
	margin: 0;
	padding: 0;
}

mfg Maik

 

[the_royal]

Hier der geparste Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>elternrat-zollikofen.ch</title>
<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="highslide/highslide-with-gallery.js"></script>
<script type="text/javascript" src="highslide/highslide.config.js" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="highslide/highslide.css" />
<link href="Newstyle.css" rel="stylesheet" type="text/css" />
</head>
<div id="container">


   






<div id="header"><div id="login">
	<form action="?pid=3" method="post" name="login" onsubmit="return pruefen()">
	<table> 
		<tr><td><label name="userid">User</label></td><td>
 		 <input type="text" name="userid" id="userid" /></td>
  		<td><label name="password">Pass</label></td><td>
  		<input type="password" name="password" id="password" /></td>

  		<td></td><td><input type="submit" name="submit" value="Login" class="btn" /></td><tr>
	</table>
	</form>
</div>
<div id=jscript>
<noscript>Bitte aktivieren Sie JavaScript um die Seite optimal anzuzeigen!
</noscript>
</div>

<ul id="nav"><li id="liHome" class="off"><a href="?pid=0">Home</a>
<ul>
<li><a href="?pid=27">News</a></li>

</ul></li>
<li id="liueberUns" class="on"><a href="">Über uns</a>
<ul>
  <li><a href="?pid=1">Aufgabe</a></li>
  <li><a href="?pid=17">Geschichte</a></li>
  <li><a href="?pid=18">Grundlagen</a></li>
  <li><a href="?pid=4">Delegierte</a></li>
  <li><a href="?pid=5">Vorsitzende</a></li>

</ul></li>
<li id="liRatgeber" class="off"><a href="">Ratgeber</a>
<ul>
  <li><a href="?pid=6">Konfliktschema</a></li>
</ul></li>
<li id="liPublikationen" class="off"><a href="">Publikationen</a>
<ul>
  <li><a href="?pid=7">Kursangebote</a></li>
  <li><a href="?pid=8">Merkblätter / Flyer</a></li>

  <li><a href="?pid=9">Konzepte</a></li>
  <li><a href="?pid=10">Weitere Informationen</a></li>
</ul></li>
  <li id="liGalerie" class="off"><a href="?pid=11">Galerie</a>
</ul>
<script Language="JavaScript">
function pruefen(){
 a = document.login;
 	 if(a.userid.value == '')
	{alert("Bitte Username eingeben!");
 	a.userid.focus();
 	return false;
}
 if(a.password.value == '')
	{alert("Bitte Passwort eingeben!");
 	a.password.focus();
 	return false;
}
 if(a.Antwort.value == '')
	{alert("Bitte Captcha beantworten!");
 	a.Antwort.focus();
 	return false;
}
}
</script>
	</div>
	<div id="content">

	<div id="middle">
	<div id="textcont">	
	<h1>Geschichte</h1>
	<p>
	Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.&nbsp; &nbsp;<br />
	<br />
	Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.&nbsp; &nbsp;<br />

	<br />
	Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.&nbsp; &nbsp;<br />
	<br />
	Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer</p>
<p>
	&nbsp;</p>
<p>
	Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.&nbsp; &nbsp;<br />

	<br />
	Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.&nbsp; &nbsp;<br />
	<br />
	Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.&nbsp; &nbsp;<br />
	<br />
	Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer</p>

 	<br>
 	<br><!--Author: Marco von Gunten-->
</div>
</div> 
<div id="footer"><br><br><br><br><br><br><br></br>
<a href=?pid=12>Kontakt</a>|<a href=?pid=13>Links</a>|<a href=?pid=14>Sitemap</a><br>
Copyright elternrat-zollikofen.ch | All Rights Reserved<br>
Design by Marco von Gunten

<br><br><br><br>
</div>
</div>

</body>
</html>

Vielleicht noch zur genaueren Erläuterung...
Im Firefox wird beim hover über einen TopMenuPunkt unten das passende Submenu angezeigt.
Im IE passiert dies eben nicht, könnte also vielleicht auch noch etwas mit dem hover sein?

Gruss Marco

Wenn ich das von dir vorgeschlagene probiere, verschiebt sich im Firefox nur das Topmenu nach oben links.

 

[Maik]

Ich erkenne mit deinen Code-Angaben im IE8 keinen Unterschied zu Firefox, und auch das Einblenden der einzelnen Submenüs funktioniert im IE8.

mfg Maik

 

[the_royal]

Verstehe dich nicht ganz?
du meinst also das ganze sollte so funktionieren?
Der Quelltext ist übrigens der aus dem Firefox, aber denke das sollte ja keine Rolle spielen, da bei beiden das selbe rauskommt und es dann nur anders interpretiert wird?

 

[Maik]

Hier zum Beleg die beiden Schnappschüsse:



Kannst du mal zur Gegenprobe den Link zur Seite nennen? Möglicherweise kollidiert da etwas aus dem übrigen Stylesheet.

mfg Maik

 

[the_royal]

da ist aber auch schon das Problem =)
Das Submenu welches bei dir angezeigt wird ist das von Home. Da du aber "Über uns" aktiv hast, sollte das SubMenu(unten im Screen) angezeigt werden und nicht das von Home.

Gruss Marco

 

[Maik]

Das wird es doch - ich bin vorhin lediglich mal auf den Menüpunkt "Home" gefahren, um das störungsfreie Einblenden der Submenüs im IE8 zu demonstrieren ;-)

Hier die Ausgangssituation:



mfg Maik