nicht angemeldet
IE: Float-Elemente und umfließender Text mit fester Breite
Hallo SELFHTML-Gemeinde,
Wieder mal muss ich traurig ansehen, wie sich der IE anders verhält, als ein Browser(TM). Das Problem:
Ich habe einen Fließtext fester Breite (500px) in einer Seite fester Breite (600px). In diesem Fließtext soll nun eine Info-Box (Breite 200px) mittels Float aus dem Textfluss genommen werden.
An dieser Stelle bleiben also nur noch 400px für den Fließtext übrig. Opera und Firefox kürzen nun (korrekterweise?) den Fließtext, so das dieser um die Box fließt. IE (6/7) hingegen beharrt auf der Größe von 500px und stellt folglich den Fließtext unterhalb der Box dar. (IE 5.5 stellt erweitert einfach die Seitenbreite von 600px, und erzwingt so die 500px Textweite.)
(Beispiel-Seite)
Das Problem könnte behoben werden, indem ich dem Fließtext keine Breite zuweise. Allerdings möchte ich diese Breitenangabe nur ungern aufgeben, da dies im Original-Dokument eine relative Größe ist (40em), die mit der Schriftgröße skalierbar sein soll.
Kennt jemand eine Lösung, oder einen Workaround für den IE?
Ciao,
David //aka DeWitt
--
selfcode ie:% fl:( br:< va:) ls:} fo:| rl:( n4:° ss:) de:] js:| ch:] sh:( mo:| zu:(
<< Life is just a moment in eternity, yet every life echoes there >>
selfcode ie:% fl:( br:< va:) ls:} fo:| rl:( n4:° ss:) de:] js:| ch:] sh:( mo:| zu:(
<< Life is just a moment in eternity, yet every life echoes there >>
-
Ahoi DeWitt,
Wieder mal muss ich traurig ansehen, wie sich der IE anders verhält, als ein Browser(TM).
normal :)
Ich habe einen Fließtext fester Breite (500px) in einer Seite fester Breite (600px). In diesem Fließtext soll nun eine Info-Box (Breite 200px) mittels Float aus dem Textfluss genommen werden.
mkay. also nur damit ichs richtig ferstehe:
<div id="seite">
<div id="fließtext">
...bliblablub
<div id="infoBox">
info info info...
</div>
blablablub....
</div>
</div>An dieser Stelle bleiben also nur noch 400px für den Fließtext übrig.
wenn es so ist wie ichs verstanden habe nein. sondern nur 300 (500-200)
MfG
-
wenn es so ist wie ichs verstanden habe nein. sondern nur 300 (500-200)
äh... ja... 8-]
Ciao,
David //aka DeWitt--
selfcode ie:% fl:( br:< va:) ls:} fo:| rl:( n4:° ss:) de:] js:| ch:] sh:( mo:| zu:(
<< Life is just a moment in eternity, yet every life echoes there >>
-
-
Hallo David
Opera und Firefox kürzen nun (korrekterweise?) den Fließtext, so das dieser um die Box fließt. IE (6/7) hingegen beharrt auf der Größe von 500px und stellt folglich den Fließtext unterhalb der Box dar.
Dieser Effekt kommt durch das vom IE verwendete Layoutkonzept zustande. (Der Internet Explorer, ein Universum für sich)
Kennt jemand eine Lösung, oder einen Workaround für den IE?
Gib nicht den p-Elementen selbst die Breite sondern einem umschließenden Element.
Auf Wiederlesen
Detlef--
- Wissen ist gut
- Können ist besser
- aber das Beste und Interessanteste ist der Weg dahin! -
Hallo,
Wie sich mir das darstellt hast du mehrere Container. Die Du nebeneinander haben moechtest. Einmal die Absaetze (<p>) die du auf 500 Pixel breite festlegst und einmal eine Box (auch ein<p>), die Du auf 200 Pixel Breit festsetzt und floaten laesst.
Das Ganze moechtest du in einem Container (<body>) mit einer Breite von 600 Pixeln nebeneinander platzieren. Hm. Also ehrlich: mich wundert, dass die anderen Browser das machen.
Setz doch mal deinen Doctype auf Strict und schau ob die sich immer noch so merkwuerdig verhalten. (Kann ich hier leidernicht probieren) Denn laut meinen bescheidenen Mathematikkenntnissen ist 500 + 200 = 700 und 700 ist 100 mehr als 600. Wie sollte das nebeneinander passen?
Fuer mich verhaelt sich hier der IE ganz normal.
Du solltest mal die Strukturierung Deiner Seite ueberdenken. Nimm die Breitenangabe aus den <p> und umhuelle das ganze mit einem 600px breiten DIV.
Ganz verstanden habe ich aber noch nicht warum du mit festen Pixeln arbeitetest, weil das original mit em arbeitet... ?
-
Setz doch mal deinen Doctype auf Strict und schau ob die sich immer noch so merkwuerdig verhalten.
Ja, das macht keinen Unterschied.
Denn laut meinen bescheidenen Mathematikkenntnissen ist 500 + 200 = 700 und 700 ist 100 mehr als 600. Wie sollte das nebeneinander passen?
Fuer mich verhaelt sich hier der IE ganz normal.Hmm, ich würde sagen, dass sie die Float-Eigenschaft bei Konfliktsituationen anders interpretieren: Opera und FF kürzen den Inhalt des umfließenden Containers (und lassen den Container selbst an seinem Platz), während der IE eben den Container verschiebt. Ich hatte gehofft, dass es irgendeine Möglichkeit gäbe, dem IE das Verhalten der anderen Browser "anzuerziehen".
Du solltest mal die Strukturierung Deiner Seite ueberdenken. Nimm die Breitenangabe aus den <p> und umhuelle das ganze mit einem 600px breiten DIV.
Das werde ich wohl auch machen.
Ganz verstanden habe ich aber noch nicht warum du mit festen Pixeln arbeitetest, weil das original mit em arbeitet... ?
In der Beispielseite habe ich Pixel verwendet, weil dann das Problem ersichtlicher wird.
In der Original-Seite ist das ganze etwas komplizierter: Mein Ansatz war, ein Stylesheet für typographische Formattierung, und eines für das Layout zu entwerfen. Somit wollte ich dem Fließtext eine größenabhängige Breite geben (eben 40em), damit der User bei Änderung der Browser-Schriftgröße immer einen gut lesbaren Text erhält.
Parallel dazu habe ich allerdings ein pixelgenaues Layout gewählt. (In gewisser Weise sind die beiden Ansätze natürlich ein Widerspruch in sich, aber sei's drum - irgendwo muss man immer Kompromisse eingehen ;).)
Normalerweise ist das ganze kein Problem, da 40em bei normaler Schriftgröße problemlos in das Layout passen. Wenn nun aber ein Besucher z.B. im IE einen Schriftgrad "sehr groß" eingestellt hat, sind die 40em eben zusammen mit einer Float-Box mehr als die 680px, die im Layout vorhanden sind, und dann tauchen eben die o.g. Probleme auf.Aber sei's drum, der langen Rede kurzer Sinn - ich werde eben die Breitenangabe aus den <P>s rausnehmen.
Danke für die Hilfe :).
Ciao,
David //aka DeWitt--
selfcode ie:% fl:( br:< va:) ls:} fo:| rl:( n4:° ss:) de:] js:| ch:] sh:( mo:| zu:(
<< Life is just a moment in eternity, yet every life echoes there >> -
Hallo Steel
Fuer mich verhaelt sich hier der IE ganz normal.
Nein, float nimmt ein Element aus dem Elementfluss. Es hat damit keinen Einfluss auf umschließende oder nachfolgende Blockelemente. Lediglich Fließtext und Inlineelemente werden verdrängt bzw. umfließen es, Blockelemente behalten ihre Position _und_ Größe bei. (Floats) Nur Elemente im Block formatting context werden durch das gefloatete Element beeinflusst.
IE verhält sich da allerdings etwas anders: hasLayout.
Auf Wiederlesen
Detlef--
- Wissen ist gut
- Können ist besser
- aber das Beste und Interessanteste ist der Weg dahin!
-