nicht angemeldet
IE und unterschiedliche Breite bei margin-left und padding-left
0 
Der Martin
0
IE und unterschiedliche Breite bei margin-left und padding-left
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
-
Halo Jon,
<div id="LoginBg">
<div id="LoginBody">
Hello, Login here please!
</div>
</div>ich bin mir anhand dieses kurzen Ausschnitts noch nicht ganz sicher, aber ich meine, ich könnte das innere div schreien hören: "Ich will eigentlich ein <p> sein, warum darf ich nicht?"
div#LoginBg
{
margin: 150px auto 0 auto;
width:630px;
height:473px;So viel Rand oben bei *der* Höhe? Da muss ich ja schon scrollen, obwohl oben Platz verschenkt wird.
div#LoginBody
{
float:left;
margin-left:260px;
}Warum floatest du das innere Element? Lass es doch ganz normal an seiner Stelle im Elementfluss, dann macht auch margin im IE keine Zicken.
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.
Vor allem: ersetze ich margin-left durch padding-left - passt die Position auch im IE haargenau.
Ja, in diesem Fall wären margin und padding vom Effekt her auch durchaus austauschbar.
Schönes Wochenende noch,
Martin--
Schon gewusst, dass Aftershave trotz des Namens eigentlich eher fürs Gesicht gedacht ist?-
Hi, danke zuerst mal für deine Antworten!
ich bin mir anhand dieses kurzen Ausschnitts noch nicht ganz sicher, aber ich meine, ich könnte das innere div schreien hören: "Ich will eigentlich ein <p> sein, warum darf ich nicht?"
Weil darin später auch noch ein weiteres div geschachtelt werden muss. Ist nur so ein "Testbeispiel", damits simpel bleibt, und der Fehler verständlich ist.
So viel Rand oben bei *der* Höhe? Da muss ich ja schon scrollen, obwohl oben Platz verschenkt wird.
Es ist so ausgelegt, dass bei 1.024 x 768 noch nicht gescrollt werden muss. Sinn davon ist (da mit CSS-Layout ja keine wirklich zentrierte Ausgabe im Browserfenster möglich ist, wie's bei Tabellen war), diese Login-Box nicht ganz am oberen Rand "picken" zu haben, damits etwas gefälliger aussieht. PAsst ganz gut so, wird aber eh noch optimiert und getestet. Wie gesagt, ist alles mal nur so ein schnelles Beispiel, um den Fehler darzustellen.
Warum floatest du das innere Element? Lass es doch ganz normal an seiner Stelle im Elementfluss, dann macht auch margin im IE keine Zicken.
Ohne dies wollte der IE das nicht innerhalb der anderen div-box anzeigen. :-( Werds nochmal ohne probieren.
Aaaah, alles klar. Mehr wollte ich gar nicht wissen. Den Bug hab ich irgendwie nicht gefunden, obwohl ich lang gesucht hab.
Ja, in diesem Fall wären margin und padding vom Effekt her auch durchaus austauschbar.
Ja, aber für spätere Sachen wollte ich das geklärt haben :-)
Danke für deine Hilfe!
lg
jon
-
-
div#LoginBg
{
/* linke obere Ecke mittig positionieren */
position:absolute;
left: 50%;
top: 50%;/* Abstand negativ nach oben und links (halbe höhe, halbe breite) um absolute mitte des divs zu finden */
height:473px;
margin-top: -236px;
width: 630px;
margin-left: -315px;/* farbe, image blablabla */
background-color: #ffffff;
background-image:url(images/login/loginbg.jpg);
border:solid 1px black;
}versuche es doch mal mit diesem CSS