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.