✔ IE-Problem bzgl. z-index

Status
Nicht offen für weitere Antworten.
S

saila

Erfahrenes Mitglied
Hi,

CSS
Code: 
.info_groups {
	border: 0px;
	}

.info_groups span {
	display: none;
	}

.info_groups a:link, .info_groups a:visited {
	border: 0px;
	background: #FFF;
	text-decoration: none;
	z-index: 2;
	}

.info_groups a:hover span, info_groups a:focus span {
	background: #FFF;
	margin-left: 140px;
	top: 330px;
	width: 240px;
	\width: 240px;
	w\idth: 240px;
	height: auto;
	border: 1px solid #dfddce;
	padding: 5px;
	font-family: verdana, arial, helvetica, sans-serif;
	font-size: 0.7em;
	font-style: normal;
	font-weight: normal;
	color: #000;
	text-decoration: none;
	display: block;
	position: absolute;
	z-index: 2;
	}

wird beim IE, O, und NC sauber dargestellt. Beim IE kommt nichts. Kann mir jemand sagen wo das Problem liegen könnte?

Danke.
 
...vergessen.

Ergänzend:
Code: 
<span class="info_groups"><a href="#" target="_self"><img src="img/group_help.jpg" width="40" height="40" alt="Help" border="0" /><span><?php echo $multi_einsatz_i."<br /><br />".nl2br($lang_group_starter_info_a); ?></span></a></span>

Es handelt sich um vier solcher Zeilen, die identisch sind. Ich habe zwischenzeitlich schon <span> in <em> umgewandelt, um eine Verweschlung auszuschliessen. Jedoch ist das Ergebnis ebenfalls Nichts im IE.

Beim IE meine ich gleich-aufwärts Verson 5.
 
Zuletzt bearbeitet:
Warum es im IE nicht funktioniert, kann ich dir leider auch nicht so genau sagen.

Aber vielleicht hilft dir diese Alternative weiter, in der ich den Links eine Klasse .infobox zugewiesen habe?

Das Stylesheet habe ich erfolgreich im IE 5.01, 5.5 und 6.0 getestet (OS: Win2000 SP4).

Code: 
.info_groups {
        border: 0px;
        }

.info_groups a.infobox:link, .info_groups a.infobox:visited {
        border: 0px;
        background: #fff; /* muß 3-stellig sein! */
        text-decoration: none;
        z-index: 2;
        }

.info_groups a.infobox:hover {
        background: #ffffff; /* muß 6-stellig sein! */
        }

.info_groups span {
        display: none;
        }

.info_groups a.infobox:hover span, .info_groups a.infobox:focus span {
        margin-left: 140px;
        top: 330px;
        width: 240px;
        \width: 240px;
        w\idth: 240px;
        height: auto;
        border: 1px solid #dfddce;
        padding: 5px;
        font-family: verdana, arial, helvetica, sans-serif;
        font-size: 0.7em;
        font-style: normal;
        font-weight: normal;
        color: #000;
        text-decoration: none;
        display: block;
        position: absolute;
        z-index: 2;
        }

Code: 
<span class="info_groups"><a class="infobox" href="#" target="_self"><img src="img/group_help.jpg" width="40" height="40" alt="Help" border="0" /><span><?php echo $multi_einsatz_i."<br /><br />".nl2br($lang_group_starter_info_a); ?></span></a></span>
 
Es gibt keine spezielle CSS-Formatierung für die Klasse, sie dient lediglich der Spezifität, damit der IE das Stylesheet "schluckt" ;)

Oder meinst du jetzt was anderes?
 
Ähm.... ich meine - wenn du die Klasse in den a-Tag legst, wie sieht die Klasse selbst aus, weil der Test eben mit einer Klasse die nicht definiert ist zumindest bei mir nicht .
 
Wie gesagt, ich habe die Klasse nicht extra im Stylesheet angelegt und gesondert formatiert - das was ich vorhin gepostet habe, ist der vollständige CSS-Code.

Hast du das Stylesheet auch komplett übernommen, oder lediglich in deinem bestehenden Stylesheet die Klasse eingefügt?

Denn bei mir funktioniert's einwandfrei - hier der komplette Quellcode meines Testdokuments:

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title></title>

<style type="text/css">
<!--
.info_groups {
        border: 0px;
        }

.info_groups a.infobox:link, .info_groups a.infobox:visited {
        border: 0px;
        background: #fff; /* muß 3-stellig sein! */
        text-decoration: none;
        z-index: 2;
        }

.info_groups a.infobox:hover {
        background: #ffffff; /* muß 6-stellig sein! */
        }

.info_groups span {
        display: none;
        }

.info_groups a.infobox:hover span, .info_groups a.infobox:focus span {
        margin-left: 140px;
        top: 330px;
        width: 240px;
        \width: 240px;
        w\idth: 240px;
        height: auto;
        border: 1px solid #dfddce;
        padding: 5px;
        font-family: verdana, arial, helvetica, sans-serif;
        font-size: 0.7em;
        font-style: normal;
        font-weight: normal;
        color: #000;
        text-decoration: none;
        display: block;
        position: absolute;
        z-index: 2;
        }
-->
</style>

</head>
<body>

<span class="info_groups"><a class="infobox" href="#">test<span>info</span></a></span>

</body>
</html>
 

Anhänge

  • 27286attachment.jpg
    27286attachment.jpg
    43,7 KB · Aufrufe: 17
Die Positionierung ist doch schon im Selektor .info_groups a.infobox:hover span, .info_groups a.infobox:focus span definiert. :confused:
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück