nicht angemeldet
select-box ignoriert z-index im IE
gibt es eine lösung für folgendes problem, hab schon gegooglet, doch bisher nichts gefunden. ich habe ein formular feld (select-box) auf einem layer positioniert. ein weiterer layer liegt über diesem layer. dem layer mit der select-box habe ich einen niedrigern z-index gegeben als dem darüber liegenden. trozdem ist die box immer oben. ich habe gelesen, dass das select element den z-index ignoriert. weiss jemand einen rat, ausser, das layout zu anzupassen?
nachfolgend mein html-code.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="de">
<head>
<meta http-equiv="Content-Language" content="de" />
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
<style type="text/css" media="screen"><!--
body { font-size: 11px; font-family: arial, helvetica, serif; background-color: #444; margin: 0; padding: 10px }
#Ebene1 { background-color: #960; visibility: visible; position: absolute; z-index: 5; top: 102px; left: 10px; width: 346px; height: 215px }
#Ebene2 { background-color: #900; visibility: visible; position: absolute; z-index: 1; top: 179px; left: 260px; width: 346px; height: 215px }
#unavi { background-color: fuchsia; position: relative; z-index: 20; width: 100px; height: 45px; float: left }
.teste { background-color: orange; position: relative; z-index: -10; top: 5px; left: -30px; width: 100px; height: 60px }
.formulare_auswahl { font-size: 10px; margin-top: 2px; margin-bottom: 2px; position: relative; z-index: -10; top: 5px; left: 10px; width: 70px }
--></style>
<script language="JavaScript1.2" src="../script_nav.js"> </script>
</head>
<body >
<div id="unavi"> </div>
<div class="teste">
<select name="selectName" class="formulare_auswahl">
<option value="one">JaJaJaJaJaJa</option>
<option value="two">NeinNeinNeinNeinNein</option>
<option value="two">Ja, aberJa, aberJa, aberJa, aber</option>
</select><input type="text" name="textfieldName" size="24"/>
</div>
<div id="Ebene1"></div>
<div id="Ebene2">
<select name="selectName" class="formulare_auswahl">
<option value="one">JaJaJaJaJaJa</option>
<option value="two">NeinNeinNeinNeinNein</option>
<option value="two">Ja, aberJa, aberJa, aberJa, aber</option>
</select></div>
</body>
</html>
-
Hallo klickme,
Soweit mir bekannt ist, gibt es zwei Loesungen, die auch im IE funktionieren, Firefox macht das ohnehin richtig.
1. Select-box beim Einblenden der ueberdeckenden Ebene auf unsichtbar setzen (visibility:hidden)
oser
2. Die von Joe King beschriebene Methode mit dem iframeGruß,
Dieter