Absolute Positionierung verschachtelter Tabellen vs. Mozilla

[Hermann]

Hallo!

Zwei Tabellen sind ineinander verschachtelt. Beide sind über position:absolute und top:... angeordnet.

Opera(7) und MS Internet-Explorer(5.5) stellen die innere, blaue Tabelle unterhalb der äußeren, roten Tabelle dar.
Das ist auch einleuchtend, wenn man bedenkt, dass die Positionierung vom Elternelement aus gemessen wird. (http://selfhtml.teamone.de/navigation/css.htm#positionierung)

Mozilla(1.4) aber misst auch den top-Abstand der inneren, blauen Tabelle vom Seitenrand aus und nicht von der äußeren, roten Tabelle aus.

Wie kann ich erreichen, dass auch Mozilla die innere Tabelle anhand der äußeren ausrichtet?

Schon im Vorraus danke für eure Hilfe!

Der Quelltext:

<table style="position:absolute;top:100px;background-color:#AA8888;"height:100;>

<tr><td>
    <p>123 Test</p>
  </td></tr>

<tr><td>
    <table style="position:absolute;top:30px;background-color:#8888AA;">
      <tr><td>
        <p>123 Test</p>
      </td></tr>
    </table>
  </td>

</table>

[MudGuard]

Hi,

Zwei Tabellen sind ineinander verschachtelt. Beide sind über position:absolute und top:... angeordnet.
Opera(7) und MS Internet-Explorer(5.5) stellen die innere, blaue Tabelle unterhalb der äußeren, roten Tabelle dar.
Das ist auch einleuchtend, wenn man bedenkt, dass die Positionierung vom Elternelement aus gemessen wird. (http://selfhtml.teamone.de/navigation/css.htm#positionierung)
Mozilla(1.4) aber misst auch den top-Abstand der inneren, blauen Tabelle vom Seitenrand aus und nicht von der äußeren, roten Tabelle aus.

Vielleicht liegt es ja auch nur daran, daß Mozilla die Höhe der äußeren Tabelle korrekt berechnet (nämlich so, als wäre sie nicht angegeben).

<table style="position:absolute;top:100px;background-color:#AA8888;"height:100;>

Hier ist nämlich keine korrekte Höhenangabe...

cu,
Andreas

[Hermann]

Hallo!

<table style="position:absolute;top:100px;background-color:#AA8888;"height:100;>
Hier ist nämlich keine korrekte Höhenangabe...

Oh ja, das ist natürlich falsch. Aber ich habe es jetzt ausprobiert sowohl ganz ohne als auch mit korrekter Höhenangabe - An dem Effekt, dass die blaue Tabelle einmal über und einmal unter der roten angezeigt wird, ändert das leider nichts.

Trotzdem danke für den Hinweis!

[MudGuard]

Hi,

<table style="position:absolute;top:100px;background-color:#AA8888;"height:100;>
Hier ist nämlich keine korrekte Höhenangabe...
Oh ja, das ist natürlich falsch. Aber ich habe es jetzt ausprobiert sowohl ganz ohne als auch mit korrekter Höhenangabe - An dem Effekt, dass die blaue Tabelle einmal über und einmal unter der roten angezeigt wird, ändert das leider nichts.

Ich hoffe, Du hast nicht nur das " verschoben, sondern auch einen sinnvollen Wert (inkl. vorgeschriebener Einheit) verwendet...

Ach ja, eine Tabelle über der anderen: "über" in Bezug auf die y-Richtung oder auf die z-Richtung?

Enthält die Seite vielleicht noch sonstige Fehler? Was sagen die Validatoren dazu?

cu,
Andreas

[Hermann]

Hallo!

Ich hoffe, Du hast nicht nur das " verschoben, sondern auch einen sinnvollen Wert (inkl. vorgeschriebener Einheit) verwendet...

Ja, habe ich... Aber die Höhenangabe spielt für diesen Effekt ohnehin keine Rolle.

Ach ja, eine Tabelle über der anderen: "über" in Bezug auf die y-Richtung oder auf die z-Richtung?

In Bezug auf die y-Richtung.

Aus irgendeinem Grund messen IE und Opera vom Elternelement(der äußeren Tabelle) aus, während Mozilla vom Seitenrand misst, bzw. die Seite als Elternelement auffasst.

Enthält die Seite vielleicht noch sonstige Fehler? Was sagen die Validatoren dazu?

Validator sagt: This Page Is Valid HTML 4.0 Transitional!
Sieht also nicht nach Fehler aus...

Gruß
Hermann

[MudGuard]

Hi,

Enthält die Seite vielleicht noch sonstige Fehler? Was sagen die Validatoren dazu?
Validator sagt: This Page Is Valid HTML 4.0 Transitional!
Sieht also nicht nach Fehler aus...

Und der CSS-Validator?

Ach ja, vielleicht läßt Du uns mal die Seite sehen (URL oder noch besser Link)...

cu,
Andreas

[Hermann]

Hallo!

Ich habe die Seite mal hochgeladen:
http://www.is-connected.com/sites/mithrandir/test.html

Gruß

Hermann

[MudGuard]

Hi,

Ich habe die Seite mal hochgeladen:
http://www.is-connected.com/sites/mithrandir/test.html

1. durch den unvollständigen doctype ist der Mozilla im Quirksmode...
2. Wozu dient hier die Tabelle?
3. das hier tut, was Du vermutlich willst:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>test</title>
</head>
<body>
<div style="position:absolute;top:100px;background-color:#f88;">
    outer
    <div style="position:absolute;left:0; top:30px;background-color:#88A;">
        inner
    </div>
</div>
</body>

cu,
Andreas

[Hermann]

Hallo

2. Wozu dient hier die Tabelle?

Um eine Situation zu erzeugen, in der ich das Verhalten von Mozilla nicht verstehe...

3. das hier tut, was Du vermutlich willst:

Im Prinzip ja, aber: Sobald das Eltern-Div in eine Tabelle verwandelt wird, behandelt Mozilla es nicht mehr als Elternelement des inneren Divs... und ich hab keine Ahnung warum :(

Gruß

Hermann

[Christian Seiler]

Hallo Hermann,

Im Prinzip ja, aber: Sobald das Eltern-Div in eine Tabelle verwandelt wird, behandelt Mozilla es nicht mehr als Elternelement des inneren Divs...

Du könntest dem <td>-Element, das das innere absolut positionierte Element enthält ein position: relative; verpassen, das sollte Mozilla auf jeden Fall können.

und ich hab keine Ahnung warum :(

Ich auch nicht. Scheint wohl ein Bug zu sein. Meldest Du ihn bitte? -> http://bugzilla.mozilla.org/

Viele Grüße,
Christian