float in IE und Firefox

[dewil]

Ich habe eine Seite mit einer Überschrift-div, einer (auf der Homepage) bzw. zwei Menüleisten-divs (unter http://www.dewil.biz/visit/test.htm), einer Inhalts-div und einer footer-div. Die beiden Menüleisten habe ich in CSS mit float:left definiert, damit sie und der Inhalt nebeneinander unter der Überschrift beginnen. Der footer hat ein clear:both erhalten. Im IE 6.0 funktioniert das so, wie ich das haben möchte, in Netscape 7.1 und Firefox 1.0 aber beginnt die Inhalts-div unter den beiden Menüleisten.

Kann mir jemand sagen, warum das so ist und ob das so sein muss?

dewil

[Ingo Turski]

Hi,

Du hast .text float ohne width gegeben. Verzichte hierfür auf float und setze die margins passend.

freundliche Grüße
Ingo

[Friedel]

Imho soll der Text, der mit class="text" klassifiziert ist, nicht umflossen werden. In dieser Kalsse solltest du also "float:left;" entfernen. Allerdings ist auch mir nicht klar, warum in den meisten Browsern den Text die Navigationsdivs nicht rechts umfließt. Die Darstellung, die ich für die korrekte halte, erscheint nur in IE 5 und IE 6 und in Opera 6. In Opera 5 wird der Text zwar an der richtigen Stelle dargestellt, aber die beiden Divs haben sehr viel Rand und man muss schon (horizontal)scrollen um den Text überhaupt zu sehen.

[Ingo Turski]

Hi,

Allerdings ist auch mir nicht klar, warum in den meisten Browsern den Text die Navigationsdivs nicht rechts umfließt.

wenn Du _mir_ schon antwortest, dann lies doch auch, was ich geschrieben hatte (war ja nun wirklich kurz). ;-)

Die Darstellung, die ich für die korrekte halte, erscheint nur in IE 5 und IE 6 und in Opera 6.

Wenn man unvollständige Zuweisungen macht, gibt es keine korrekte Darstellung, sondern es wird den Browsern überlassen, welchen Wert sie hier z.B. für width einsetzen. Wobei ich die Interpretation des Firefox am "korrektesten" halte, denn ein Block-Element ohne Breitenangabe hat per default 100% des Elternelements und  kann (da es über float selbst aus dem Elemntenfluß genommen würde) nicht neben andere Elemente gesetzt werden.
Aber auch Firefox macht hier AFAIK Kompromisse, wenn der Inhalt dieses Elements noch neben den floatenden Elementen passen würde, was aber bei längerem Fließtext nicht der Fall ist.

freundliche Grüße
Ingo

[Friedel]

@Ingo: Ich habe nicht dir, sondern dewil geantwortet. Du hast ja gar nicht gefragt. Aber gelesen habe ich deine Antwort. Ich halte sie für sinnlos oder unverständlich (aber tatsächlich kurz).Wozu sollte dewil für die Klasse .text eine Breite angeben? Dieses Div soll doch keine feste Breite haben! Die Angaben für Margin sind korrekt.

[Friedel]

Übrigens ist es nicht Standard, dass ein DIV 100% Breite hat. Ein Browser erzeugt nach dem Standard einen automatischen Zeilenumbruch am Ende des Fensters. Welche Breite sollte dewil denn hier angeben? Se ergibt sich aus der Fensterbreite - Margin - Breite der beiden Navigationsdivs - deren Margins.

[dewil]

Übrigens ist es nicht Standard, dass ein DIV 100% Breite hat. Ein Browser erzeugt nach dem Standard einen automatischen Zeilenumbruch am Ende des Fensters. Welche Breite sollte dewil denn hier angeben? Se ergibt sich aus der Fensterbreite - Margin - Breite der beiden Navigationsdivs - deren Margins.

Ich hab das übrigens auch mit einer width-Angabe versucht, aber auch darauf haben Netcape und Firfox nicht in der gewünschten Weise reagiert - sie blieben UNTER den Menüleisten.

Bis auf Weiteres ohne neue Erkenntnis, leider

dewil

[dewil]

» Ich hab das übrigens auch mit einer width-Angabe versucht, aber auch darauf haben Netcape und Firfox nicht in der gewünschten Weise reagiert - sie blieben UNTER den Menüleisten.
»
» Bis auf Weiteres ohne neue Erkenntnis, leider
»
» dewil

Das war natürlich Blödsinn, was ich zuletzt geschrieben habe. Die width-Angabe hatte ich bei den Menüleisten ausprobiert. Eine width-Angabe beim Inhalts-div führt (bis width:600px) sowohl im IE als auch im FF zu einer Darstellung neben den Menüleisten. Aber da ich nicht weiß, was für eine Auflösung resp. Bildschirmbreite der Leser hat, möchte ich natürlich die gesamte Bildschirmbreite ausnutzen. Und wenn ich width:auto definiere, bleibt mein Problem bestehen.

dewil

[Webblob]

Hallo dewil,

Das war natürlich Blödsinn, was ich zuletzt geschrieben habe. Die width-Angabe hatte ich bei den Menüleisten ausprobiert. Eine width-Angabe beim Inhalts-div führt (bis width:600px) sowohl im IE als auch im FF zu einer Darstellung neben den Menüleisten. Aber da ich nicht weiß, was für eine Auflösung resp. Bildschirmbreite der Leser hat, möchte ich natürlich die gesamte Bildschirmbreite ausnutzen. Und wenn ich width:auto definiere, bleibt mein Problem bestehen.

wenn du die Tipps, die dir Ingo gegeben hat, zuletzt hier https://forum.selfhtml.org/?t=98622&m=601667, nicht richtig umsetzt, bzw. dich nicht mit der CSS 2 Spez. (z.B. unter http://edition-w3c.de/TR/1998/REC-CSS2-19980512/kap09.html#heading-9.5�) auseinandersetzt, ja dann kann man dir schwer bei der Lösung deines Problems helfen.

Die beiden Menü-Elemente (, die beide links floaten) müssen jeweils eine explizite width Angabe besitzen (z.B. je 120px). Das Inhalts-DIV braucht keine width Angabe, aber dafür einen Aussenabstand links (margin-left), der 'genug' Platz für die beiden Menü-Elemente lässt (bei dem Bsp. also mind. 240px).

Gruß Gunther

[dewil]

Hallo dewil,

wenn du die Tipps, die dir Ingo gegeben hat, zuletzt hier https://forum.selfhtml.org/?t=98622&m=601667, nicht richtig umsetzt, bzw. dich nicht mit der CSS 2 Spez. (z.B. unter http://edition-w3c.de/TR/1998/REC-CSS2-19980512/kap09.html#heading-9.5�) auseinandersetzt, ja dann kann man dir schwer bei der Lösung deines Problems helfen.

Gruß Gunther

@Gunther: Wenn du die Zeiten betrachtest, zu denen Ingo und ich die postings abgesetzt haben, wirst du verstehen, dass ich diese Tipps noch gar nicht umsetzen konnte.

Ich habe aber jetzt begriffen, was gemeint sein soll: Ich sollte gar nicht floaten, sondern 3 divs mit unterschiedlich großem Abstand vom linken Rand absolut positionieren. Mal ausprobieren.

Gruß
dewil

[Webblob]

Hallo dewil,

Ich habe aber jetzt begriffen, was gemeint sein soll: Ich sollte gar nicht floaten, sondern 3 divs mit unterschiedlich großem Abstand vom linken Rand absolut positionieren. Mal ausprobieren.

Neeiiin!
Die beiden Menü-DIVs sollen links floaten aber zwingend mit expliziter width Angabe.
Das Inhalt-DIV soll nicht floaten und keine Angabe zu width (auch nicht auto) haben. Es muss aber einen linken Aussenabstand vom Rand (margin-left) haben, der mindestens so groß ist, wie die beiden Menü-DIVs zusammen breit sind!

Gruß Gunther

[dewil]

Hallo Gunther,

Neeiiin!
Die beiden Menü-DIVs sollen links floaten aber zwingend mit expliziter width Angabe.
Das Inhalt-DIV soll nicht floaten und keine Angabe zu width (auch nicht auto) haben. Es muss aber einen linken Aussenabstand vom Rand (margin-left) haben, der mindestens so groß ist, wie die beiden Menü-DIVs zusammen breit sind!

Gruß Gunther

Sorry, ich glaub, jetzt war ich doch etwas schwer von Begriff!!! Ist auch schon spät! Es ist schon lange her, dass ich jemanden so zu einem Gefühlsausbruch bewegt habe.

Ich will nicht nerven, aber warum beginnt jetzt (in der neuen Datei, s. o.) die Überschrift nicht in gleicher Höhe wie die Menü-DIVs?

Gruß
dewil

[Ingo Turski]

Hi,

Ich will nicht nerven, aber warum beginnt jetzt (in der neuen Datei, s. o.) die Überschrift nicht in gleicher Höhe wie die Menü-DIVs?

Du meinst in standardkonformen Browsern?!
Dieser Effekt kommt von den collapsing margins, die bei nicht-floatenden Elementen zusammenfallen sollen.

freundliche Grüße
Ingo

[dewil]

Hi,

Ich will nicht nerven, aber warum beginnt jetzt (in der neuen Datei, s. o.) die Überschrift nicht in gleicher Höhe wie die Menü-DIVs?
Du meinst in standardkonformen Browsern?!
Dieser Effekt kommt von den collapsing margins, die bei nicht-floatenden Elementen zusammenfallen sollen.

freundliche Grüße
Ingo

Vielen Dank für eure Hinweise. Beim nächsten Problem melde ich mich dann wieder!

dewil

[Ingo Turski]

Hi,

@Ingo: Ich habe nicht dir, sondern dewil geantwortet.

nein. Dazu hättest Du das Antwortformular unter dewils Posting nutzen müssen.

Aber gelesen habe ich deine Antwort. Ich halte sie für sinnlos oder unverständlich

Dann hast Du sie nicht verstanden bzw. Dich nicht mit dem CSS-Standard befaßt. Eine Angabe von float erfordert auch eine Angabe von width!

Wozu sollte dewil für die Klasse .text eine Breite angeben?

Genau deswegen - weil es so vorgeschrieben ist, wenn float verwendet wird.

Die Angaben für Margin sind korrekt.

Nicht wenn dewil (bitte mitlesen) meinem eingangs angegebenem Tip folgt:

Verzichte hierfür auf float und setze die margins passend.

Denn wenn .text nicht mehr floatet, braucht keine Weite mehr angegeben zu werden und das DIV nimmt sich den zur Verfügung stehenden Platz. Allerdings beginnt es dann am linken Fensterrand, was bei margin die Einbeziehung der floatenden Elemente erforderlich macht.

Übrigens ist es sehr wohl Standard, daß ein DIV 100% Breite hat, sofern es sich im Elementenfluß befindet, und genau dieser Umstand sorgt normalerweise für einen "Zeilenumbruch". Setze einmal ein DIV ohne Breitenangabe neben ein floatendes Element und gebe dem DIV einen Rahmen, dann siehst Du es selbst.

freundliche Grüße
Ingo