IE-Fehler beim "Schichten" ? - javarea.de Forum powered by javarea.de

Archivlink: javarea.de Forum > JavaScript > IE-Fehler beim "Schichten" ?

Vollständigen Link anzeigen: javarea.de Forum > JavaScript > IE-Fehler beim "Schichten" ?

Pages: [1]

geschrieben von tpsoft am 06.10.2006 - 13:45

Bekanntlich kann man absolut positionierte DIVs dank des Schichtenmodells beliebig übereinander legen, überlappen lassen.

Verwendet man jedoch ein Optionslistenfeld in einem untergeordneten DIV, wird das Listenfeld im IE (6.x) nicht überdeckt, es liegt immer obenauf.

primitives Beispiel:

untergeordnetes DIV
<div style="position:absolute;left:100px;top:100px;z-index:0;">
<form action="">
<select size=1 name="Auswahl">
<option value="1" selected>erste Eintrag</option>
<option value="2">zweiter Eintrag</option>
</select>
</form>
</div>

übergeordnetes DIV (z-index höher)
<div style="position:absolute;left:80px;top:80px;z-index:1;">
<table bgcolor="Yellow" width="80" height="80">
<tr>
<td width="80" height="80">Test</td>
</tr>
</table>
</div>

Ich habe auch schon alle möglichen und unmöglich CSS-Style Kombinationen durchprobiert. Das Listenfeld bleibt einfach immer oben. Im Firefox funktioniert diese Struktur wie erwartet.

Kennt jemand eine Lösung des Problems mit JavaScript ???

geschrieben von weisnix am 06.10.2006 - 15:40

HTML-Quelltext

1: 
2: 
3: 
4: 
5: 
6: 
7: 
8: 
9: 
10: 
11: 
12: 
13: 
14:

<div style="position:absolute;left:100px;top:100px;background-color:#E0E0E0;z-index:0;">
<form action="">
<select size=1 name="Auswahl">
<option value="1" selected>erste Eintrag</option>
<option value="2">zweiter Eintrag</option>
</select>
</form>
</div>

<div style="position:absolute;left:80px;top:80px;z-index:1;">
<form>
<iframe frameborder="0" style="width:80px;height:80px;background-color:#E0E0E0;border:0px;z-index:2;"></iframe>
</form>
</div>

Leider geht das im IE nur in der Variante. Und das auch nur ab dem IE6 der das iFrame über das Select legt.

Ab dem IE7 soll das aber mit dem sogenannten "windowed Controls“ auch über CSS gehen.

Sollte das Optionsfeld komplett verdeckt sein und erst auf irgend eine Art erscheinen, geht das auch über display:none; - display:block;