nicht angemeldet
Problem float: left/right mit IE9
0 
Gunnar Bittersmann
0 0 0
0
Problem float: left/right mit IE9
Moin,
ich schmeiß einfach mal ein einfaches Beispiel in den Raum, welches mit IE7 richtig aussieht, IE9 (und IE8 ebenfalls) jedoch nicht. Man beachte die Position der roten, linken Box:
Hier der Code dazu:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
.Right
{
width: 200px;
border: 1px solid green;
float: right;
clear: right;
}
.Left
{
width: 50px;
border: 1px solid red;
float: left;
}
</style>
</head>
<body>
<div class="Right">
RightContent [...]
</div>
<div class="Right">
RightContent [...]
</div>
<div class="Right">
RightContent [...]
</div>
<h1>Header</h1>
<div class="Left">Test Test Test</div>
<p>
Main Content [...]
</p>
</body>
</html>
Täusche ich mich oder macht der IE8/IE9 hier was falsch? Und wie mache ich's für beide richtig? Habe zwar schon mit umschließenden <div> hantiert, aber noch keine Idee für eine Lösung...
Danke für eure Hilfe,
Julian
-
@@Julian1986:
nuqneH
ich schmeiß einfach mal ein einfaches Beispiel in den Raum, welches mit IE7 richtig aussieht, IE9 (und IE8 ebenfalls) jedoch nicht.
Wo kann man sich das ansehen?
Qapla'
--
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain)-
Wo kann man sich das ansehen?
Also ich seh die Bilder....!?
Gruß,
Julian-
Wo kann man sich das ansehen?
Ahh, gecheckt was du meinst, sorry...
Guckst du hier: HTML Beispiel-
Om nah hoo pez nyeetz, Julian1986!
Guckst du hier: HTML Beispiel
Der Validator hat was anzumerken.
Matthias
--
1/z ist kein Blatt Papier.
-
Der Validator hat was anzumerken.
Jau (das kommt wenn man sich mal schnell was zusammen tippert) - Fehler korrigiert.
Ändert allerdings nichts am Verhalten.Grüße,
Julian
-
-
@@Julian1986:
nuqneH
Guckst du hier: HTML Beispiel
Täusche ich mich oder macht der IE8/IE9 hier was falsch?
Natürlich táuschst du dich. Wenn du dir das in anderen Browsern ansiehst, merkst du, dass diese sich ebenso verhalten wie IE8/IE9. Dann wird wohl kaum das Verhalten des IE7 das richtige sein.
Bei der Beschreibung der 'float'-Eigenschaft [CSS21 §9.5.1, CSS2@de §9.5.1] findest du diegenauen Regeln, die das Verhalten von Floats steuern. Interessant dürfte Nummer 5 sein. (Nummer 5?)
Habe zwar schon mit umschließenden <div> hantiert, aber noch keine Idee für eine Lösung...
Ein umschließendes 'div' (in HTML5 auch gern 'aside' o.ä.) für die rechten Inhalte sollte doch eine Idee für eine Lösung sein.
Und benenne Klassen nie nach ihrer derzeit gewünschten Darstellung! Also nicht "Left"/"Right".
Qapla'
--
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain)-
Bei der Beschreibung der 'float'-Eigenschaft [CSS21 §9.5.1, CSS2@de §9.5.1] findest du diegenauen Regeln, die das Verhalten von Floats steuern. Interessant dürfte Nummer 5 sein. (Nummer 5?)
Auch auf die Gefahr hin, mich zu verzetteln (zumal mir das "in Worte fassen" grad schwer fällt): Mein Verständniss des float und clear ist (und daran haben die, trotzdem hilfreichen Links nichts geändert), dass wenn ich ein float-left Element und ein float-right Element habe, beide soweit oben wie möglich positioniert werden, und umfließender Text quasi in der Mitte durchläuft. Gibt es mehrere float-Elemente auf der selben Seite, reihen diese sich daneben (bzw. darunter) ein. Ein clear wirkt sich immer nur auf die entsprechende Seite aus. Nun direkt auf's Beispiel bezogen: Für die rechten Boxen ist nur float: right und clear: right gesetzt, also sollten alle float:left Elemente davon ja vollkommen unbeeindruckt sein.
Warum also richten aktuelle Browser das float: left Element trotzdem auf Höhe des letzten float: right Element aus, und nicht so hoch wie möglich (in dem Beispiel ist es direkt nach der Überschrift deklariert, also sollte es auch direkt nach der Überschrifft erscheinen).
Der Standard legt scheinbar nur fest, wie es sich für gleichseitige float Elemente verhält, nicht bei float:left Elementen und float:right Elementen in Kombination.Ein umschließendes 'div' (in HTML5 auch gern 'aside' o.ä.) für die rechten Inhalte sollte doch eine Idee für eine Lösung sein.
Ja, aber dann nicht passt es im IE7 nicht mehr - ich bin kein Fan von Sonderlösungen für einzelne Kandidaten. Aber in diesem Fall geht es wohl nicht anders.
Und benenne Klassen nie nach ihrer derzeit gewünschten Darstellung! Also nicht "Left"/"Right".
Logo - aber in diesem Beispiel ist es genau dass was die Klassen ausdrücken sollten.
Grüße,
Julian-
Hi,
Warum also richten aktuelle Browser das float: left Element trotzdem auf Höhe des letzten float: right Element aus,
Weil es erst nach den nach Rechts gefloateten Elementen im Dokument steht.
MfG ChrisB
--
RGB is totally confusing - I mean, at least #C0FFEE should be brown, right? -
Om nah hoo pez nyeetz, Julian1986!
Ein umschließendes 'div' (in HTML5 auch gern 'aside' o.ä.) für die rechten Inhalte sollte doch eine Idee für eine Lösung sein. Ja, aber dann nicht passt es im IE7 nicht mehr - ich bin kein Fan von Sonderlösungen für einzelne Kandidaten. Aber in diesem Fall geht es wohl nicht anders.
Dann ignoriere den IE7. Es ist nicht möglich, ein Layout für eine Internetseite zu erstellen, das in jedem Browser gleich aussieht. Eine Seite sollte in möglichst vielen Browsern bedienbar sein.
suche nach "floatboxen einschließen"
Und benenne Klassen nie nach ihrer derzeit gewünschten Darstellung! Also nicht "Left"/"Right". Logo - aber in diesem Beispiel ist es genau dass was die Klassen ausdrücken sollten.
In deiner echten Seite wird es hoffentlich nicht so sein.
Matthias
--
1/z ist kein Blatt Papier.
-
-
-
-
Om nah hoo pez nyeetz, Julian1986!
Wo kann man sich das ansehen?
Also ich seh die Bilder....!?
Versteckte Kamera? Hast du das Zitat überhaupt gelesen? Wir wollen das Problem nachvollziehen können. Anhand der Bilder kann man sagen: sieht fehlerhaft aus. Mehr nicht.
erste (und auch einzige) Vermutung (falls du keine Kooperation zeigst): Quirksmode
Matthias
--
1/z ist kein Blatt Papier.
-
-
-
Hi,
schalte mal nicht den "Dokumentmodus", sondern den "Browsermodus" um.
Grüße
- Steffen
-
Moin
schalte mal nicht den "Dokumentmodus", sondern den "Browsermodus" um.
Aber entscheident ist ja die Render-Engine, und die wird ja schließlich mit dem Dokumentmodus gewechselt (der Browsermodus ändert ändert ja lediglich den UA String und das Parsing der Conditional Comments - oder hab ich da was missverstanden?).
Der Vollständigkeit halber - alle Kombinationen probiert: Sobald 7er Tridentengine (Dokumentmodus) gewählt, ist's richtig, in allen anderen Fällen falsch.
-
Om nah hoo pez nyeetz, Julian1986!
Da die Seite im FF4, Op11, Chr10 und Saf5 wie im IE9 angezeigt wird, ist die fehlerhafte Darstellung im IE7 zu suchen.
Ein Blick in den Quelltext zeigt, dass die genannten Browser es richtig machen. Das div.left beginnt auf derselben Höhe wie das letzte div.right. left und right sind unsinnige Klassenbezeichner. Benenne Klassen nach der Funktion und nicht nach der gegenwärtig gewünschten Darstellung.
Matthias
--
1/z ist kein Blatt Papier.
-