Hi,
Du verwendest hier eigentlich völlig unnötig negative margins und position:absolute
Die divs #horizon und #content brauchen das, um den Inhalt vertikal und horizontal zentriert zu platzieren.
das DIV #horizon benötigst Du doch garnicht dafür.
würde ich auch nicht zusammen mit float einsetzen.
floaten sollen doch die Elemente innerhalb der absolut positionierten Box
Aber das tun sie doch garnicht. Du hast die Breiten so angegeben, daß ein wirkliches floaten, d.h. Umbrechen bei kleinerem Fenster, nicht stattfindet.
Das überdenke ich noch mal, allerdings habe ich vor, das bei Vergößerung der Schriftgröße sich die Box nach unten ausdehnt (dann natürlich nicht mehr so ganz zentriert ist - leider)
wieso nicht? Die zentrierte Box hat feste Dimensionen und bleibt auch im IE zentriert, wenn die Inhalte der darin enthaltenen Boxen in diese passen. Das funktioniert in der Breite dann, wenn der Text umbrechen kann. In der Höhe hast Du freilich ein Problem, da sich die Höhe des umschließenden DIVs in standardkonformen Brosern nicht vergrößert. Wenn Du das flexibel willst, solltest Du vielleicht doch auf eine fste Höhe und vertikale Zentrierung vrzichten.
Wie schon gefragt - ich glaube der CSS-Theorie zufolge müßten beide Varianten korrekt sein - oder? - nur wie sag ich das den Browsern??
zumindest Mozilla stellt beide Versionen gleich dar.
Aber ich zeige Dir einmal eine Änderung der Version bad_ie.html, in der ich das DIV #horizon gelöscht und auf float verzichtet habe:
html, body {
width:100%; height:100%;
padding:0; margin:0;
font-family: Verdena, Helvetica, Arial, sans-serif;
}
#content {
width:799px; height: 480px;
position:absolute; top:50%; left:50%;
margin: -240px 0 0 -399px;
border: 1px solid #085194;
}
#bb {
width:242px;
position: absolute; top:0; left:0;
border:solid 1px red;
}
#tt{
width:409px;
position:absolute; top:20px; right:91px;
border:solid 1px green;
}
...
freundliche Grüße
Ingo