• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Z-index Problem im IE

Status
Für weitere Antworten geschlossen.

new2you

Neues Mitglied
Hi,
Folgende Tabelle wird im IE fehlerhaft dargestellt, ich habe kA wieso:
HTML:
<table>
 <tr>
  <td>
   <div style="z-index: 1;position:relative;">
       bla, bla, bla, bla ...
    <div style="z-index:2;background-color: #f6f6f6;border: 1px solid    
       black;  position:absolute; top:0px; left:100px;width:  
       200px;">
           blablablabla blablablabla blablablabla
    </div>
   <div>
  </td>
  <td>
   <div style="z-index: 1;position:relative;">
      bla2, bla2, bla2, bla2 ...
   </div>
  </td>
 </tr>
</table>

Das div mit z-index 2 soll über die Tabelle gelegt werden, verschmilzt im Moment aber ganz komisch mit dem Text der Zelle daneben.
Allgemein brauche ich eine Tabelle, deren Zelleninhalt gekürzt wird, aber in einem extra Div voll erscheint, sobald man mit der Maus über die jeweilige Zelle fährt.

Vielen Dank
new2you
 
Ich muss ehrlich sagen, ich verstehe nicht was du willst :p
Das Verhalten des FF und des IEs sind für deinen Code beide gleich
Wenn du das div wirklich über dem Text haben willst, schreibs halt
außerhalb der Tabelle hin

HTML:
<table>
  <tr>
    <td> 
      <div style="z-index: 1;position:relative;">
        bla, bla, bla, bla ...
      <div> 
    </td> 
    <td> 
      <div style="z-index: 1;position:relative;">
        TTTTTTTTTTTTTTTTTT TTTTTTTTTTTTTTTTTTT
      </div> 
    </td> 
  </tr> 
</table>
<div style="z-index:2;background-color: #f6f6f6;border: 1px solid black;  position:absolute; top:0px; left:100px;width:200px;">
  blablablabla blablablabla blablablabla
</div>

Falls es das nicht ist, bitte noch einmal genauer beschreiben
 
Danke für die Antwort, habe das Problem mittlerweile gelöst.
Mein Beispielcode war schlecht, in beiden Browsers kommt dieser komische Effekt. Ursprünglich konnte ich den im FF mit irgendeinem CSS Tag ausmerzen, weiß nicht mehr wie, im IE blieb er aber.
Wie ich schon im ersten Post geschrieben habe sollte das innere div nicht außerhalb der Tabelle liegen, da viele Zellen so ein inneres div bekommen werden, das genau an der Position erscheinen soll, wo auch die Zelle ist, die es enthält.
Ich wollte das innere div also relativ zu der Zellenposition ausrichten.
Wenn ich den <td>-Tag relativ mache und ein absolutes div darin platzieren zerhaut es den Text im <td> Tag.
Wenn ich in den <td>-Tag ein relatives Div platziere und darin wiederum ein absolutes, kommt es zu dem o.g. z-index-fehler.
Lösung:
Man nehme einen <td>-Tag, weder relativ noch absolut, platziere darin ein absolutes div, bestimme dann per JS die absolute Position des <td>-Tags (Script siehe unten)und ändere dann die Koordinaten des <div> dementsprechend.

Wusste nicht dass man von jedem Element die x und yOffsets bzgl des ganzen dokumentes ermitteln kann:
HTML:
function findX(obj) 
{
    var x = 0;
    while (obj) 
    {
        x += obj.offsetLeft
        obj = obj.offsetParent;
    }
    return x;
}

cya
new2you
 
Status
Für weitere Antworten geschlossen.
Zurück
Oben