float, clear, padding und die Browser

[emu]

Hallo!

Bei meinem ewigen Projekt, dass grob gesagt alles richtig machen soll, was im Forum als richtig gesehen wird, habe ich vor kurzem den pixelgenauen Ansatz geändert und will nun fast komplett mit em und float definieren.

Nachdem Stefan Einspender mir heute schon grundsätzliches zum Thema float erklärt hat, bin ich jetzt auf ein Problem gestoßen, das alle mir verfügbaren, modernen Browser anders interpretieren:

div.logo {
float:left;
width:7em;
border:1px solid black;
padding:0.5em;
margin:0.5em;
}
div.ueberschrift {
float:left;
border:1px solid black;
padding:0.5em;
margin:0.5em;
}
div.navigation {
clear:left;
float:left;
width:7em;
border:1px solid black;
padding:0.5em;
margin:0.5em;
}
div.inhalt {
float:left;
border:1px solid black;
padding:0.5em;
margin:0.5em;
}

(Die ganze Datei gibt es unter http://members.24speed.at/dammerer/test/float3.html)

Der Mozilla rendert es so, wie ich es will:

<img src="http://members.24speed.at/dammerer/test/float_mozilla.gif" border=0 alt="">

(Mozilla 0.9.8, Windows 2000)

Der Opera hat sowohl in der Version 5 als auch in der Version 6 das Problem, dass er sich weigert, den Innenabstand (padding) für den ersten Bereich (Logo) korrekt darzustellen:

<img src="http://members.24speed.at/dammerer/test/float_opera.gif" border=0 alt="">

(Opera 6, Windows 2000)

Der Internet Explorer hat schließlich seine eigenen Vorstellungen, wie das komplexe float- und clear-Geflecht zu interpretieren ist. Der Boxmodell-Bug ist bei meinem Ansatz eher egal, denke ich.

<img src="http://members.24speed.at/dammerer/test/float_ie.gif" border=0 alt="">

(Internet Explorer 6, Windows 2000, darstellungsgleich mit Internet Explorer 5, Windows 98se)

Nund meine Fragen:
1)Welcher Browser hat recht?
2)Wie kann ich alle Browser auf Mozilla-Ansicht bringen?
3)Warum weigert sich der Opera beharrlich, den oberen Innenabstand des Logos richtig darzustellen? Wie kann ich ihm das beibringen?

Vielleicht wird meine Seite auch irgendwann einmal fertig? Wer weiß? :-)

Netscape 4 hat überhaupt recht eigene Vorstellungen wir man die Seite interpretieren soll - ich werde ihn mit @import aber "aussperren".

emu
[floate spielend]

[Kai Lahmann]

Der Mozilla rendert es so, wie ich es will:

<img src="http://members.24speed.at/dammerer/test/float_mozilla.gif" border=0 alt="">

(Mozilla 0.9.8, Windows 2000)

Mozilla 0.9.9, Linux
konqueror 2.2.2, Linux jeweils genauso.

<img src="http://members.24speed.at/dammerer/test/float_opera.gif" border=0 alt="">

(Opera 6, Windows 2000)

werd' ich mal in derf Opera-Newsgroup fragen. Bitte die Datei vorerst daher NICHT löschen!

<img src="http://members.24speed.at/dammerer/test/float_ie.gif" border=0 alt="">

(Internet Explorer 6, Windows 2000, darstellungsgleich mit Internet Explorer 5, Windows 98se)

öhm... lol
was passiert, wenn du das Fenster so klein zerrst, dass keine 3 Kästen mehr neheneinander passen?

1)Welcher Browser hat recht?

Mozilla

3)Warum weigert sich der Opera beharrlich, den oberen Innenabstand des Logos richtig darzustellen? Wie kann ich ihm das beibringen?

versuche ich gerade herauszufinden.

Netscape 4 hat überhaupt recht eigene Vorstellungen wir man die Seite interpretieren soll - ich werde ihn mit @import aber "aussperren".

ehm.. jo.
Amaya bekleckert sich übrigens auch nicht mit Ruhm, schafft es aber immerhin die Sache lesbar zu halten. (die Kästen sitzen stur untereinander)

gruss Kai

[Kai Lahmann]

<img src="http://members.24speed.at/dammerer/test/float_opera.gif" border=0 alt="">

(Opera 6, Windows 2000)

werd' ich mal in derf Opera-Newsgroup fragen. Bitte die Datei vorerst daher NICHT löschen!

so, da hätten wir was. Bekannter Bug. Text VOR dem float-Zeugs einfügen und es passt. Wo dieser Text dann landet ist allerdings auch mal wieder dem Zufall überlassen.

gruss Kai

[Sönke]

Hallo emu!

div.navigation {
clear:left;
float:left;
...
}

Also _das_ kannst Du nun wirklich nicht verlangen das der IE das
versteht. Da ist der zu blöd zu. Löschen und setzen gleichzeitig... :)

Als Lösung setze z.B. vor Dein <div class="navigation"> einfach
noch ein leeres <span>, für das Du dann clear:left; beruhigt angeben
kannst. Dann klappt es auch mit dem IE.

Zu Opera hat Kai ja schon geschrieben.

Viele Grüße und Frohe Ostern,
Sönke

[emu]

Hallo!

Ich danke Kai und Sönke für ihre Hilfe!

Das Problem mit dem Opera lässt sich durch Einfügen der Zeile

<div style="width:0; height:0; margin:0; padding:0;"><p style="width:0; height:0; margin:0; padding:0;"> </p></div>

lösen.

Das Problem mit dem Internet Explorer lässt sich mit der Zeile

<span style="clear:left;"></span>

zwischen <div class="ueberschrift"> und <div class="navigation"> lösen.

Leider bleibt nach den zwei Workarounds für Opera und IE der bittere Nachgeschmack, dass gewisse Dinge nur mit Schummeleien lösbar sind :-(

emu
[den browser-blues auf der floate spielend]