Mærkelig problem med positionering??? (med kode??)

Tags:    html css

Hej, jeg er ny i denne verden og der er noget jeg ikke forstår mht positionering/layout med css:

Nedenfor har jeg skrevet noget html-kode med indlejret CSS i Head'et. Men når jeg viser det i Firefox (sidste nye) opstår der et lille mellemrum mellem toppen og den øverste kasse (rød, #top). Jeg synes ellers jeg har prøvet alt men jeg kan ikke slippe af med det mellemrum - det vil jeg gerne!

Der er jo tale om et nested div-element... Er det her problemet ligger?

I IE vises det iøvrigt helt forkert men sådan er det vel bare med den browser - eller hva?

Jeg håber nogen kan give mig nogle fornuftige svar. Indtil videre synes jeg ikke CSS er særlig god til præcis positionering...

mvh Ole.

<html>
<head>
<title>Ny side</title>
<style type="text/css">
<!--
div#page {
position: absolute;
top: 50%;
left: 50%;
width: 900px;
height: 500px;
margin-top: -250px;
margin-left: -450px;
background-color: #dedede;
border: solid thin black;
overflow: auto;
padding: 0 0 0 0;
}

div#top {
position: relative;
top: 0px;
left: 0px;

background-color: red;
width: 900px;
height: 100px;
}

div#left {
position: relative;

background-color: green;
width: 600px;
height. 400px;
float: left;
}

div#right {
position: relative;
background-color: blue;
width: 300px;
height: 100px;
float: left;
}
-->
</style>
</head>

<body>
<div id="page">
<div id="top">
<p>Top kolonne</p>
</div>

<div id="left">
<p>Venstre kolonne</p>
</div>

<div id="right">
<p>Højre kolonne</p>
</div>
</div>
</body
</html>



Nu valgte jeg helt at lade være med at bruge din kode, da den efter min mening gør css mere kompliceret end den er.
f.eks din padding 0 0 0 0; er forkert der skal kun stå padding: 0; en anden mulighed med padding er padding: 0 5px; så bliver top og bund 0 og højre og venstre 5.
Du havde heller ikke nogen doctype eller charset med, det er et must, hvis man har en forventning om at ens side virker.
Nedenstående er afprøvet i Firefox, Opera og IE7.
Lad nu være med at ride på alle de fordomme der er om IE for der er efterhånden ikke ret mange der holder vand:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>New document</title>
<meta name="generator" content="TSW WebCoder">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body {font-family: Verdana, Arial, Helvetica, sans-serif;
background-color: #B0BFC2; }
#page{ width: 900px; height:500px; background-color: #FFFF33; border:1px solid black;
margin-left: auto; margin-right:auto;}
#top{ width: 900px; height:100px;background-color: #FF3333; padding-top:50px;}
#left{width: 600px; height: 100px;background-color: #33FF66; float:left; }
#right{width: 300px; height:100px; background-color: #33FFFF;float:right; }
</style>
</head>

<body>
<div id="page">
<div id="top">
<p>Top kolonne</p>
</div>

<div id="left">
<p>Venstre kolonne</p>
</div>

<div id="right">
<p>Højre kolonne</p>
</div>
</div>
</body
</html>




t