absolute und relative Positionierung und Tabelen

[Fabian Graßl]

Hi!

verwendeter Webbrowser : Mozilla 1.7.3

Wenn ich im Stylesheet die Positionierung einer Tabellenzelle auf "relative" setze und dann innerhalb der Zelle ein absolut positioniertes div habe, wird dieses div-Element absolut vom oberen linken Rand der Seite positioniert:

<table style="position:relative;top:10px;margin:0 auto;width:200px;border:1px solid red;">
  <tr>
    <td style="position:relative;top:0px;left:0px;height:200px;padding:0px;">
      <div style="position:absolute;background: blue;top:10px;left:10px;width:50px;height:50px;"></div>
    </td>
  </tr>
</table>

Wenn ich statt der Tabellenzelle ein weiteres <div>-Element verwende, wird das Ganze richtig angezeigt:

<div style="position:relative;top:10px;margin:0 auto;width:200px;border:1px solid red;height:200px;">
      <div style="position:absolute;background: blue;top:10px;left:10px;width:50px;height:50px;"></div>
</div>

Es gibt auch die Möglichkeit innerhalb der Tabellenzelle ein <div>-Element reklativ zu positionieren. Innerhalb dieses Elements absolut positionierte <div>-Elemente werden dann wie gewüpnscht positioniert.

Wo ist der Denkfehler?

Grüße, Fabian.

[Ingo Turski]

Hi,

Wo ist der Denkfehler?

der erste Denkfehler ist anzunehmen, daß dieses Problem mit HTML zu tun habe. ;-)
Der zweite zu versuchen, Tabellenzellen wie auch immer zu positionieren. Stelle Dir eine Tabelle mit Gitternetzlinien vor, in denen die einzelnen Zellen wüst angeordnet wären.

freundliche Grüße
Ingo

[Kalle_Worms]

Hi!

Wo ist der Denkfehler?

Du beschreibst, wie sich ein Browser verhält. Darin kann ich keinen Denkfehler erkennen.

Wenn ich beobachte, dass der Text
<font color='#ff0000'>Hallo, Fabian</font>
in der Farbe ROT erscheint, ist das auch kein Denkfehler.

Kalle

[wahsaga]

hi,

Wenn ich im Stylesheet die Positionierung einer Tabellenzelle auf "relative" setze [...]

... dann ist der zustand undefiniert.

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."

gruß,
wahsaga