<caption> Positionierung FF2 vs. FF3

[Olaf Schneider]

Hallo,

Ich positioniere ein <table>-Element mit margin-left: 20px. Da bis auf Opera und Safari 3 kein Browser das zugehörige <caption>-Element richtig positioniert (siehe unter http://www.thestyleworks.de/basics/tables.shtml#captions), bekommen Opera und Safari ein

caption { margin-left: 0 }

und alle anderen ein

caption { margin-left: 20px }

Firefox freut sich und stellt wie gewünscht dar, IE weiß wie immer nicht so genau, was los ist, stellt die Caption eigentlich standardkonform dar, ignoriert aber die margin-left-Anweisung und stellt daher auch wie gewünscht dar.

Alles prima, wenn nicht …

… die Beta von FF3 meine Neugier erweckt hätte. Und siehe da, auch FF3 stellt die Caption standardkonform dar und bräuchte daher das gleiche Stylesheet wie Opera und Safari.

Also müsste ich hier anfangen, zwischen FF2 und FF3 zu unterscheiden. Hurra!

Folgende Möglichkeiten gäbe es aus meiner Sicht:

a) noch mehr browserspezifische css-Dateien, die teilweise per JavaScript eingebunden werden.
-> mag ich nicht

b) kein margin-left auf die Tabelle, sondern stattdessen auf ein die Tabelle enthaltenes <div>-Element
-> abgesehen von einem zusätzlichen Element (noch ok), könnte dies eventuell Probleme mit dem Backend machen (das soll hier aber nicht weiter erläutert werden)

c) Es gibt eine Lösung, von der ich noch nichts weiß, aber Ihr.
-> Toll, her damit ;-)

Gruß
Olaf

[Cyx23]

Hallo Olaf,

-> Toll, her damit ;-)

ein paar "Lösungen" gibt es schon noch, wenn die jeweiligen "Nebenwirkungen"
verträglich sind:

  
{display:table-row;}  
/* oder */  
{display:inline;}  
/* oder */  
{float:left;}  

Sah jedenfalls bei meinen Tests mit verschiedenen Browsern einheitlicher aus
als vorher, allerdings fehlen dann vielleicht gestalterische Möglichkeiten.

Grüsse aus Düsseldorf
Cyx23

[Olaf Schneider]

Hallo Cyx23,

vielen Dank für Deine Vorschläge. Leider haben sie alle drei gemein, dass die Caption sowohl in FF2 als auch in FF3 Beta 4 nicht mehr über die ganze Tabellenbreite gezogen wird, sondern nur noch über die Breite der ersten Spalte. Weitere Browsertests habe ich nicht mehr vorgenommen.

Ich hätte gerne eine einfache, direkte Lösung gefunden, werde aber vermutlich statt dessen an anderen Stellen das css verändern, um die problematische margin auf der Tabelle überflüssig zu machen.

Gruß
Olaf

[MudGuard]

Hi,

Ich positioniere ein <table>-Element mit margin-left: 20px. Da bis auf Opera und Safari 3 kein Browser das zugehörige <caption>-Element richtig positioniert (siehe unter http://www.thestyleworks.de/basics/tables.shtml#captions),

Setzt Du für das caption-Element explizit display:table-caption oder verläßt Du Dich darauf, daß die Browser das automatisch tun?

cu,
Andreas

[Olaf Schneider]

Hallo Andreas,

Setzt Du für das caption-Element explizit display:table-caption oder verläßt Du Dich darauf, daß die Browser das automatisch tun?

im Falle der Positionierungsart des caption-Elements gibt es Unterschiede zwischen FF2 (nicht standardkonformes Verhalten) und FF3 (standardkonformes Verhalten).

Beide habe aber meines Wissens caption { display: table-caption; } ohnehin als Definition im Browserstylesheet. Ein manuelles Setzen dieser Eigenschaft bringt keine sichtbaren Unterschiede.

Gruß
Olaf