Problem mit CSS-Positionierung und IE 6
Verfasst: 17.11.2004, 05:07
Hi Leute,
ich bin gerade am verzweifeln. Ich wollte einer Site ein neues Layout verpassen und in diesem Zuge gleich auf ein tabellenloses Layout mit CSS umstellen. Leider ärgert mich der IE 6 und ich weiss nicht, wie ich das in den Griff bekommen soll.
Hier erst mal ein Stück Code:
Das Problem ist, dass der IE 6 die Box "Kopf" direkt oben an den Rand pappt, obwohl ein Abstand (margin) angegeben ist. Woran liegt's und wie bekomme ich das in den Griff? Dass Mozilla die Seite wie erwartet rendert, brauche ich ja hoffentlich nicht zu erwähnen.
BTW, wenn ich beim Doctype die Adresse weglasse, also nur '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">' schreibe, dann verhält sich der IE 6 offenbar wie der IE 5 und zeigt so gut wie keinen Abstand mehr richtig an. Ich dachte, der IE 6 macht das nur, wenn er gar keinen Doctype findet?
cu, Robo
ich bin gerade am verzweifeln. Ich wollte einer Site ein neues Layout verpassen und in diesem Zuge gleich auf ein tabellenloses Layout mit CSS umstellen. Leider ärgert mich der IE 6 und ich weiss nicht, wie ich das in den Griff bekommen soll.
Hier erst mal ein Stück Code:
Code: Alles auswählen
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>CSS-Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Language" content="de">
<style type="text/css">
body {
color: #000000;
background-color: #f0f0f0;
font-size: small;
font-family: Arial, Helvetica, sans-serif;
margin: 0px;
}
#info {
position: absolute;
top: 0px;
left: 0px;
margin: 10px;
width: 190px;
height: 110px;
padding: 5px;
background-color: #c0c0c0;
overflow: hidden;
}
#kopf {
margin: 100px 10px 10px 220px;
height: 110px;
padding: 5px;
background-color: #c0c0c0;
overflow: hidden;
}
#navi {
position: absolute;
top: 130px;
left: 0px;
margin: 10px;
width: 190px;
padding: 5px;
background-color: #c0c0c0;
}
#inhalt {
margin: 10px 10px 10px 220px;
padding: 5px;
background-color: #d0d0d0;
}
</style>
</head>
<body>
<div id="info">
<h1>Info</h1>
Ein bissl Text ...
</div>
<div id="kopf">
Hier kommt eine Grafik hin ...
</div>
<div id="navi">
<a href="#">Ein Link</a><br>
<a href="#">Ein Link</a><br>
<a href="#">Ein Link</a><br>
<a href="#">Ein Link</a><br>
<a href="#">Ein Link</a><br>
<a href="#">Ein Link</a><br>
<a href="#">Ein Link</a><br>
</div>
<div id="inhalt">
<h1>Hier kommt dann der Content hin ...</h1>
Bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
</div>
</body>
</html>BTW, wenn ich beim Doctype die Adresse weglasse, also nur '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">' schreibe, dann verhält sich der IE 6 offenbar wie der IE 5 und zeigt so gut wie keinen Abstand mehr richtig an. Ich dachte, der IE 6 macht das nur, wenn er gar keinen Doctype findet?
cu, Robo
