# Problem im IE mit position:absolute



## the_royal (4. März 2011)

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 (5. März 2011)

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 (8. März 2011)

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 (8. März 2011)

the_royal hat gesagt.:


> 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.


----------

