Lisa Marten: Positionierung

hallo..
ich habe folgenden html code:

<head>
<link href="test.css" rel="stylesheet" type="text/css">
</head>

<body>
<div id="all">
<div id="kopf">banner</div>
<div id="menu">menu</div>
<div id="inhalt">inhalt</div>
<div id="stats">stats</div>
</div>
</body>
</html>

und dazu folgende css datei:

body {
 width:100%;
 height:100%;
 padding:0;
 margin:0;
}

#all {
 position:fixed;
 top:0px;
 left:0px;
 right:0px;
 bottom:0px;
 height:100%;
 width:100%;
 padding:0;
 margin:0;
}

#kopf {
 position:fixed;
 top:0px;
 left:0px;
 background:#000000;
 width:100%;
 height:100px;
}

#menu {
 position:absolute;
 top:100px;
 left:0px;
 background:#006666;
 height:300px;
 width:150px;
}

#inhalt {
 position:absolute;
 left:150px;
 right:150px;
 top:100px;
 background:#990000;
 height:100%;
 width:auto;
}

#stats {
 position:absolute;
 right:0px;
 top:100px;
 background:#999900;
 height:300px;
 width:150px;
}

Im Netscape sieht es genauso aus, wie ich es haben will. Im IE allerdings, ist der Inhalt zu lang und zu schmal.. Kann mir einer sagen, woran das liegt?

  1. hallo

    du verschachtelst div's und arbeitest mit Prozentangaben in Höhe und Breite. Das mag der IE überhaupt nicht, in Prozentrechnung ist er eine glatte Null.

    Problem ist, dass die Browser den Begriff "Breite" und "Höhe" ganz unterschiedlich definieren. Beim einen Browser ist die Breite LüP (Länge über Puffer, wie die Bahner sagen würden), beim anderen Browser kommt der Puffer extra.

    Oder um mit CSS zu sprechen: margin, border, padding und width ergeben bei dem einen Browser die Summe X, bei dem anderen die Summe Y.

    LG Kalle

    1. hallo

      du verschachtelst div's und arbeitest mit Prozentangaben in Höhe und Breite. Das mag der IE überhaupt nicht, in Prozentrechnung ist er eine glatte Null.

      Und da kann man nichts gegen machen? Es muss doch möglich sein, eine Lösung dafür zu finden. Mit Pixelangaben kann ich j auch nicht arbeiten, weils ja variabel bleiben soll bei unterschiedlichen Auflösungen..

      1. hallo

        Und da kann man nichts gegen machen? Es muss doch möglich sein, eine Lösung dafür zu finden. Mit Pixelangaben kann ich j auch nicht arbeiten, weils ja variabel bleiben soll bei unterschiedlichen Auflösungen..

        Probiere mal rum, indem du jedem der verschachtelten div einen border:1px solid #000 und einen Textinhalt gibst. Da kannst du sehen, wie unterschiedlich die Browser Größe und Abstand handhaben.

        Ich habe den Gott IE immer mal wieder gnädig stimmen können mit solchen Gebeten wie
        <!--[if IE]><style type="text/css">
          @media screen {
            html, body {
              height: 100%; overflow-y: hidden;
            }
            #scrollbereich {
              width:100%; height: 100%; overflow: auto; padding-left:120px;
            }
            #inhalt {
              position: static;
            }
          }
        </style><![endif]-->

        Habe inzwischen aber die Faxen dicke und verwende the good old <table>. Das kann jeder Browser.

        Kalle

        1. Hallo Kalle,

          Habe inzwischen aber die Faxen dicke und verwende the good old <table>. Das kann jeder Browser.

          Wieso denn das?

          http://de.selfhtml.org/css/layouts/mehrspaltige.htm#kopf_fuss

          Gruß Gernot