CSS-Layout mit DIV -> Browser-Probleme

[rené]

Hallo,

ich hab grad irgendwie mächtige Probleme mit CSS das Layout zu definieren, da jeder Browser eigene unschöne Macken hat.

ich versuche ein Layout zu erstellen, dass im Grunde einer HTML-Tabelle gleicht und über feste Breiten und Höhen der Felder verfügt. Da ich diese dynamisch errechne, ist zum Definitionszeitpunkt die Gesamtbreite normalerweise nicht bekannt (könnte man natürlich u.U. vorab schonmal berechnen).

Das Problem ist die zum Teil völlig verschiedene Handhabung der Browser (also nicht wie bei HTML mal 2-3 Pixel, die ausgeglichen bzw. extra auf 0 gesetzt werden müssen):

1.Variante: DIV-Tags einfach so (ohne absolute)
Sollen lückenlos mehrere Boxen nebeneinander gebracht werden und dies auf mindestens 2 Zeilen, so kommen merkwürdige oder besser unverständliche Lösungen zum Vorschein.

IE: das letzte Element einer Zeile hat immer einen Abstand von 2-3 Pixeln zum Vorletzten. Dass könnte man zwar unter Umständen sogar noch akzeptieren, da bei Rahmenausblendung dies nicht mehr auffällt, jedoch ist das irgendwie unsinnig. Dummerweise muss das float:left entfallen, da sonst die 2.te Zeile nicht realisierbar ist bzw. der Anfang von der Bildschirm-Auflösung abhängt.

Firefox/Opera:
Noch schlimmer, da das letzte Element (ohne float:left) auf die neue Zeile hüpft und dort dessen Inhalte vom nächsten Feld überschrieben werden.

------------------------------

2. Variante: DIV mit Display

wie unter:
http://de.selfhtml.org/css/eigenschaften/anzeige/display2.htm

IE: unterstützt das nicht bzw. zeigt die Spalten als Zeilen an
Firefox/Opera: klappt wunderbar

-> aufgrund der über 90% IE-Nutzer, kommt dies also auch nicht in Frage

------------------------------

3. Variante: Definition mit 'absolute'

Das umgeht zwar das Problem mit dem letzten Feld, sodass eine einheitliche Darstellung auf IE u. Firefox/Opera erfolgt, dafür verliert man jedoch die Möglichkeit der zentrierten Darstellung,
oder etwa nicht?
Die 'absolute' Definition steht ja in der Hierarchie über dem Elternelement, welches für die Zentrierung nötig wäre und würde somit ignoriert.

Tja,
hat jemand ne Idee wie ich eine tabellarische Struktur am besten mit CSS-Mitteln umsetze ohne dass Browser-Unterschiede zum Tragen kommen?
Geht das überhaupt, wenns dynamisch generiert wird (also Zeilen- und Spaltenzahl ab und zu verändert wird)?

Ach so, ähm Strecken auf 100% Bildschirmbreite kommte eigentlich nicht in Frage, da die Felder bewusst feste Größen haben sollen.

Ich hoffe ihr könnt mir weiterhelfen.

P.S.

Meine Test-Umgebung

IE: 6.0.29xxxxxxxxxxxxxxxxxxxxxxxxxxxx *g*
Mozilla: 1.0.3
Opera: 7.5.4

[Cyx23]

Hallo,

hat jemand ne Idee wie ich eine tabellarische Struktur am besten mit CSS-Mitteln umsetze ohne dass Browser-Unterschiede zum Tragen kommen?

was spricht denn da so massiv gegen die Tabelle?

IE: 6.0.29xxxxxxxxxxxxxxxxxxxxxxxxxxxx *g*
Mozilla: 1.0.3
Opera: 7.5.4

Hier sollten m.E. rechtzeitig wenigstens auch IE 5 und 5.5 getestet
werden.

Grüsse

Cyx23

[Ingo Turski]

Hi,

Da ich diese dynamisch errechne, ist zum Definitionszeitpunkt die Gesamtbreite normalerweise nicht bekannt (könnte man natürlich u.U. vorab schonmal berechnen).

wie berechnest Du das denn? HTML und CSS sind keine Programmiersprachen und wenn Du nicht ausschließlich Bilder verwendest, können Dir die exakten Dimensionen auch nicht bekannt sein. Bleibt Javascript - Nur Pech, wenn das deaktiviert ist.

IE: das letzte Element einer Zeile hat immer einen Abstand von 2-3 Pixeln zum Vorletzten.

Hört sich nach dem 3-Pixel-Bug oder falsch interpretierten Whitespaces an.

Dummerweise muss das float:left entfallen, da sonst die 2.te Zeile nicht realisierbar ist bzw. der Anfang von der Bildschirm-Auflösung abhängt.

Und wie sollte das sonst (ohne Positionierung) gehen?

Firefox/Opera:
Noch schlimmer, da das letzte Element (ohne float:left) auf die neue Zeile hüpft und dort dessen Inhalte vom nächsten Feld überschrieben werden.

Das klingt nach absoluter Positionierung und Berücksichtigung nur des falschen MS-Boxmodells.

3. Variante: Definition mit 'absolute'

Das umgeht zwar das Problem mit dem letzten Feld, sodass eine einheitliche Darstellung auf IE u. Firefox/Opera erfolgt, dafür verliert man jedoch die Möglichkeit der zentrierten Darstellung,
oder etwa nicht?
Die 'absolute' Definition steht ja in der Hierarchie über dem Elternelement, welches für die Zentrierung nötig wäre und würde somit ignoriert.

Nein. Lies bitte genauer nach, wonach sich die absolute Positionierung richtet.

hat jemand ne Idee wie ich eine tabellarische Struktur am besten mit CSS-Mitteln umsetze ohne dass Browser-Unterschiede zum Tragen kommen?

Ja. Verwende eine Tabelle oder entscheide Dich für ein sinnvoll umsetzbares CSS-Layout.

Geht das überhaupt, wenns dynamisch generiert wird (also Zeilen- und Spaltenzahl ab und zu verändert wird)?

CSS kennt keine Spaltenaufteilung - abgesehen von der tabellarischen Darstellung, die ja vom IE nicht unterstützt wird.

Meine Test-Umgebung

IE: 6.0.29xxxxxxxxxxxxxxxxxxxxxxxxxxxx *g*
Mozilla: 1.0.3
Opera: 7.5.4

Da fehlt auf jeden Fall der Firefox oder ein aktueller Mozilla sowie der IE 5.5.

freundliche Grüße
Ingo

[rené]

Hallo,

@Cyx23:

also gegen eine Tabelle spricht zum einen mein Prof. *g*, da er der Meinung ist, dass mit Div-Tags alles realisierbar ist, was auch eine Tabelle kann und sogar noch mehr.
Stimmt ja auch zum großen Teil.
Zum anderen sind Tabellen, und da hat er recht, eigentlich nie zur Layoutgestaltung gedacht gewesen.
Leider vermisse ich den tabellarischen Zusammenhang der Boxen bzw. die vollständige, korrekte Unterstützung des Standards durch alle Browser. Wäre dies der Fall könnte man dies zumindest über diese Display Variante lösen.

@ingo

Da ich diese dynamisch errechne, ist zum Definitionszeitpunkt die Gesamtbreite normalerweise nicht bekannt (könnte man natürlich u.U. vorab schonmal berechnen).

»wie berechnest Du das denn? HTML und CSS sind keine Programmiersprachen und wenn Du nicht ausschließlich Bilder verwendest, können Dir die exakten Dimensionen auch nicht bekannt sein. Bleibt Javascript - Nur Pech, wenn das deaktiviert ist.

ich generiere die komplette Site, also auch mein Layout per PHP -> ist so ne Art CMS
(javascript mag/nutze ich nicht -> wegen der Gründe die du genannt hast)

IE: das letzte Element einer Zeile hat immer einen Abstand von 2-3 Pixeln zum Vorletzten.

»Hört sich nach dem 3-Pixel-Bug oder falsch interpretierten Whitespaces an.

3-Pixel-Bug kann eigentlich nicht sein, da ich den unverändert probiert habe, also einen Teil meines des Quelltextes verändert hab.
habe das so gemacht:
-> * html div#inhalt{ height: 1em;  /* Workaround gegen den 3-Pixel-Bug des Internet Explorers */ }

Dummerweise muss das float:left entfallen, da sonst die 2.te Zeile nicht realisierbar ist bzw. der Anfang von der Bildschirm-Auflösung abhängt.

»Und wie sollte das sonst (ohne Positionierung) gehen?

Ja genau, es geht nicht anders ohne ein Auflösungs-abhängiges Ergebnis zu erzeugen.

Firefox/Opera:
Noch schlimmer, da das letzte Element (ohne float:left) auf die neue Zeile hüpft und dort dessen Inhalte vom nächsten Feld überschrieben werden.

»Das klingt nach absoluter Positionierung und Berücksichtigung nur des falschen MS-Boxmodells.

Leider ists nicht so, da wird nirgends ein 'absolute' vergeben und trotzdem bricht Firefox um bzw. legt es auf die nächste Zeile. Das ist ja gerade das größte Problem. Bei Firefox könnte man zwar dieses Feld leer lassen, sodass kein Überschreib-Effekt auftritt, nur wird es ja beim IE dahinter geklebt (meiner Meinung nach die korrekte Position, denn sonst kann man sich die Angabe sparen).

3. Variante: Definition mit 'absolute'

Das umgeht zwar das Problem mit dem letzten Feld, sodass eine einheitliche Darstellung auf IE u. Firefox/Opera erfolgt, dafür verliert man jedoch die Möglichkeit der zentrierten Darstellung,
oder etwa nicht?
Die 'absolute' Definition steht ja in der Hierarchie über dem Elternelement, welches für die Zentrierung nötig wäre und würde somit ignoriert.

»Nein. Lies bitte genauer nach, wonach sich die absolute Positionierung richtet.

Upps hier hab ich wohl was verdreht. Sowohl eine Einrückung, als auch eine Zentrierung unter einem Elternelement ist möglich.
Das Problem ist aber, dass nicht der Inhalt zentriert wird, sondern die Startposition. In diesem Fall müsste man wieder die Auflösung kennen.

hat jemand ne Idee wie ich eine tabellarische Struktur am besten mit CSS-Mitteln umsetze ohne dass Browser-Unterschiede zum Tragen kommen?

»Ja. Verwende eine Tabelle oder entscheide Dich für ein sinnvoll umsetzbares CSS-Layout.

*g* naja, die Layouts entwirft ein Dipl. Szenenbildner, da kann ich nicht viel machen.
Problematisch erscheint mir, dass ein CSS-Layout mit nur maximal 3 boxen nebeneinander unproblematisch funktioniert (Ausrichtung links, A.rechts und ohne Angabe mitte). Sobald aber eine vierte Spalte im Spiel ist gibts Probleme bzw. treten Browser-Eigenheiten auf, es sei denn man nutzt 'absolute'.
Scheinbar wird genau aus diesem Grund häufiger auf 2 und 3-Spalten-Layouts eingegangen.
(Naja, ich gebe zu, für die meisten Fälle ist das auch vollkommen ausreichend)

Geht das überhaupt, wenns dynamisch generiert wird (also Zeilen- und Spaltenzahl ab und zu verändert wird)?

»CSS kennt keine Spaltenaufteilung - abgesehen von der tabellarischen Darstellung, die ja vom IE nicht unterstützt wird.

-> wird nun aber z.B. 'drei-spaltiges' Layout genannt, auch wenns eine Box ist

Meine Test-Umgebung

IE: 6.0.29xxxxxxxxxxxxxxxxxxxxxxxxxxxx *g*
Mozilla: 1.0.3
Opera: 7.5.4

»Da fehlt auf jeden Fall der Firefox oder ein aktueller Mozilla sowie der IE 5.5.

upss, da war ich wohl ein wenig nachlässig:
Mozilla Firefox: 1.0.3 sollte das sein
(ein älterer IE -> es geht ja nicht mal mit dem aktuellen, mit den älteren gibts doch noch mehr Probleme)

mfg
,rené

[Cyx23]

Hallo,

also gegen eine Tabelle spricht zum einen mein Prof. *g*, da er der Meinung ist, dass mit Div-Tags alles realisierbar ist, was auch eine Tabelle kann und sogar noch mehr.

nun, da musst du wahrscheinlich wirklich etwas anderes entwickeln,
statt Tabellen dann ein womöglich etwas komplexes CSS und dazu
vielleicht noch Browserweichen.

Stimmt ja auch zum großen Teil.

Nur dass eine Tabelle wohl von allen Browsern ohne zusätzliche Weichen
stimmig aufgebaut wird.
Die Flexibilität der Tabelle wird von Divs nicht erreicht, ob nun
Positionierungen unten am Seitenende, etwas wie min-width oder
max-width beim IE, oder andere Dinge.

Zum anderen sind Tabellen, und da hat er recht, eigentlich nie zur Layoutgestaltung gedacht gewesen.

Das halte ich nur bedingt für richtig da eine Tabelle ja gerade
Layoutgestaltung betreibt, ob nun für erkennbar "tabellarische
Inhalte" oder überhaupt für Seitenelemente.

Dazu kommt dass die semantische Bedeutung von Tabellen bzw.
table-tags gering ist.

Auch die Gleichsetzung von tableless layout mit Barrierefreiheit
dürfte zwar als plakative Umschreibung einiger wichtiger Ziele
sinnvoll sein, ist aber ja bekanntlich dennoch nicht ganz richtig.

Leider vermisse ich den tabellarischen Zusammenhang der Boxen bzw. die vollständige, korrekte Unterstützung des Standards durch alle Browser. Wäre dies der Fall könnte man dies zumindest über diese Display Variante lösen.

Per float, ggf. auch für umgebende Elemente, und Div-soap sollte
es auch halbwegs gelingen.

Wenn du gleich Browserweichen einplanst hast du ja display
vielleicht noch für die moderneren Browser als Möglichkeit.

Grüsse

Cyx23

[rené]

Hi Cyx23 und Ingo,

@Cyx23

Für die Anzeige ist es bei meiner Lösung ohnehin unerheblich, wie es umgesetzt ist, da in der Regel der Rahmen nicht angezeigt wird.
Das wäre halt nur um sagen zu können: "Es entspricht dem aktuellen Stand der Technik bzw. nutzt die neuesten verfügbaren Techniken."

Das mit der geringen semantischen Bedeutung der Tabelle könnte ich mal anbringen und mal schauen wie er reagiert.
Gerade für meine Lösung erscheint mir mittlerweile der Einsatz von Tabellen zwingend.

Die 'float'-Geschichte funktioniert auch nur zum Teil, zumindest, wenn man nicht zig Ausnahmeregeln schaffen möchte, und das habe ich eigentlich nicht vor, da sonst keiner mehr durchblickt.
Ich habe unten mal ein Link hinzugefügt, bei dem mal die Unterschiede zwischen Firefox und IE aufgezeigt werden.
(Opera7.54 macht sogar noch eigenen Quark und verschiebt nach unten (na vielleicht hab ich da was übersehen)).

@ingo

Dass ich den tabellarischen Zusammenhang vermisse, sollte nicht bedeuten, dass dies notwendig ist oder den Grundsätzen des Box-Modells entspricht. Eine Box ist ja nunmal eine Box und keine Tabelle. Da hast du recht. Ich meinte dass eigentlich eher bezogen auf das was ich umsetzen möchte bzw. soll. (Zum Teil geht das ja auch nur unterstützt der IE das wiedermal nicht)

Ferner habe ich gerade festgestellt, was das Problem für den Abstand im IE ist und das Problem für den Umbruch bei Firefox.

hier mal als Beispiel:

http://www.vcu.de.vu

Ich bin mir jetzt eigentlich sehr sicher, dass für meinen Anwendungsfall das Box-Modell schlichtweg ungeeignet ist.

mfg
,rené

[Ingo Turski]

Hi,

Die 'float'-Geschichte funktioniert auch nur zum Teil, zumindest, wenn man nicht zig Ausnahmeregeln schaffen möchte, und das habe ich eigentlich nicht vor, da sonst keiner mehr durchblickt.

oder wenn man sich nicht 100%ig damit auskennt. ;-)

hier mal als Beispiel:

http://www.vcu.de.vu

bitte http://www.noack.gmxhome.de/div/.

Fall 1: Firefox stellt korrekter Weise das _dritte_ Element (Deine angeblich letzte Box) über Box 1 dar und bricht den Text mangels ausreichender Breite um. Das ist nur zu verstehen, wenn man wirklich die Grundlagen von float kennt. Schau Dir mal dieses einfache Beispiel an oder vergrößere in Deinem Beispiel die Breite der "letzten Box" bzw. setze sie auch im Quelltext an die letzte Position.

Fall 2: derselbe Fehler von Dir, nur daß Du ihn jetzt etwas besser siehst, da die Box sich in der Höhe dem Inhalt anpassen darf. Der grüne border wird oberhalb von Box 1 überdeckt.

Fall 3: ohne width nimmt die "letzte Box" die komplette Fensterbreite ein, so daß der Inhalt neben den _zuvor_ notierten floatenden Boxen paßt. Daß sich der IE nicht an Deine height-Angabe hält, ist ein Fehler.

Fall 4: normales float-Verhalten. Ich sehe hier keine Probleme.

Fall 5: standardkonforme Broweser stellen den Rahmen der umfassenden Box sehr wohl dar - nur halt in der korrekten Höhe, die Du aber nicht erwartet hast. Du kannst ihn auch an den dickeren Linien sehen oder gib diesem Element mal eine Hintergrundfarbe. Der IE macht hier den bekannten Fehler, daß er die Box ausdehnt, obwohl die "letzten Boxen" über float aus dem Elementenfluß genommen sind.

freundliche Grüße
Ingo

[rené]

Oha,
ich hatte mir das zwar schon einmal durchgelesen, aber, wie man merkt, nicht gründlich genug. Mir war gar nicht bewusst, dass die Boxen vorn anfangen, sobald float entfällt. Unterstützt wurde dieser Irrglaube durch die Anzeige von Opera7.54 und IE. Das erklärt natürlich auch die Anzeige in den anderen Fällen.

D.h. verdreifache ich die Breitenangabe der letzten Box der Zeile (kurz: letzte Box *g*) erhalte ich das korrekte Ergebnis bzw. eine scheinbare Breite von 100px.
ok!

Es gibt allerdings ein kleines Problem:
Opera und IE halten sich nicht an diese Regeln und verbreitern in diesem Fall die letzte Box. Ich nehme an, dass ich dieses Problem nur dadurch umgehen könnte, indem ich absolut positioniere oder aber die letzte Box der Zeile immer bis zum Rand laufen lasse, also ohne
'width', denn dann wird es einheitlich.

Mit freundlichem Gruß
,rené

P.S.
Optional bestünde natürlich die Möglichkeit nur noch mit Firefox zu arbeiten.

[Cyx23]

Hallo,

Es gibt allerdings ein kleines Problem:

hast du mal den aktuellen Beispielcode oder eine URI dazu?

Grüsse

Cyx23

[Ashura]

Hallo Cyx23.

hast du mal den aktuellen Beispielcode oder eine URI dazu?

Denkst du, dass er außer einem URL etwas anderes angeben würde? ;)

Gruß, Ashura

[rené]

Hallo,

Es gibt allerdings ein kleines Problem:

hast du mal den aktuellen Beispielcode oder eine URI dazu?

jo, hab es mal geändert, naja der Text stimmt nicht mehr ganz
wenn ich Zeit hab könnte ich das nochmal ändern.

Da manche Browser Probleme machen sollen, bei Umbrüchen
(hab ich hier irgendwie gelesen), hab ich mir die Anpassung auf 80Zeichen gespart. Dadurch ist der naürlich bei Quelltext Ansicht das ganze nicht mehr so schick.

die Formatierungen gehen
http://www.noack.gmxhome.de/div/

mfg
,rené

[Ingo Turski]

Hi,

Es gibt allerdings ein kleines Problem:
Opera und IE halten sich nicht an diese Regeln und verbreitern in diesem Fall die letzte Box.

Opera AFAIK nur, wenn Du ihn in den quirks-Modus schickst.

Ich nehme an, dass ich dieses Problem nur dadurch umgehen könnte, indem ich absolut positioniere oder aber die letzte Box der Zeile immer bis zum Rand laufen lasse, also ohne
'width', denn dann wird es einheitlich.

Oder wenn Du margin verwendest und ggfls. die Reihenfolge der Elemente im Quelltext änderst.

Optional bestünde natürlich die Möglichkeit nur noch mit Firefox zu arbeiten.

Wenn das mal nur alle machen würden. :-(
Ich bin gerade dabei, ein kompliziertes Layout pixelgenau umzusetzen und der IE hat das wirklich arg erschwert. Aber dabei habe ich auch glatt noch einen schon fast lustigen Bug vom Opera 7.54 entdeckt, den ich leider auch nicht völlig umschiffen konnte. Kennt zufällig einer eine Browserweiche nur für Opera < 8? Ich glaube, sowas gibt's nicht. Da lobe ich mir doch die (vermutlich extra wegen der Bugs eingeführten;-) conditional comments.

freundliche Grüße
Ingo

[Ingo Turski]

Hi,

Leider vermisse ich den tabellarischen Zusammenhang der Boxen

wie bitte? Das CSS-Boxmodell sieht keine tabellarischen Zusammenhänge - hierfür gibt es bereits Tabellen.

ich generiere die komplette Site, also auch mein Layout per PHP -> ist so ne Art CMS
(javascript mag/nutze ich nicht -> wegen der Gründe die du genannt hast)

Dann weißt Du aber nicht den exakten Raumbedarf für den Text und kennst die erforderlichen Dimensionen der Boxen nicht.

Dummerweise muss das float:left entfallen, da sonst die 2.te Zeile nicht realisierbar ist bzw. der Anfang von der Bildschirm-Auflösung abhängt.

»Und wie sollte das sonst (ohne Positionierung) gehen?

Ja genau, es geht nicht anders ohne ein Auflösungs-abhängiges Ergebnis zu erzeugen.

zunächst eine Bitte: lasse die Kommentarzeichen (incl. Leerzeichen) in Ruhe! Dann kann die Forensoftware den Kommentar erkennen und im HTML entsprechend auszeichnen und mein CSS kann ihn formatieren, was das Lesen dch sehr erleichtert.
Zur Positionierung: kannst Du auch float verwenden..

Leider ists nicht so, da wird nirgends ein 'absolute' vergeben und trotzdem bricht Firefox um bzw. legt es auf die nächste Zeile.

Das ist aber etwas anderes als Überlagerungen. Und das kannst Du durch passende Breitenangaben verhindern.

Das Problem ist aber, dass nicht der Inhalt zentriert wird, sondern die Startposition. In diesem Fall müsste man wieder die Auflösung kennen.

Nö. wer hat gesagt, daß Du das äußere Elerment absolute positionieren sollst?

*g* naja, die Layouts entwirft ein Dipl. Szenenbildner, da kann ich nicht viel machen.
Problematisch erscheint mir, dass ein CSS-Layout mit nur maximal 3 boxen nebeneinander unproblematisch funktioniert (Ausrichtung links, A.rechts und ohne Angabe mitte). Sobald aber eine vierte Spalte im Spiel ist gibts Probleme bzw. treten Browser-Eigenheiten auf, es sei denn man nutzt 'absolute'.

Das sehe ich nicht so. Du kannst mit float beliebig viele Elemente nebeneinander setzen, wobei das zuletzt notierte kein float braucht. Matürlich muß eine ausreichende gesamtbreite vorhanden sein.
Wenn Du allerdings gleiche Spaltenhöhen (das meine ich, wenn ich von Spaltenlayout spreche) oder flexible Breiten aller Elemente willst, dann ist eine Tabelle das geeignetere Mittel.

freundliche Grüße
Ingo

[NoName]

hi,
hatte heute so ein aehnliches problem. wenn du immer noch an einer loesung interessiert bist, schreib mir. dann schick ich dir meinen quelltext. verwende hierfuer html, css, js. js berechnet dynamisch die hoehe, breite. kann man aber auch (jedoch umstaendlicher) serverseitig berechnen (php, jsp,...).
gruesse