nicht angemeldet
Hallo Forum,
mit folgendem Code definiere ich die grundlegende Struktur einer Seite:
--- schnipp -----
<html><head><title>position</title>
<style type="text/css">
<!--
#total { position:relative; top: 0px; left:0px; width:500px; height:300px; z-index:5; }
#header { position:absolute; top: 0px; left:0px; width:500px; height:100px; z-index:1; }
#navi { position:absolute; top:100px; left:0px; width:100px; height:150px; z-index:1; }
#body { position:absolute; top:100px; left:100px; width:400px; height:150px; z-index:1; }
#footer { position:absolute; top:250px; left:0px; width:500px; height: 50px; z-index:1; }
-->
</style>
</head>
<body bgcolor="FFFFFF" text="#000000" style="border:none">
<div id="total" style="border:1px solid black">
<div id="header" style="background:#cccccc;" >
Layer "header" Layer "header" Layer "header"
</div>
<div id="navi" style="background:#dddddd;">
Layer "navi" <br> Layer "navi"<br>Layer "navi"<br>Layer "navi"
</div>
<div id="body" style="background:white;">
Layer "body" Layer "body" Layer "body" Layer "body" Layer "body"
</div>
<div id="footer" style="background:#cccccc">
Layer "footer" Layer "footer" Layer "footer" Layer "footer"
</div>
</div>
</body></html>
--- schnapp -----
Durch den "Border"-Tag beim Layer "header" möchte ich erreichen, dass um alles ein Rand gezogen wird. Klappt auch bei Firefox (1.5.0.1) wunschgemäß. Bei IE (6.0.2900) "überlappen" die inneren Layer den äußeren, so dass der rechte Rand nicht erscheint. Mache ich die inneren um ein Pixel kleiner, sieht's zwar im IE richtig aus, bei Firefox sieht man jedoch, dass da ein Pixel fehlt.
Hat jemand von euch eine Idee?
--
Ciao
Frank Scholz