nicht angemeldet
Wer hat Recht, IE oder Firefox
0 0 0 0
Wer hat Recht, IE oder Firefox
habe d'ehre
Gegeben ist:
<body> mit Hintergundfarbe z.B. blau
<div class="zentriert"> mit Hintergrundgrafik (weiss + schmaler farbiger Randbalken rechts - 10px hoch, 922px breit)
links floatender <div> innerhalb "zentriert" fuer Literaturtipps und Unternavigation
rechts floatender <div> innerhalb "zentriert" fuer Linkliste und Seminartermine
Inhalt des floatenden <div> laenger als der Text im zentrierten <div>
CSS valide, HTML valide
Reaktion:
Firefox zieht den weissen Hintergund nicht mit und laeuft mit dem Floatingtext in den farbigen body
IE zieht den weissen Hintergrund bis an das Ende des Floatingtext
Welches Verhalten ist nun eigentlich korrekt?
Wie koennte ich dem Firefox das Verhalten des IE beibringen. (min-height war nicht erfolgreich)
Nachfolgend CSS und HTML-Struktur
CSS
div.rand {width:922px;min-height:10em;margin:auto;border-top:1px solid #000000;border-left:4px solid #ba002e;border-right:4px solid #ba002e;border-bottom:1px solid #000000;}
div#pageLayout {width:910px;margin:0px 0px 0px 0px;padding:60px 0px 70px 12px;}
div#pageRechtsFloat {width:167px;float:right;margin:132px 13px 0px 0px;background-color:#ffffff;padding-bottom:12px;}
div#pageLinksFloat {width:229px;min-height:25em;float:left;}
div.pageText {width:459px;margin:150px 0px 0px 253px;}
(Der Hintergrund bei "zentriert" wird via PHP geschrieben, da fuer jede Seite unterschiedlich.)
HTML
<body><div class="zentriert">
<!-- Beginn graphischer Layoutbereich --><div id="pageLayout">
<!-- Beginn rechter FLoatingbereich --><div id="pageRechtsFloat">
irgendwelcher Inhalt
<!-- Ende rechter Floatingbereich --></div>
<!-- Beginn linker FLoatingbereich --><div id="pageLinksFloat">
irgendwelcher Inhalt
<!-- Ende linker Floatingbereich --></div>
<div class="pageText">
irgendwelcher Inhalt
</div>
<!-- Ende graphischer Layoutbereich --></div>
</div></body>
man liest sich
Wilhelm
-
Tachchen!
Wenn ich in dem ganzen Text die Frage richtig verstanden habe, dann sollte
clear:both für pageText das gewünschte Ergebnis bringen.Gruß
Die schwarze Piste
--
ie:{ fl:( br:^ va:) ls:# fo:) rl:( n4:& ss:{ de:] js:| ch:? mo:) zu:$
Smartbytes Webdesign in Oberhausen-
habe d'ehre
Wenn ich in dem ganzen Text die Frage richtig verstanden habe, dann sollte
clear:both für pageText das gewünschte Ergebnis bringen.Daa wuerde der Text unter den floatenden Elementen beginnen.
Die Frage war eigentlich klar: Welcher Browser verhaelt sich richtig?
man liest sich
Wilhelm
-
-
Hi,
Welches Verhalten ist nun eigentlich korrekt?
das wagst Du allen Ernstes zu fragen? ;-)
Aber wozu haben wir das neue Kapitel CSS-basierte Layouts, wenn nicht zur Beantwortung solch typischer Anfänger-/Umsteiger-Fragen.
http://de.selfhtml.org/css/layouts/mehrspaltige.htm#kopf_fuss: "Über die CSS-Eigenschaft clear der Fußzeile wird der Umfluss (float) der seitlich platzierten Elemente aufgehoben, was z.B. bei Verwendung eines Seitenhintergrundes erforderlich sein kann"freundliche Grüße
Ingo-
habe d'ehre
Hi,
Welches Verhalten ist nun eigentlich korrekt?
das wagst Du allen Ernstes zu fragen? ;-)Wieso ist es definitiv immer ausgeschlossen, dass mal der IE etwas richtig macht? Entschuldige, ich kann nicht alle Specs auswendig runterbeten.
Aber wozu haben wir das neue Kapitel CSS-basierte Layouts, wenn nicht zur Beantwortung solch typischer Anfänger-/Umsteiger-Fragen.
Der Seitenhieb musste jetzt sein, oder? :-( Entschuldige, dass ich ueberhaupt gefragt habe. Dies war vielleicht meine fuenfte Frage seit diversen Jahren. ;-)
"Über die CSS-Eigenschaft clear der Fußzeile wird der Umfluss (float) der seitlich platzierten Elemente aufgehoben, was z.B. bei Verwendung eines Seitenhintergrundes erforderlich sein kann"
Danke, der Tipp war zielfuehrend. Auf die einfache Idee mit einem leeren Abschluss-div bin ich in meiner offensichtlich zu komplizierten Denkweise nicht gekommen.
man liest sich
Wilhelm-
Hi,
Aber wozu haben wir das neue Kapitel CSS-basierte Layouts, wenn nicht zur Beantwortung solch typischer Anfänger-/Umsteiger-Fragen.
Der Seitenhieb musste jetzt sein, oder? :-( Entschuldige, dass ich ueberhaupt gefragt habe. Dies war vielleicht meine fuenfte Frage seit diversen Jahren. ;-)
ging ja nicht gegen Dich persönlich und ich schrieb auch extra noch Umsteiger. Denn es ist eine wirklich häufige gestellte Frage von Leuten, die sich erstmals an CSS-Layouts wagen und Elemente positionieren; ob nun über float oder position:absolute - in beiden Fällen wird das Element aus dem Elementenfluß genommen, was in standardkonformen Browsern eben diesen Effekt bewirkt.
Da Du float verwendet hast, kannst Du den Elementenfluß wiederherstellen; bei position:absolute wäre dies nicht der Fall. Dies ist einer der Gründe, weshalb ich float stets vorziehe, wenn ich die Alternative habe.Aber ein paar Tips zur Beseitigung von Dir noch nicht aufgefallenen Problmen kann ich Dir noch geben. ;-)
body { margin:0; padding:0; text-align:center; } div.rand { text-align:left; }bringt ein paar px mehr Platz für kleine Fenster und zentriert in IE5.x.
* html div.rand { height:10em; } * html div#pageLinksFloat { height:25em; }min-height für IE.
div#pageLayout, div.pageText { width:auto; }
kompensiert Box-Modell-Fehler in IE 5.x - weniger ist oft mehr.freundliche Grüße
Ingo-
habe d'ehre
Aber ein paar Tips zur Beseitigung von Dir noch nicht aufgefallenen Problmen kann ich Dir noch geben. ;-)
body { margin:0; padding:0; text-align:center; }
div.rand { text-align:left; }
> bringt ein paar px mehr Platz für kleine Fenster und zentriert in IE5.x. > > ~~~ * html div.rand { height:10em; } > * html div#pageLinksFloat { height:25em; }min-height für IE.
div#pageLayout, div.pageText { width:auto; }
kompensiert Box-Modell-Fehler in IE 5.x - weniger ist oft mehr.Danke. Werde ich mal in eine Kopie des Projektes einarbeiten. Auf den ersten Blick kann ich damit noch nicht viel anfangen. Aber da heute endlich mal schoenes Wetter herrscht, werde ich mich nachmittags mit den schoeneren Dingen des Lebens beschaeftigen. Da gehoert "Arbeit" definitiv nicht dazu. :-)
man liest sich
Wilhelm-
Hi,
Auf den ersten Blick kann ich damit noch nicht viel anfangen.
Rufe eine bisherige (am besten sehr kurze) Seite einfach mal im IE5.5 auf - sollte eigentlich fehlerhaft dargestellt werden. Wenn Du den IE 5.5 nicht hast, kannst Du auch testweise mal den Doctype entfernen und die Seite dann mit dem IE 6 aufrufen, was in etwa auf dasselbe hinausläuft.
freundliche Grüße
Ingo
-
-
-
-
-
Heißa, Wilhelm,
Firefox zieht den weissen Hintergund nicht mit und laeuft mit dem Floatingtext in den farbigen body
IE zieht den weissen Hintergrund bis an das Ende des FloatingtextEigenartig. Ich hatte damals eine rechts gefloatete Navigation, und wenn diese länger war als der Text, hat der Internet Explorer den Textbereich nicht verlängert, aber Firefox schon. Also genau umgekehrt.
Caramba!
Grüße aus Biberach Riss,
Candid Dauth (ehemals Dogfish)--
„Jemanden zu lieben bedeutet, ihn nicht zu erdrücken, auch wenn man es gerne wollte – aus Liebe.“ | Mein SelfCode
http://cdauth.de/
-
Hi,
Eigenartig. Ich hatte damals eine rechts gefloatete Navigation, und wenn diese länger war als der Text, hat der Internet Explorer den Textbereich nicht verlängert, aber Firefox schon. Also genau umgekehrt.
dann befand sie sich vielleicht in einem gefloateten Element?
freundliche Grüße
Ingo-
Heißa, Ingo,
Eigenartig. Ich hatte damals eine rechts gefloatete Navigation, und wenn diese länger war als der Text, hat der Internet Explorer den Textbereich nicht verlängert, aber Firefox schon. Also genau umgekehrt.
dann befand sie sich vielleicht in einem gefloateten Element?Die Navigation? Nein, sie war das gefloatete Element und befand sich in keinem.
Caramba!
Grüße aus Biberach Riss,
Candid Dauth (ehemals Dogfish)--
„Versuche niemals, jemandem eine Meinung zu bilden; erläutere ihm maximalerweise alle ausschlaggebenden Fakten, aus welchen er sich dann eine eigene Meinung bilden kann.“ | Mein SelfCode
http://cdauth.de/
-
-
-
Hallo zusammen,
welcher Browser recht hat, woran es liegt und wie man das Problem lösen kann, ist ja schon beantwortet worden. Der einzige Schönheitsfehler an der Lösung ist der zusätzliche, eigentlich unnötige HTML-Code. Daher haben sich mittlerweile ein paar Leute Gedanken darüber gemacht, wie man das Problem mit reinen CSS-Lösungen beheben kann.
Der Ansatz, den "positioniseverything" beschreibt, gibt dem übergeordneten Container, der auf die Größe seiner floatenden Kinder gestreckt werden soll, per :after ein clear:both
http://www.positioniseverything.net/easyclearing.html
Ein etwas neuerer Ansatz nutzt eine Stelle der CSS2.1-Spezifikation, die besagt, daß ein Container auch dann auf die Größe seiner floatenden Kinder gestreckt wird, wenn z.B. die overflow-Eigenschaft einen Wert ungleich visible hat:
http://www.sitepoint.com/blog-post-view?id=238086
Wenn man noch die Kommentare in den diversen Blogs (z.B. in http://annevankesteren.nl/archives/2005/02/clearing-floats) hinzuzieht, dann scheint folgender CSS-Code für den übergeordneten Container, der gestreckt werden soll, recht browserübergreifend zu funktionieren:
.clearfloat { overflow:auto; width:100%; /*oder andere sinnvolle Breitenangaben */ }Viele Grüße
Carsten-
Hi,
Der Ansatz, den "positioniseverything" beschreibt, gibt dem übergeordneten Container, der auf die Größe seiner floatenden Kinder gestreckt werden soll, per :after ein clear:both
sympatische Lösung wenn da nicht ein bestimmter Browser wäre..;-)
.clearfloat {
overflow:auto;
width:100%; /*oder andere sinnvolle Breitenangaben */
}Das funktioniert zwar ebenso wie die unschöne height-Angabe für den IE in dem Beispiel, ist aber untauglich, da es (in zu schmalen Fenstern) zu seiteninternen Scrollbalken führt. freundliche Grüße Ingo -- [[barrierefreie Webseitenerstellung](http://www.1ngo.de/web/) » [Suchmaschinenoptimierung](http://www.1ngo.de/web/seo.html) | [em?](http://www.1ngo.de/web/em.html)] ([Tanzschritte gesucht?](http://www.1ngo.de/tanz/);-)-
Hallo Ingo,
Der Ansatz, den "positioniseverything" beschreibt, gibt dem übergeordneten Container, der auf die Größe seiner floatenden Kinder gestreckt werden soll, per :after ein clear:both
sympatische Lösung wenn da nicht ein bestimmter Browser wäre..;-)Das hier war nur die Kurzform, um das Prinzip zu beschreiben.... ;-) In dem Artikel selbst wird natürlich ausführlich auf die diversen Probleme eingegangen.
Sobald der Container auch nur eine einzige Größenangabe besitzt, dann gibt's im IE sowieso kein Problem, weil er dann den Container sowieso ausdehnt (deswegen kam es ja überhaupt erst zu Wilhelms "wer hat recht?"-Frage).
Für die restlichen Fälle, gibt man dem IE ein height:1% mit und versteckt diese Angabe vor den anderen Browsern (daran denken: IE interpretiert height in der Regel wie min-height).
Die vollständige positioniseverything-Lösung sieht letzten Endes so aus:
.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .clearfix {display: inline-table;} /* Hides from IE-mac \*/ * html .clearfix {height: 1%;} .clearfix {display: block;} /* End hide from IE-mac */.clearfloat {
overflow:auto;
width:100%; /*oder andere sinnvolle Breitenangaben */
}> Das funktioniert zwar ebenso wie die unschöne height-Angabe für den IE in dem Beispiel, ist aber untauglich, da es (in zu schmalen Fenstern) zu seiteninternen Scrollbalken führt. Alles hat eine Kehrseite... ;-) Man könnte zumindest in modernen Browsern versuchen, den Scrollbalken mit min-height/min-width an geeigneten Stellen entgegenzuwirken. Viele Grüße Carsten -- [Doctype- Switch? Was is'n das?]( http://www.carsten-protsch.de/zwischennetz/doctype/)
-
-
Heißa, CarstenP,
Der Ansatz, den "positioniseverything" beschreibt, gibt dem übergeordneten Container, der auf die Größe seiner floatenden Kinder gestreckt werden soll, per :after ein clear:both
Das ist natürlich eine interessante Idee. Nur frage ich mich, wie ich das jetzt für den Internet Explorer hinbekomme. Gibt es eine Möglichkeit mit CSS1? (kann ich mir zumindest nicht vorstellen)
Caramba!
Grüße aus Biberach Riss,
Candid Dauth (ehemals Dogfish)--
„Verwende niemals einen Vorteil, den dir ein anderer verschafft hat, zu deinem eigenen Nutzen.“ | Mein SelfCode
http://cdauth.de/
-
Hallo Candid,
Das ist natürlich eine interessante Idee. Nur frage ich mich, wie ich das jetzt für den Internet Explorer hinbekomme. Gibt es eine Möglichkeit mit CSS1? (kann ich mir zumindest nicht vorstellen)
siehe https://forum.selfhtml.org/?t=106738&m=662041
Viele Grüße
Carsten
-
-