nicht angemeldet
Hallo Forum,
ich habe eine Seite die dynamisch Tabellen und z.T. Infoboxen anzeigt.
Sind Tabellenfelder mit Inhalt versehen, dann wird eine Infobox geöffnet, die Details zu dem Inhalt anzeigt.
Läuft auch soweit, wenn nicht die Infoboxen beim IE7 hinter den anderen Schaltflächen angezeigt würden. Beim Firefox ist alles richtig.
Ich habe schon mit z-index und position rumgespielt, aber so richtig geändert hat es nichts.
Wie bekomme ich den IE dazu, die Infoboxen immer ganz vorne darzustellen?
Anbei der Mustercode der Seite:
<html>
<head>
<style type='text/css'><!--
table, td {border:1px solid black;}
table {empty-cells:show;}
#box {color:black;background-color:transparent;position:relative;}
#box a {color:#f6e4c1;background-color:#b8ab8f;
font-family:arial, sans-serif;font-size:100%;font-weight:bold;
text-decoration:none;display:block;padding:5px;
border-top:2px solid #e4d9c0;border-right:2px solid #837c6b;
border-bottom:2px solid #837c6b;border-left:2px solid #e4d9c0;}
#box a:visited {color:#f6e4c1;background-color:#b8ab8f;}
#box a:hover {color:#f6e4c1;background-color:#b8ab8f;
text-decoration:none;border-top:2px solid #837c6b;
border-right:2px solid #e4d9c0;border-bottom:2px solid #e4d9c0;
border-left:2px solid #837c6b;}
#box a:active {color:#f6e4c1;background-color:#b8ab8f;}
#box a .info {display:none;}
#box a:hover .info {
color:black;
background:#b8ab8f;
font:14px courier,sans-serif;
display:block;
width:400px;
padding:5px;
text-align:justify;
z-index:3;
background-color:#b8ab8e;
position:absolute;
top:10px;left:10px;
}
#itemgroup {position:relative;}
--></style>
</head>
<body>
<div class='itemgroup'>
<h3>Gruppe</h3>
<table>
<tr>
<td> </td><td> </td><td>Spalte1</td><td>Spalte2</td>
</tr>
<tr>
<td>Nr.1</td>
<td>Text1</td>
<td> </td>
<td>
<div id='box'>
<a href='#'>50<span class='info'>
<table>
<tr><td>User</td><td>Unit</td><td>Amount</td><tr>
<tr><td>Anton</td><td>ZDF</td><td>50</td></tr>
</table>
</span></a>
</div>
</td>
</tr>
<tr>
<td>Nr.2</td>
<td>Text2</td>
<td>
<div id='box'>
<a href='#'>16<span class='info'>
<table>
<tr><td>User</td><td>Unit</td><td>Amount</td><tr>
<tr><td>Berti</td><td>ZDF</td><td>12</td></tr>
<tr><td>Det</td><td>ZDF</td><td>4</td></tr>
</table>
</span></a>
</div>
</td>
<td> </td>
</tr>
<tr>
<td>Nr.3</td>
<td>Text3</td>
<td> </td>
<td>
<div id='box'>
<a href='#'>50<span class='info'>
<table>
<tr><td>User</td><td>Unit</td><td>Amount</td><tr>
<tr><td>Connie</td><td>ZDF</td><td>50</td></tr>
</table>
</span></a>
</div>
</td>
</tr>
</table>
</div>
</body>
</html>
Danke im Voraus
Axel