• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Float Kompatibilitätsmodus IE9 Problem

P

plampe85

Neues Mitglied
Hallo,

ich hab ein kleines Verständnisproblem mit dem CSS Befehl *float* und dem Kompatibilitätsmodus des IE9 .

Nehmen wir mal an ich habe eine Internetseite mit 2 farbigen DIV Boxen:

html:
<body>
<div id="box1"></div>
<div id="box2"></div>
</body>

css:
#box1 {
height: 280px;
width: 313px;
float: left;
background-color: #F00;
}
#box2 {
height: 280px;
width: 313px;
background-color: #6F0;
}

Nach meinem Wissen (Achtung Anfängerwissen) positioniert sich die Box2 durch den "float:left" Befehl unter die Box1. Da beide die selben Größen haben, ist die Box 2 nicht mehr sichtbar, da sie ja vollständig verdeckt wird. Das war bei jedem Browser auch der Fall (Chrome Firefox Opera IE9). Doch dann entdeckte ich diesen Kompatibilitätsmodus Knopf. Wenn ich diesen Aktiviere rutscht die Box2 neben der Box1.

Meine Fragen:
Ist das ein Bug vom IE8 ( Der Komp. Modus vom IE9 emuliert ja frühere IE Versionen)?
Und wenn ja, wie kann ich diesen verhindern?
Wenn es sich nicht um ein Bug handelt stellt sich die Frage was ich falsch mache?

Ich bedanke mich schonmal im Voraus, für Antworten
Und entschuldige mich wenn diese Thema schon hier besprochen worden ist und ich es nicht hier gefunden habe.


​
 
Ein float führt nicht zum Verdecken anderer Elemente, nur zum Verdrängen. Zum Verdecken müsstest du schon absolut positionieren. (Oder mit float und negativem margin arbeiten oder so.)
 
Danke für die Info.

Nur warum wird im meinem Bsp dann die Box 2 von der Box 1 verdeckt. Sry wenn ich mich bisschen Schwerfällig anstelle
 
Wohl weil dein viewport zu klein ist. Zieh dein Fenster etwas weiter auf oder stell die Grösse deiner beiden Container mal auf 100px.
 
Ich hab jetzt mal für die erste box 100px in die höhe eingestellt. Für die 2 Box habe ich 200px höhe eingestellt. Wenn ich nun nicht float:left für die Box1 einstelle, so wird die 2 Box mit seinen 200px unter die 1 Box positioniert. Mit float:left sehe ich die 1Box und nur 100px von der Box2. Also sieht es für mich so aus als wenn sich die 2 Box unter die 1 Box schiebt, und die ersten 100px von Box2, von der Box1 verdeckt wird.

Sry steh wohl voll auf dem Schlauch. Nur kann ich das Problem mit dem Kompatibilitätsmodus des IE9 nicht lösen wenn ich solche grundlegende CSS Befehle falsch interpretiere.

Danke nochmals für eure Zeit.

<head>
<style type="text/css">#box1 {
background-color: #F00;
height: 100px;
width: 100px;
float: left;
}
#box2 {
background-color: #0F0;
height: 200px;
width: 100px;
}
</style>
</head>


<body>


<div id="box1"></div>
<div id="box2"></div>


</body>
 
Hallo,

stell die Seite mal online und teil den Link mit. Ich vermute das du uns einige css-Anweisungen unterschlägst, die das Verhalten beeinflussen. Mit deiner Beschreibung und deinen Quellcodeschnipseln ist nicht viel anzufangen.

Gruss

MrMurphy
 
Hallo MrMurphy

und danke für deine Zeit!

Es fehlt nur der <html> </html> Tag. Mehr Tags und CSS gibt es nicht.

Also :

<html>
<head>
<style type="text/css">#box1 {
background-color: #F00;
height: 100px;
width: 100px;
float: left;
}
#box2 {
background-color: #0F0;
height: 200px;
width: 100px;
}
</style>
</head>


<body>


<div id="box1"></div>
<div id="box2"></div>


</body>
</html>

Kann man so im ein Texteditor hineinkopieren und als Bsp.: index.html abspeichern. Ich hab ja ein grundlegendes Verständnisproblem mit dem floaten. Also nicht bezogen auf ein konkretes Webseiten-Beispiel

Die eigentliche frage ist die:

Wenn ich nun diese Seite in den Browsern: Firefox Safari Chrome öffne verdeckt Box1, 100 Pixel von Box2.

Jetzt das ABER:
Beim IE9 (mit Kompatibilitätsmodus) und Opera(gerade festgestellt das Opera das auch so darstellt) steht die Box2 neben die Box1. Wie kann das sein. Welcher Browser interpretiert das also nun richtig. Und wie verhindere ich das es unterschiedlich dargestellt wird.
 
Zuletzt bearbeitet:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben