nicht angemeldet
CSS Problem mit z-index im IE7
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
-
Yerf!
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.Ich weisß zwar nicht welche "Schaltflächen" du meinst, aber...
<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>das hier ist ungültiges HTML. Ein <span> oder <a> darf keine Tabelle (oder andere Blockelemente) enthalten. Dadurch entsteht im Browser vermutlich eine Dokumentsruktur wie du sie eigentlich nicht erwartest (der Span und der Link werden implizit vor der Tabelle geschlossen).
Gruß,
Harlequin
--
<!--[if IE]>This page is best viewed with a webbrowser. Get one today!<![endif]-->-
Hallo Harlequin,
danke für die schnelle Antwort. Ich schreib das gleich mal um.
Wenn´s dann daran lag, wäre mir ja schon geholfen.Ich weisß zwar nicht welche "Schaltflächen" du meinst, aber...
Ich meinte das span-Element, das dargestellt wird, wenn Inhalt im Tabellenfeld ist. Sieht ja so aus wie eine Schaltfläche ;-)
Gruß
Axel
-
-
Mahlzeit,
<div id='box'>
<div id='box'>
<div id='box'>Eine ID darf in einem Dokument nur genau EINMAL vorkommen (sonst wäre es keine ID mehr). Wenn Du mehreren Elementen die gleichen Eigenschaften verpassen willst, erstelle eine http://de.selfhtml.org/css/formate/zentrale.htm#klassen@title=Klasse und ordne die Elemente dieser Klasse zu.
Vielleicht solltest Du erstmal Dein Dokument validieren und die gefunden Fehler beseitigen ... was dann noch an Nicht-funktionierendem übrig bleibt, kriegen wir hier im Forum schon zum Laufen.
MfG,
EKKi--
sh:( fo:| ch:? rl:( br:> n4:~ ie:% mo:} va:) de:] zu:) fl:{ ss:) ls:& js:|-
Hallo EKKi,
»»... und ordne die Elemente dieser Klasse zu.
Habe ich jetzt gemacht....validieren und die gefunden Fehler beseitigen ...
Spannende Seite. Die kannte ich noch nicht.
Alle angezeigten Fehler sind jetzt behoben.
Nur der Vollständigkeit wegen; Das Muster für den Aufbau habe ich von hier übernommen und angepasst.Hier nun der neue Seitenaufbau:
<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01//EN' 'http://www.w3.org/TR/html4/strict.dtd'><html>
<head>
<title>Item stats</title>
<meta http-equiv='content-type' content='text/html; charset=ISO-8859-1'> <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:30px;left:0px;
}
.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 class='box'><a href='#'>50<span class='info'>
User - Unit - Amount<br>
Anton - ZDF - 50<br></span></a></div></td>
</tr>
<tr><td>Nr.2</td><td>Text2</td>
<td><div class='box'><a href='#'>16<span class='info'>
User - Unit - Amount<br>
Berti - ZDF - 12<br>
Det - ZDF - 4
</span></a></div></td>
<td> </td>
</tr>
<tr><td>Nr.3</td><td>Text3</td>
<td> </td>
<td><div class='box'><a href='#'>50<span class='info'>
User - Unit - Amount<br>
Connie - ZDF - 50<br></span></a></div></td>
</tr>
<tr><td>Nr.4</td><td>Text4</td>
<td> </td>
<td> </td>
</tr>
</table>
</div>
<div><br><br><br><br></div>
</body>
</html>Aber geändert hat sich in der Darstellung noch nichts.
IE: Infobox hinter den Links
Firefox: Alles gutGruß
Axel-
Mahlzeit,
IE: Infobox hinter den Links
Du gibst den Links keinen z-index. Ich vermute mal, dass der IE sie deshalb in der Reihen- bzw. Schichtenfolge darstellt, wie sie definiert wurden ... das letzte zuoberst und auch über eventuell vorher definierten <div>s (auch wenn diese eine z-index-Angabe beinhalten).
MfG,
EKKi--
sh:( fo:| ch:? rl:( br:> n4:~ ie:% mo:} va:) de:] zu:) fl:{ ss:) ls:& js:|-
Tach auch,
das mit dem z-index für die Links habe ich probiert. 1 für die Links und 3 bzw. auch mal 1000 für die <div>s. Es zeigte sich aber kein Unterschied.
Gibt es mit CSS vielleicht noch eine andere Möglichkeit, solche Infoboxen zu erzeugen? Ich hatte das mal in Verbindung mit JavaScript gemacht, aber wenn das abgeschaltet ist, funktioniert das ja dann auch nicht mehr. Mit CSS muß ich ja den entsprechend einzublendenden Bereich einschließen.
Gruß
Axel-
Yerf!
das mit dem z-index für die Links habe ich probiert. 1 für die Links und 3 bzw. auch mal 1000 für die <div>s. Es zeigte sich aber kein Unterschied.
Hm, ich kanns grad nicht ausprobieren, aber gib den DIVs (die müssten die Schuldigen sein) doch mal der Reihe nach absteigenden Z-Index. Solange sie den gleichen Z-Index haben wird wohl immer ein Nachfolgendes Element seinen Vorgänger überdecken. Die Infobox liegt ja innerhalb des DIV und "erbt" damit erst mal den Z-Index des DIV (da dieser positioniert ist).
Gruß,
Harlequin
--
<!--[if IE]>This page is best viewed with a webbrowser. Get one today!<![endif]-->-
Ein Stern, der .... ;-)
Volltreffer. Damit funktioniert es.
...gib den DIVs (die müssten die Schuldigen sein) doch mal der Reihe nach absteigenden Z-Index.
Die Styleinfo´s für 'box' werden jetzt wie vorher zugewiesen.
Für jedes div weise ich z-index direkt zu....
<div class='box' style="z-index:10;">
...
</div>
...
<div class='box' style="z-index:9;">
...
</div>
...Vielen Dank an Euch beide
Axel
-
-
-
-
-