Positionierung von <div>'s in einer <td>, IE ok, Firefox nicht

[Bernd Müller]

Hallo,
ich habe innerhalb einer Tabellenzelle mehrere div's übereinander positioniert :
'...
'<td colspan="2" width="722px" height="528px" style=" width:722px; height:528px; position:relative; background-color:#FFFFFF;">
'<div id="1" style="width:722px; height:528px; position:absolute; top:0; left:0; z-index:0; ">...</div>
'<div id="2" style="width:722px; height:525px; position:absolute; top:1px; left:0; z-index:1; background-color:#FFFFFF; filter:alpha(opacity=0); -Moz-Opacity:0.0;" > ...</div>
'<div id="3" style="width:722px; height:525px; position:absolute; top:1px; left:0; z-index:2; filter:alpha(opacity=0); -Moz-Opacity:0.0;" >...</div>
'....

Die 'absolute' Positionierung der div's sollte sich ja eigentlich relativ verhalten, da das Elternelement (<td>) ja eine von 'static' abweichende Positionierung aufweist.

Im IE funktioniert das auch ohne Probleme, die 3 div's liegen in der td genau übereinander wie gewollt, im Firefox jedoch werden die div's absolut zur Seite positioniert :(

Wie kann ich das ändern s.d. die divs in beiden Browsern innerhalb der td übereinander liegen ?

Thx im Voraus,
Bernd.

[Antipitch]

Moin Bernd,

Die 'absolute' Positionierung der div's sollte sich ja eigentlich relativ verhalten, da das Elternelement (<td>) ja eine von 'static' abweichende Positionierung aufweist.

In 10.1 Definition of "containing block" wird -denke ich- von block- und iinline-level Elementen ausgegangen. Für letztere gilt deine obige Feststellung so nicht und FF scheint <td>s (auch wenn sie ihre eigene display Eigenschaft besitzen) hier als inline-level Elemente zu behandeln. Mögliche Lösung für dein Problem sollte somit offensichtlich sein.

Darüber hinaus benutzt du deine Tabelle aber allem Anschein nach zu Designzwecken, und dazu sagt das w3c:

"Tables should not be used purely as a means to layout document content as this may present problems when rendering to non-visual media. Additionally, when used with graphics, these tables may force users to scroll horizontally to view a table designed on a system with a larger display. To minimize these problems, authors should use style sheets to control layout rather than tables." (vgl. http://www.w3.org/TR/html401/struct/tables.html).

Warum also nicht CSS-basierte Layouts benutzen?

Gruß
Antipitch

[ChrisB]

Hi,

'<td style=" [...] position:relative;

http://www.w3.org/TR/CSS21/visuren.html#choose-position:
"The effect of 'position:relative' on table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, and table-caption elements is undefined."

Die 'absolute' Positionierung der div's sollte sich ja eigentlich relativ verhalten, da das Elternelement (<td>) ja eine von 'static' abweichende Positionierung aufweist.

Tja ... wenn da nicht oben zitierte Undefiniertheit in der Spezifikation ... nun ja, "definiert" waere.

Im IE funktioniert das auch ohne Probleme, die 3 div's liegen in der td genau übereinander wie gewollt, im Firefox jedoch werden die div's absolut zur Seite positioniert :(

Wie kann ich das ändern s.d. die divs in beiden Browsern innerhalb der td übereinander liegen ?

Zur Not: Indem du in das TD zunaechst ein weiteres DIV einfuegst, und dieses dann relativ positionierst - fuer _dieses_ ist der Effekt von position:relative naemlich durchaus definiert.

MfG ChrisB

[Gernot Back]

Hallo Bernd,

Also: wenn du etwas innerhalb einer Tabellenzelle absolut daran ausgerichtet positionieren willst, dann musst du zunächst einmal ein Element darin relativ positionieren. Dann kannst du dessen Kindelemente daran wiederum absolut positionieren.

Damit es in allen Browsern gleich aussieht, solltest du der Tabellenzelle selbst auch noch vertical-align:top; verpassen, denn sonst nehmen _richtige_ Browser (der IE ist kein solcher!) per Default die linke vertikale Mitte der Tabellenzelle und nicht die linke obere Ecke als Bezugspunkt.

Gruß Gernot