# Problem mit Div-Platzierung im IE 6 und sonst perfekt



## Orphelina (14. Dezember 2006)

Hallo zusammen,

ich weiss dieses Thema wurde sicher schon oft genug gestellt, aber ich habe keine passende Antwort gefunden, vielleicht fallen mir auch nicht die richtigen Suchbegriffe ein.
Und zwar hab ich eine Webseite angefangen, die ohne Tabellen und somit nur aus verschachtelten Divs besteht. Das hat mit ein bisschen float hier und da auch gut funktioniert. Nun habe ich das Problem, dass ich ein Div haben, das wiederum 2 divs enthält. Der Linke ist eine Art Navigation, der Rechte Inhalt. Der Rechte liess sich ganz einfach positionieren und passt in allen Browsern (PC und Mac). Nur der Linke sitzt im IE6 zu weit unten. 
Nun habe ich alles mögliche ausprobiert, mit Position:absolute, mit Margins, mit !Important-Befehl, etc. Leider bisher ohne Erfolg.
Vielleicht kann mir jemand helfen, diese letzte Hürde zu überwinden.

Ich freue mich über jeden Tipp.

Danke und Gruß

Es handelt sich um den DIV mit der ID Navi-Left.
Hier die HTML:

```
<!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>Test</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>

<div id="MainContainer">
	<div id="Header">
		<div id="Header01"><img src="01.gif"></div>
		<div id="Header02"><img src="02.gif"></div>
		<div id="Header03"><img src="03.gif"></div>
		<div id="Header04"><img src="04.gif"></div>				
	</div>
	<div id="Navi">
		<div class="metanavi"><a href="">Kontakt</a> | <a href="">Sitemap</a> | <a href="">Impressum </a>| <a href="">Suche</a></div>		
	</div>
	<div id="Navi02"></div>
	<div id="ContentContainer">	
	        <div id="Navi-Left">
			      <span class="linksnavi_level1"><a href="">Ebene 1</a></span>
			      <span class="linksnavi_level2"> <a href="">Punkt 1</a></span>
			      <span class="linksnavi_level2"><a href="">Punkt 2</a></span>
			      <span class="linksnavi_level2"> <a href="">Punkt 3</a></span>
			      <span class="linksnavi_level2"><a href="">Punkt 4</a></span>	 
		</div>
		<div id="Content02">			
			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque pharetra, lectus at scelerisque venenatis, nunc massa dictum lectus, vel commodo ligula nulla ac lectus. Donec lectus sapien, euismod nec, scelerisque sed, nonummy ut, neque. Praesent pretium sapien quis quam. Ut faucibus feugiat tortor. Quisque congue. Cras vehicula. Aliquam erat volutpat. Suspendisse potenti. Vestibulum auctor. Morbi sit amet lectus.</p>
		</div>
		
	</div>
</div>



</body>
</html>
```

Und ein Teil meiner CSS:

```
body {
	background-color: #E3E3E3;
	margin: 0px;
	padding: 0px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #000000;
	list-style-type: disc;
}

#MainContainer {
	width:1024px;
	height:768px;
	margin:0px;
	padding:0px;
}

#Header{
	width:100%;
	height:120px;
	background-color:#FFFFFF;
	margin:0px;
}

#Header01 {
	width:120px;
	height:120px;
	float:left;
}
#Header02 {
	width:366px;
	height:120px;
	margin-left:1px;
	float:left;
}
#Header03 {
	width:241px;
	height:120px;
	margin-left:1px;
	float:left;
		
}
#Header04 {
	width:269px;
	height:120px;
	margin-left:1px;
	float:left;
}
#Navi {
	height:23px;	
	background-color:#5c5c5c;
	color:#FFFFFF;
	font-weight:bold;	
}
.metanavi{
	font:10px Verdana;
	color: #FFFFFF;	
	padding-left:490px;
	padding-top:5px;
}
.metanavi A:link {
	font-family: Verdana;
	font-size: 10px;
	text-decoration: none;
	color: #FFFFFF;
}
.metanavi A:hover {
	font-family: Verdana;
	font-size: 10px;
	text-decoration: underline;
	color: #FFFFFF;
}
.metanavi A:visited {
	font-family: Verdana;
	font-size: 10px;
	text-decoration: none;
	color: #FFFFFF;
}
#Navi02 {
	height:12px;
	background-image:url(hometemplate_r4_c1.gif);
	background-color:#b5b5b5;
}
#ContentContainer{
	width:100%;
	height:100%;
	background-color:#e3e3e3;
	display:block;	
}
#Navi-Left {
	width: 200px;
	margin-top:25px;	
}
#Content02 {
	position:fixed;
	top:180px;
	left:205px;
	width:800px;
	height:100%;
	background-color:#f1f1f1;
	float:right;
	padding-left:10px;
	padding-right:10px;
}
```


----------



## Maik (14. Dezember 2006)

Versuch es mal mit diesem Stylesheet:


```
#Navi-Left {
    width: 200px;
    top:25px;
    position:relative;
}
#Content02 {
    position:absolute;
    top:180px;
    left:205px;
    width:800px;
    height:100%;
    background-color:#f1f1f1;
    float:right;
    padding-left:10px;
    padding-right:10px;
}
```
und tausche im HTML-Code die Reihenfolge der beiden DIVs *#Navi-Left* und *#Content02*, da das zu umfliessende Element, also das mit der float-Eigenschaft,  zuerst genannt wird:


```
<div id="ContentContainer">
        <div id="Content02">...</div>
        <div id="Navi-Left">...</div>
</div>
```


----------



## Orphelina (14. Dezember 2006)

Hallo,

danke erstmal. Leider hat das nicht geholfen.. Jetzt ist es im Opera auch fehlerhaft. Ich probier mal noch weiter rum.


Danke und Gruß


----------



## Maik (14. Dezember 2006)

Seltsam, neben den anderen gängigen Browsern stellt auch Opera 9.02 bei mir die Seite fehlerfrei dar:


----------



## Orphelina (15. Dezember 2006)

Guten Morgen,

ich hab gestern noch ewig gesucht und bin dem Fehler auf die Schliche gekommen. Die ursprünglcihe CSS-Datei habe nicht ich erstellt und so bin ich da auch nochmal alles durchgegangen. In einem Style für das linke Menü habe ich den Fehler gefunden.


```
display: list-item;
```

Soweit ich weiss gibt es den Befehl nicht und ich habe es ersetzt durch

```
display: block;
```

Ud plötzlich sah es auch im IE 6 und 7 gut aus. Opera passt auch, nur Netscape liess sich bisher nicht überzeugen. Vielleicht gibt es noch einen Fehler oder der Netscape ist einfach komisch...

Danke und Gruß


----------



## Maik (15. Dezember 2006)

Orphelina hat gesagt.:
			
		

> In einem Style für das linke Menü habe ich den Fehler gefunden.
> 
> 
> ```
> ...


Es gibt sehr wohl den Wert *list-item* für die display-Eigenschaft.

Siehe hierzu  Cascading Style Sheets, Level 2 - 9 Visuelles Formatierungsmodell.

Wenn das Austauschen der display-Werte den Darstellungsfehler im IE behoben hat, dann wundert es mich aber schon, wieso sich diese Angabe in deinem gestern geposteten CSS-Code nirgends wiederfindet. ;-]


----------

