nicht angemeldet
IE + CSS-Layer :-((
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
-
Privit!
Wenn Dein geposteter Quellcode vollständig ist, d.h. wenn Du wirklich keinen Doctype angegeben hast, dann leidet die Darstellung wohl unter dem Box Model Bug.
Nebenbei: Warum definierst Du nicht alle Formatierungen im globalen CSS anstatt in style- und anderen Attributen?Viele Grüße vom Længlich
-
Hallo Frank!
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.
Das dürfte wohl am Box-Modell-Fehler des IE liegen. Eine entsprechende Weiche für das Problem findest du dort auch...
Viele Grüße
Damian -
hi,
mit folgendem Code definiere ich die grundlegende Struktur einer Seite:
"Struktur" ist bei dieser Div-Suppe aber eher ein Scherz.
Bechäftige dich mit semantischem Markup, und zeichne deine Inhalte erst mal mit sinnvollem HTML aus. Formatierung kommt anschließend.
gruß,
wahsaga--
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; }