Problem im IE mit position:absolute

[the_royal]

Hallo Zusammen
Ich habe auf der folgenden Website ein Problem mit der Positionierung im IE.
http://www.coaching-schwung.ch

Im Firefox könnt ihr erkennen, wie das Menu korrekt sein sollte. Im IE wird es zu Weit oben angezeigt, weil er komischerweise das position:absolute nicht interpretieren kann.
Hat jemand einen Tipp für mich, wie ich das Problem lösen kann?

CSS Menu Abschnitt:

nav {
	position: absolute;
	text-align: center; 
	font-size: 20px;
	top: 151px;
}

#dropline,#dropline ul {
	padding: 0;
	margin: 0;
	list-style: none;
	width: 700px;
}

#dropline table {
	border-collapse: collapse;
	margin: -1px -10px; 0 0;
	padding: 0;
	width: 0;
	height: 0;
	font-size: 14px;
}

#dropline li {
	float: left;
	height: 38px;
	margin-right: 1px;
}

#dropline li a {
	float: left;
	display: block;
	height: 38px;
	line-height: 38px;
	padding: 0 35px 0 10px;
	font-size: 17px;
	color: #82abff;
	text-decoration: none;
}

#dropline li ul a {
	font-size: 14px;
	color: #82abff;
}

#dropline li:hover>a {
	color: #FFF;
}

#dropline li ul {
	position: absolute;
	top: 33px;
	left: -9999px;
	z-index: 10;
	background: url(images/sub_back.png) left top;
}

#dropline li ul.floatRight li {
	float: right;
}

#dropline :hover ul,#dropline :hover ul :hover ul,#dropline :hover ul :hover ul :hover ul,#dropline :hover ul :hover ul :hover ul :hover ul,#dropline :hover ul :hover ul :hover ul :hover ul :hover ul
	{
	left: 0;
	background: url(images/sub_back.png) left bottom;
	repeat: no-repeat;
}

Menu Quellcode:

<nav>
<ul id="dropline">
	<li><a href="?pid=0">Home</a></li>
	<li><a class="down" href="?pid=1">Coaching<!--[if gte IE 7]><!--></a><!--<![endif]-->
		<!--[if lte IE 6]><table><tr><td><![endif]-->
		<ul>
			<li><a href="?pid=2">...f&uuml;r Musiker/innen</a></li>
			<li><a href="?pid=4">Ressourcen und innere Quellen<!--[if gte IE 7]><!--></a><!--<![endif]-->
			<li><a href="?pid=5">EFT</a></li>
		</ul>
		<!--[if lte IE 6]></td></tr></table></a><![endif]-->
	</li>

	<li><a class="down" href="?pid=6">Musik<!--[if gte IE 7]><!--></a><!--<![endif]-->
	</li>
	<li><a href="?pid=10">&Uuml;ber mich<!--[if gte IE 7]><!--></a><!--<![endif]-->
	</li>
	<li><a class="down" href="?pid=11">Aktuelles<!--[if gte IE 7]><!--></a><!--<![endif]-->
		<!--[if lte IE 6]><table><tr><td><![endif]-->
		<ul>
			<li><a href="?pid=12">Workshop</a></li>
			<li><a href="?pid=13">Konzerte</a></li>
		</ul>

		<!--[if lte IE 6]></td></tr></table></a><![endif]-->
	</li>
	<li><a class="down" href="?pid=14">Kontakt<!--[if gte IE 7]><!--></a><!--<![endif]-->
	</li>
</ul>
</nav>

Danke im Voraus für eure Tipps!

the_royal

 

[Quaese]

Hi,

zunächst musst du für den IE mit Hilfe der Methode createElement auch das nav-Element bekannt machen.

document.createElement("nav");

In der CSS-Deklaration zum nav-Element wird die erste top-Definition auskommentiert und das Element zusätzlich mit einem left-Wert ausgestattet.

nav {
  position: absolute;
  text-align: center;
  /*top: 50px;*/
  font-size: 20px;
  top: 151px;
  left: 0;
}

Ciao
Quaese

 

[the_royal]

Hallo Quaese
Vielen Dank, das funktioniert so!
Leider ist jetzt noch das Problem, dass das Untermenu nicht angezeigt wird.
Vermutlich weil diese Ebene hinter der Content Ebene Liegt? Kann ich das mit z-index lösen, oder wie mache ich das am besten?

Gruss

the_royal

 

[SpiceLab]

Leider ist jetzt noch das Problem, dass das Untermenu nicht angezeigt wird.
Vermutlich weil diese Ebene hinter der Content Ebene Liegt? Kann ich das mit z-index lösen [...]?

Probier's doch einfach aus - danach bist du schlauer.