Hallo Forum!
Ich bin am Umstieg von Tabellenlayouts zu CSS-Layouts und bin auf ein erstes, grobes Problem gestoßen. Eine DIV-Box mit fester Höhe und Breite soll zentriert im Browser angezeigt werden, und ein Hintergrundbild haben, das genauso groß ist wie die Box. Der rechte Teil des Bildes ist (fast) weiß und dort soll nun etwas Text rein (im Endeffekt ists ein Login-Screen). Ich hatte da an eine verschachtelte DIV-Box gedacht:
<div id="LoginBg">
<div id="LoginBody">
Hello, Login here please!
</div>
</div>
Das CSS dazu schaut wie folgt aus:
body
{
background-color:White;
}
div#LoginBg
{
margin: 150px auto 0 auto;
width:630px;
height:473px;
background-image:url(images/login/loginbg.jpg);
border:solid 1px black;
padding:0;
}
div#LoginBody
{
float:left;
margin-left:260px;
}
Die 260px Margin entsprechen genau dem Abstand zum linken Rand der äusseren Div-Box, um mit dem Text im "freien" Bereich anzufangen. Im Opera funktioniert das wunderbar, der IE aber setzt das ganze in etwa doppelt so weit weiter rechts.
In den SELFHTML-Beispielen funktioniert es auf diese Art aber auch. Deshalb bin ich etwas ratlos.
Vor allem: ersetze ich margin-left durch padding-left - passt die Position auch im IE haargenau.
Da für diesen Zweck aber margin-left erste Wahl sein sollte, würde ich gerne wissen, warum der IE bei Verwendung von margin-left die angegebenen 260 Pixel offensichtlich "verdoppelt".
Weißt dazu jemand was? Ich konnte zu diesem Problem keine Info finden ...
Danke & lg
Jon