Mike: Valides CSS wird in Browsern verschieden dargestellt

Beitrag lesen

Hallo,

ich hab gestern schonmal gepostet - dort wurden einige Möglichkeiten zur Problembeseitigung gepostet, die ich auch alle durchgeführt habe... aber leider ohne wirklichen Erfolg.

Mein Problem: Eine Seite, die ein simples Layout aus <DIV>-Elementen und CSS enthält, wird im IE korrekt angezeigt und in den anderen Browsern verschiebt sich alles. Wenn ich es nun auf die anderen Browser ausrichte, ist es im IE verschoben... dabei sind das eigentlich ganz simple Sachen... exakte Ausrichtung mehrer DIV-Elemente ... mehr nicht.

Und mal nebenbei erwähnt, ich bin genau nach dieser Anleitung vorgegangen:http://selfhtml.teamone.de/css/eigenschaften/positionierung.htm#position. Mehr als das, was hier beschrieben steht, kommt auf der Seite und im CSS auch nicht vor... nur ein paar andere Definitionen für h1, p, table, a, usw.

Wie bekomme ich das denn nun hin, dass alle gängigen Browser (IE, Netscape, Opera, Mozilla) das korrekt interpretieren?

Hier die Seite nochmal: http://www.jugendflirtchat.de/admin

Hier ein Auszug aus der design.css - meiner CSS-Datei. Es sind einmal der body und 3 div-elemente festgelegt. Diese DIV-Elemente dienen im Prinzip nur als farbliche Rechtecke in bestimmter Grösse.

Vielleicht kann mir ja einer weiterhelfen... erst wird man davon überzeugt, von alten Table-Layouts die Finger zu lassen und dann muss man feststellen, dass mit CSS nix klappt, wie es soll... *grummel* <= ironisch gemeint ;)

body {
background-color: #dcdcdc;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #336699;
margin-top: 0;
margin-left: 0;
padding: 0;
}

#layout1 {
position: absolute;
top: 0px;
left: 0px;
width: 10px;
height: 100%;
z-index: 1;
background-color: #666666;
}

#layout2 {
position: absolute;
top: 0px;
left: 10px;
width: 100%;
height: 20px;
z-index: 2;
background-color: #666666;
}

#layout3 {
position: absolute;
top: 18px;
left: 10px;
width: 100%;
height: 60px;
z-index: 3;
background-color: #cccccc;
}