Einzelnen Beitrag anzeigen
  #1 (permalink)  
Alt 14.09.2011, 17:09
mitch mitch ist offline
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 14.09.2011
Beiträge: 1
mitch befindet sich auf einem aufstrebenden Ast
Standard Browser-Bug? Margin verschiebt äußeren Container!?

Hallo zusammen,

ich hab da einen seltsamen Fall vorliegen:

Innerhalb eines DIVs habe ich ein zweites DIV verschachtelt, in welchem ich einen Text eingebaut habe.

Nun wollte ich das innere DIV vom äußeren um hundert Pixel herabsetzen, per margin-top, was allerdings seltsamerweise dazu führt, das die Regel (margin) am äußeren DIV angewandt wird, das heißt es wandert der äußere Container um hundert Pixel runter, obwohl ich den inneren um hundert Pixel verschieben wollte.

Mir ist das ein Rätsel.

Und das komischste: wenn ich dem äußeren Container einen border gebe, (inline oder im Stylesheet macht da keinen Unterschied), dann klappt es plötzlich und der margin wird korrekt angewendet.

Ist das ein Bug? Es geschieht im Firefox sowie im Safari.

Ich poste im CSS Forum da die Symptomatik anscheinend mit CSS zu tun hat.

Weiß vielleicht jemand, was da los ist? Was mache ich falsch?

Code:
html {
    height:             100%;
}

body {
    margin:             0;
    padding:            0;
    font-size:          11px;
}

.bgWhite {
    background: #94d6f8;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#94d6f8), color-stop(20%,#ffffff));
    background: -webkit-linear-gradient(top, #94d6f8 0%,#ffffff 100%);
    background-repeat: no-repeat;
    height: auto;
}

#contentArea {
    -webkit-box-shadow:         inset 0 0 10px #888888;
    margin:                     0px auto;
    width:                      1024px;
    background-color:           #ffffff;
    -webkit-border-radius:      20px;
    margin-top:                 50px;
    display:                    block;
}
HTML-Code:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>navigator v0.1beta</title>
        <link rel="stylesheet" type="text/css" href="css/main.css" />
    </head>
    <body class="bgWhite">
        <div id="contentArea">
            <div style="margin-top:100px;">
                test
            </div>
        </div>
    </body>
</html>
Mit Zitat antworten
Sponsored Links