nicht angemeldet
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