hallo leutz,
ich habe ein "kleines" problem mit dem ie 6. ich habe einen link, sobald man auf diesen klickt wird ein "overlay" (bildschirm wird abgedunkelt) und ein "popup-fenster" eingeblendet. im oberen bereich gibt es eine selectbox in der man verschiedene einträge auswählen kann.
hier der link:
http://yviwonder.de/Beispiel.html
nun zu meinem problem. während im ie 7 alles wunderbar funzt und das overlay und popup ganz oben liegen und alles überdecken, kann man im ie 6 die selectbox immer noch anklicken, wenn das overlay eingeblendet wird.
hat evtl. jemand eine idee, wie man das beheben kann? das ganze muss nur im ie funktionieren. firefox spielt hierbei keine rolle.
hier der quelltext:
HTML-Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Beispiel</title>
<link href="beispiel.css" rel="stylesheet" type="text/css" media="screen" />
<script type="text/javascript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_showHideLayers() { //v6.0
var i,p,v,obj,args=MM_showHideLayers.arguments;
for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
obj.visibility=v; }
}
//-->
</script>
</head>
<body>
<!-- Anfang Wrapper -->
<div id="wrapper">
<!-- Anfang Navigation -->
<div id="navigation_2">
<table>
<tr>
<th width="175" rowspan="2"></th>
<td width="76"> </td>
<td colspan="2"> </td>
<td width="253"></td>
</tr>
<tr>
<td> </td>
<td width="340"> </td>
<td width="136">Please select your country:</td>
<td><select name="select" size="1" style="width:95%;border:none;font-size:10px;z-index:1;">
<option>...</option>
<option>Germany</option>
<option>France</option>
<option>Italy</option>
</select></td>
</tr>
</table>
</div>
<!-- Ende Navigation -->
<!-- Anfang Submenue -->
<ul id="submenue">
<li> </li>
</ul>
<!-- Ende Submenue -->
<table class="table_2">
<tr>
<td width="134"><input type="checkbox" name="checkbox5" value="checkbox" />
<a href="#" onclick="MM_showHideLayers('centrallocation1','','show','overlay','','show')">Enter details</a></td>
</tr>
</table>
<br />
</div>
</div>
<!-- Ende Wrapper -->
<!-- Anfang Popup -->
<div class="window2" id="centrallocation1">
<ul class="cancel_accept2">
<li class="cancel"><a href="#" title="Cancel" onclick="MM_showHideLayers('centrallocation1','','hide','overlay','','hide')">Cancel</a></li>
<li class="accept"><a href="#" title="Accept" onclick="MM_showHideLayers('centrallocation1','','hide','overlay','','hide')">Accept</a></li>
</ul>
</div>
<!-- Ende Popup -->
<!-- Overlay (Bildschirm abgedunkelt) -->
<div id="overlay"> </div>
</body>
</html>
hier die css-anweisungen:
HTML-Code:
/* ======================
=== 1. Allgemeines ===
====================== */
* {
border:0;
margin:0;
padding:0;
}
html,body {
text-align:left;
font-size:100.01%;
margin:0;
height: 100%;
}
body {
font:0.71em/1.3em Arial, Helvetica, sans-serif;
color:#666;
background-color:#fff;
}
a {
text-decoration:none;
color:#666;
}
a:hover {
color:#f09;
}
/* =======================
=== 2. Seitenaufbau ===
======================= */
/* -------------------
--- 2.1 Wrapper ---
------------------- */
#wrapper {
width:1005px;
height:100%;
}
/* ----------------------
--- 2.3 Navigation ---
---------------------- */
#navigation_2 {
width:1004px;
height:51px;
background-color:#E1E6EB;
border-bottom:1px solid #fff;
}
#navigation_2 table {
width:100%;
border:none;
border-collapse:collapse;
text-align:left;
margin-top:3px;
}
#navigation_2 th {
width:176px;
height:42px;
}
#navigation_2 table td {
height:21px;
padding:0;
}
#navigation_2 input, select {
width:97px;
height:18px;
border:1px solid #7F9DB9;
color:#666;
font-size: 11px;
line-height:160%;
padding:0 0 0 3px;
}
#navigation_2 select {
font-size:11px;
line-height:10px;
}
/* -------------------------
--- 2.4 Fehlermeldung ---
------------------------- */
#error {
width:984px;
height:21px;
background-color:#E1E6EB;
border-bottom:1px solid #96A0BE;
line-height:20px;
color:#f09;
padding:0 0 0 20px;
}
/* --------------------
--- 2.5 Submenue ---
-------------------- */
#submenue {
width:154px;
height:320px;
float:left;
list-style:none;
font-weight:bold;
padding:5px 0 0 20px;
border-right:1px solid #96A0BE;
background:url(../../images/back_submenue.png) repeat-y;
}
#submenue li a {
font-weight:normal;
background:url(../../images/pfeil_magenta.gif) no-repeat 0 3px;
padding-left:12px;
}
.cancel_accept {
list-style:none;
height:25px;
padding:6px 0 0 113px;
}
.cancel_accept li {
float:left;
padding-right:20px;
}
.accept a {
display:block;
width:102px;
height:18px;
text-indent:-9999px;
background:url(btn_accept.png) no-repeat 0 0;
}
.accept a:hover {
background:url(btn_accept2.png) no-repeat 0 0;
}
.cancel a {
display:block;
width:102px;
height:18px;
text-indent:-9999px;
background:url(btn_cancel.png) no-repeat 0 0;
}
.cancel a:hover {
background:url(btn_cancel2.png) no-repeat 0 0;
}
.window2 {
position:absolute;
left:177px;
top:180px;
width:650px;
height:auto;
z-index:100;
background-color:#E1E6EB;
border:1px solid #fff;
visibility: hidden;
}
/* --- Overlay --- */
#overlay {
position: absolute;
top: 0;
left: 0;
z-index:1;
width: 100%;
height: 100%;
background-color:#6585AD;
filter:alpha(opacity=60);
-moz-opacity: 0.6;
opacity: 0.6;
visibility: hidden;
}
sachdienliche hinweise nehme ich gern entgegen.
danke
Typochonder
