z-index unter FF und IE zum laufen bringen

[Robbit]

Salu zusammen,

ich will folgendes erreichen: Eine width:50%-Tabelle, über der eine vom rechten oberen Eck aus positionierte Grafik (%%%%) verdeckend schwebt. Etwa so:

%%%%
|-------------------%%%%----|
| abcdefghijklmnopqr%%%%wxy |
|-------------------%%%%----|
|                   %%%%    |
|-------------------%%%%----|
|                   %%%%    |
|                           |

Im IE klappt das so:

  
<table style="width:30%; position:relative;">  
<tbody>  
  <tr>  
    <td style="background:red;"> Überschrift  
    </td>  
  </tr>  
  <tr>  
    <td>  
      <div style="position: relative; z-index: 5;">  
        Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua.  
      </div>  
      <div style="position: absolute; z-index: 10; top: 15px; right:30px;">  
        <img alt="Pencil" src="Pencil.png">  
      </div>  
    </td>  
  </tr>  
</tbody>  
</table>  

Im FF landet die Grafik dabei aber im re-ob-Eck des Browserfensters anstatt im re-ob-Eck der Tabelle (=Elternelement). Offenbar erkennt FF das nächste Elternelement mit position≠static nicht, daran sollten sich position:absolute-Elemente ja schließlich ausrichten.

Aber es wird noch verrückter. Im FF funktioniert es so:

<table style="width:30%;">  
<tbody>  
  <tr>  
    <td style="background:red;"> Überschrift  
    </td>  
  </tr>  
  <tr>  
    <td>  
	  <div align="right" style="position: relative; z-index: 10; top:-0.8em; right:1.5em; float:right;">  
	    <img alt="Pencil" src="Pencil.png">  
	  </div>  
      <div style="position: relative; z-index: 5;">  
	    <table width="100%">  
          <tbody>  
		    <tr>  
              <td>  
                Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua.  
              </td>  
			</tr>  
          </tbody>  
        </table>  
      </div>  
    </td>  
  </tr>  
</tbody>  
</table>

aber nicht, wenn ich die innere untere Tabelle weglasse:

<table style="width:30%;">  
<tbody>  
  <tr>  
    <td style="background:red;"> Überschrift  
    </td>  
  </tr>  
  <tr>  
    <td>  
	  <div align="right" style="position: relative; z-index: 10; top:-0.8em; right:1.5em; float:right;">  
        <img alt="Pencil" src="Pencil.png">  
      </div>  
      <div style="position: relative; z-index: 5;">  
        Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua.  
      </div>	  
    </td>  
  </tr>  
</tbody>  
</table>

FF beachtet also den z-index nur in Tabellen, nicht in div-Boxen?!??? Wenn ich im Quellcode die Grafik nach dem Text aufführe, orientiert der FF die Grafik unterhalb des letzten Textes.

Was ist hier los? Wie bekomme ich das Ergebnis in beiden Browsern richtig zum laufen?

Vielen Dank und einen sonnigen Sonntag wünscht
-Rob.

[Felix Riesterer]

Lieber Robbit,

%%%%
|-------------------%%%%----|

abcdefghijklmnopqr%%%%wxy |
|-------------------%%%%----|
                  %%%%    |
|-------------------%%%%----|
                  %%%%    |
                          |
                          |
|---------------------------|

wir sprechen von Layout? Warum dann das hier?

<table style="width:30%; position:relative;">

Wenn Du schon CSS benutzt um Elemente Deiner Seite auszurichten, warum dann nicht konsequent? Die Tabelle hast Du ja wohl rein aus layouttechnischen Gründen verwendet, oder bildest Du darin wirklich tabellarische Daten ab?

Die übereinander angeordneten Kästen (Deine Tabellenzellen) lassen sich ganz bestimmt ohne <table>-Element erreichen. Und dann ist Dir in Sachen Darstellungsproblem überhaupt erst sinnvoll zu helfen.

~~~html

<td>

<div style="position: relative; z-index: 5;">
        Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua.
      </div>
    </td>

  
Das ist grober Unfug. Warum das <div> Element sein muss, will mir nicht einleuchten. Die CSS-Anweisungen kannst Du doch dem <td>-Element selbst geben, oder nicht? Oder wolltest Du innerhalb der Tabellenzelle noch etwas anderes stehen haben? Und wenn ja, warum steht das dann hier nicht aufgeführt?  
  
Andererseits musst Du Dich nicht wundern, wenn Du die darstellungstechnisch nicht unproblematischen Tabellenelemente als Elternelemente für etwas benutzt, das "auf ausgefallene Art" dargestellt werden soll...  
  
Liebe Grüße,  
  
Felix Riesterer.

-- 
ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)

[Robbit]

Hey Felix,

wir sprechen von Layout? Warum dann das hier?

<table style="width:30%; position:relative;">

Naja, weil es die einzige mir bekannte Möglichkeit war, dieses Layout in jeweils wenigstens EINEM Browser hinzubekommen.

Und um gleich die anderen Fragen zur Konsistenz zu beantworten: Es ist nötig, weil die Chose in einem MediaWiki stattfinden soll, da habe ich keinen Zugriff auf alle Elemente. Und ob das nun schöner Stil ist oder nicht - in jedem Fall interessiert mich, warum es nicht browserübergreifend funktioniert, denn unvalide ist es ja nicht.

Die übereinander angeordneten Kästen (Deine Tabellenzellen) lassen sich ganz bestimmt ohne <table>-Element erreichen. Und dann ist Dir in Sachen Darstellungsproblem überhaupt erst sinnvoll zu helfen.

Die Tabelle ist wie gesagt nötig, um das Ganze im MediaWiki darzustellen und vor allem auch editierbar zu halten. Mir leuchtet auch nicht ein, weshalb ich wegen einer einzigen überlagernden Grafik von Tabellen zu reinem dvi-Design wechseln soll.

Das ist grober Unfug. Warum das <div> Element sein muss, will mir nicht einleuchten. Die CSS-Anweisungen kannst Du doch dem <td>-Element selbst geben, oder nicht? Oder wolltest Du innerhalb der Tabellenzelle noch etwas anderes stehen haben? Und wenn ja, warum steht das dann hier nicht aufgeführt?

Ja, in den anderen Tabellenzellen soll natürlich auch noch wat rin. Auf dem Rest der Seite steht übrigens auch noch was (sorry, hatte nich gedacht, daß das fehlen dieser Info verwirrt).

Andererseits musst Du Dich nicht wundern, wenn Du die darstellungstechnisch nicht unproblematischen Tabellenelemente als Elternelemente für etwas benutzt, das "auf ausgefallene Art" dargestellt werden soll...

Doch, ich wundere mich aber. Wie gesagt: Pro Browser ist es ja hinzubekommen, und valide isset ooch. Wat nu?

Bestliche Sonntagsgrüße
-Rob.