css Problem mit IExplorer, positionierung div.

[counter18]

Hi miteinander,
ich habe ein Problem mit dem InternetExploerer. Der zerhaut meine ganze Seite. Im Firefox und Safari wird die Seite sehr schön angezeigt, ausser das der letzte div (id5) hin und herspringt bei verschiedenen Seiten. Meiner Meinung nach dürfte das nicht passieren. Hier der Quelltext der css:

/* CSS Document */

body {
	background: #FFFFFF;
	font-size: 12px;
	font-family:Arial, Helvetica, sans-serif;
	color: #000000;
}

#site {
	left:5px;
	top:0px;
	width:700px;
}
/* div-layout-layer */
#s1 {
	top:0px;
	left:5px;
	width:100%;
	height:	138px;
	background:url(../grafik/layout2/nba_1.gif);
}
#s2 {
	position:absolute;
	top:150px;
	left:7px;
	width:140px;
	height:200px;
	background:url(../grafik/layout2/nba_2.gif);
	background-repeat:no-repeat;
}
#s3 {
	margin-left:140px;
	width:560px;
	height:20px;
	background: #FFFFFF;
	float:left;
}
#s4 {
	margin-left:150px;
	width:560px;
	background: #FFFFFF;
	float:left;
	min-height:600px;
}
#s5 {
	height:47px;
	width:560px;
	background:url(../grafik/layout2/nba_3.gif);
	background-repeat:no-repeat;
	margin: 15px auto auto 145px;
	float:left;
}
#cat {
	float: right;
	margin: 5px 10px 10px 15px;
}
/* Positionierung */
#changer {
	padding-top:10px;
	margin-left:570px;
	width:130px;
}
#menue {
	margin: 25px auto auto 20px;
	width:80px;
}
#date {
	margin: 0px auto auto 412px;
	width:430px;
	height:15px;
	font-size: 12px;
	font-family:Arial, Helvetica, sans-serif;
	font-weight: bold;
	color: #000000;
}
#inhalt {
	padding-top:0px;
	margin: 0px 5px 10px 20px;
	min-height:450px;
}
#impr {
	margin: 12px auto 5px 420px;
}
#admin {
	margin: 0px auto auto 28px;
}
#blog_menue {
	margin: 0px auto 7px auto;
}
/* Text */
h1 {
	font-size: 16px;
	font-family:Arial, Helvetica, sans-serif;
	color: #000000;
	margin-bottom:0px;
	font-weight:bold;
}
h2 {
	font-size: 14px;
	font-family:Arial, Helvetica, sans-serif;
	color: #000000;
	margin-bottom:0px;
	font-weight:bold;
}
h3 {
	font-size: 12px;
	font-family:Arial, Helvetica, sans-serif;
	color: #3399FF;
	font-weight:bold;
}
h4 {
	font-size: 12px;
	font-family:Arial, Helvetica, sans-serif;
	color:#000000;
	font-weight:800;
}
/* Links */
a:link, a:visited {
	font-size: 12px;
	font-family:Arial, Helvetica, sans-serif;
	color: #000000;
}
a:hover, a:active {
	font-size: 12px;
	font-family:Arial, Helvetica, sans-serif;
	color: #C4CDAC;
}
a.links:link, a.links:visited {
	font-size: 16px;
	font-family:Arial, Helvetica, sans-serif;
	font-weight:bolder;
	color: #000000;
	margin: 5px 20px 5px auto;
}
a.links:hover, a.links:active {
	font-size: 16px;
	font-family:Arial, Helvetica, sans-serif;
	font-weight:bolder;
	color: #FFFFFF;
	margin: 5px 20px 5px auto;
}
a.links_down:link, a.links_down:visited {
	font-size: 11px;
	font-family:Arial, Helvetica, sans-serif;
	font-weight:bold;
	color: #000000;
}
a.links_down:hover, a.links_down:active {
	font-size: 11px;
	font-family:Arial, Helvetica, sans-serif;
	font-weight:bold;
	color: #FFFFFF;
}
a.change:link, a.change:visited {
	font-size: 11px;
	font-family:Arial, Helvetica, sans-serif;
	font-weight:bold;
	color: #FFFFFF;
}
a.change:hover, a.change:active {
	font-size: 11px;
	font-family:Arial, Helvetica, sans-serif;
	font-weight:bold;
	color: #000000;
}
a.admin:link, a.admin:visited {
	font-size: 12px;
	font-family:Arial, Helvetica, sans-serif;
	font-weight:bolder;
	color: #000000;
	margin: auto 3px auto  auto;
}
a.admin:hover, a.admin:active {
	font-size: 12px;
	font-family:Arial, Helvetica, sans-serif;
	font-weight:bolder;
	color: #C4CDAC;
	margin: auto 3px auto  auto;
}
div.blogeintrag {
	margin: 0px 5px 10px 0px;
	font-size:12px;
	color:#000000;
	font-family:Arial, Helvetica, sans-serif;
	width:100%;
}
#blogtext {
	font-size:12px;
	color:#000000;
	font-family:Arial, Helvetica, sans-serif;
	width:100%;
	margin: 2px auto 2px auto;
}
#blogcategory {
	font-size: 12px;
	font-family: Arial, Helvetica, sans-serif;
	color: #000000;
	font-weight:bold;
}
#blogdatum {
	font-size: 12px;
	font-family: Arial, Helvetica, sans-serif;
	color: #000000;
	font-weight:bold;
}
td.li {
	margin: 2px auto auto 2px;
	width: 125px;
	font-size: 11px;
	font-weight: bold;
	font-family:Arial, Helvetica, sans-serif;
	color: #3399FF;
}
td.re {
	margin: 2px auto auto 2px;
	width: 450px;
	font-size: 12px;
	font-family:Arial, Helvetica, sans-serif;
	color: #000000;
}
#bilder {
	width:500px;
	margin: 3px auto 5px auto;
}
#rahmen {
	width:119px;
	height:119px;
	float:left;
}
img.bild {
	float: left;
	margin: 3px 3px 3px 3px;
}
#contex {
	margin: 5px 3px 5px 3px;
}
#list li{
	color: #3399FF;
	list-style:none;
}

#list .subliste li{
	list-style:none;
	color:#000000;
}
#bild_re {
	float:right;
	margin: 3px 3px 3px 3px;
}

Ich habe nur einen funktionierenden Link hinzugefügt, der dieses Problem aufzeigt. Tutorial ist das.
Kann mir jemand sagen wo das Problem mit dem Internet Explorer liegt und was das Problem mit der Div id5 ist?
Die Seite ist zZt. erreichbar unter http://creative.cr.ohost.de/cssprob/index.php

[His.Master's.Voice]

Bei mir wird im IE6.0 das andere Layout (Style angezeigt), sowie ein Fehler auf Seite in der Browserfußzeile ausgegeben. Im Firfox sehe ich dann das Design mit den Tropfen. Who knows...

[Boris]

Der IE kennt kein min-height - für ihn musst du (versteckt) height benutzen, denn er interpretiert es fälschlicherweise so wie min-height. Das geht z.B. so:

* html #s4
{
height: 600px;
}

Besser wärs über Conditional Comments - Google wird dir dabei helfen können.

Dein HTML ist eine nette DIV-Suppe, im übrigen. Siehe:
http://css.fractatulum.net/sample/suppe/div_suppe1.htm
http://www.vorsprungdurchwebstandard.../retro-coding/