ibtage >> du trækker dug i mine øjne ..... det er smukt! ;o)
fusentasten >> Ja, DTD'en er et absolut must! For det første fortæller den browseren, hvordan dokumentet er kodet (og hvordan det derfor bør tolkes) - og uden den korrekte, kan IE som sagt ikke tolke CSS ... specielt box-modellen, som bl.a. dikterer, hvor og hvordan margin, border og padding skal renderes. Læs evt:
http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnie60/html/cssenhancements.asp- under 'DocType Switch'.
Grunden til, din topboks ser sådan ud, tror jeg er din brug af float. Floatede elementer optager ikke plads.
Desuden holder denne ikke (fra din CSS-regel for body-elementet):
margin : 10 0 0 15px;
- kun værdien 0 må optræde uden enhed, Sådan skal den se ud:
margin : 10px 0 0 15px;
Der er mange, der ikke helt har forstået CSS-positionering. Her kommer lige reglerne (i hurtig version) og et lille eksempel:
Hvis et element positioneres abslout, skal det placere sig i forhold til det første omkransende element, der er positioneret (relativt eller absolut er ligemeget).
Findes der ikke et positioneret, omkransende element, skal det placere sig i forhold til body-elementet.
Rigtig mange kender kun til den sidste tilstand ... men den første er utrolig anvendelig:
<!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>TITLE</title>
<style type="text/css">
body, html {
height: 100%;
margin: 0px;
padding: 0px;
}
.container {
position: relative;
width: 500px;
height: 500px;
border: 1px solid #999999;
margin: 0px auto;
}
.topBoks {
height: 70px;
background-color: red;
}
.menu {
position: absolute;
width: 140px;
height: 430px;
left: 0px;
top: 70px;
background-color: yellow;
}
.main {
position: absolute;
width: 360px;
height: 430px;
left: 140px;
top: 70px;
background-color: #dedede;
}
</style>
</head>
<body>
<div class="container">
<div class="topBoks">Tekst i toppen</div>
<div class="menu">Et fake link #1<br>
Et fake link #2<br>
Et fake link #3<br>
Et fake link #4<br>
Et fake link #5
</div>
<div class="main">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Nunc semper wisi ut velit. Quisque ultrices pharetra nulla.
Quisque ultrices nisl a est. Donec sit amet lacus.
Pellentesque nec elit.
</div>
</div>
</body>
</html>
