✔ Z-index Problem in IE6/7

[connexo]

Hallo,

ich habe aktuell folgendes Problem:

Neben einem Label vor einem Texteingabefeld biete ich einen Info-Button an. Ein Klick darauf macht per Javascript einen DIV-Block sichtbar, der vorher display: none hatte.

In Firefox, Safari und Opera ist alles okay. Im IE erscheint der DIV unterhalb der Labels und der Inputfelder. Auch ein Hochsetzen des z-index auf 999 brachte keine Änderung. Hier der HTML-Code:

<div class="formularZeile">
	        <label for="vorname">Vorname</label>
	        <a href="javascript:void(0);" class="infoLink" title="mehr Infos" onclick="toggleById('vornameHilfeLayer');">mehr Infos</a>
	        <div class="layerKlein hiddenByJs" id="vornameHilfeLayer">
                <div class="oben"></div>
                <div class="unten"></div>
                <a class="schliessMuskel" onclick="this.parentNode.style.display='none';">schließen</a>
                <p>Hier weitere Infos zum Feld.</p>
            </div>
	        <input class="text" type="text" id="Text1" name="vorname" />
	        <div class="formularFehlerMeldung"></div>
	        <br class="clear" />
	    </div>

Der dazugehörige CSS-Block:

/* ------ Anfang Formulargestaltung ------ */

.formularZeile {
	height: 25px;
	margin: 5px 0;
	position: relative;
	vertical-align: middle;
}

.formularZeile .infoLink {
	float: left;
}

.formularZeile label {
	float: left;
	font-size: 12px;
	padding-right: 10px;
        z-index: 1;
}

.formularZeile input.text {
	background-color: #fff;
	border-color: #bbb700 #fff100 #fff100 #bbb700;
	border-style: solid;
	border-width: 1px;
	font-size: 12px;
	height: 13px;
	left: 125px;
	margin: 0;
	padding: 2px;
	position: absolute;
	width: 214px;
        z-index: 1;
}

.fehler input.text {
	border-color: #e60003;
	color: #e60003;
	z-index: 1;
}

.formularZeile .formularFehlerMeldung {
	position: absolute;
	color: #e60003;
	display: none;
}

div.formularZeile div.layerKlein {
	color: #000;
	left: -3px;
	position: absolute;
	top: 20px;
        z-index: 999;
}

/* .:.:.:. Ende Formulargestaltung .:.:.:. */

Wer hat eine Idee?

 

[Maik]

Hi,

z-index greift nur in Verbindung mit einer Angabe zu position (absolute oder relative), was bei dir nicht in allen Regeln enthalten ist.

Das Thema wird dann mal ins CSS-Forum verschoben.

mfg Maik

 

[connexo]

Einfügen von

.formularZeile * {
	position: relative;
}

brachte aber leider auch keine Besserung

 

[Maik]

Ich hab dein Konstrukt mal in eine Testseite eingesetzt, kann darin aber überhaupt kein Darstellungsproblem mit den Schichtpositionen im IE6/7 entdecken, sprich die Box #vornameHilfeLayer überdeckt das Formularelement.

mfg Maik

 

[Maik]

Lasst Bilder sprechen



mfg Maik

 

[connexo]

Dann stellt sich die Frage, welche umgebenden Faktoren hier einen Einfluss haben können, der zum gezeigten unerwünschten Verhalten führt. Hast Du da eine Idee, an welchen Schrauben ich mal drehen könnte?

 

[Maik]

Wo da der Hebel anzusetzen ist, lässt sich im "Blindflug" nicht beantworten.

mfg Maik

 

[connexo]

Ich frag ja auch nach Hinweisen / Ideen, nicht nach Lösungen.

Anything, anyone?

 

[Maik]

Dazu wirst du dennoch etwas mehr vom Quellcode (HTML + CSS) zeigen, oder den Link zur Seite nennen müssen, es sei denn, es kommt hier noch ein User mit der Glaskugel unter'm Arm, oder "Seher-Qualitäten" vorbei.

mfg Maik

 

[connexo]

Link zur Seite geht nicht, da ich in einem abgeschotteten System entwickle (ist infrastrukturell durch den Auftraggeber bedingt).

Hier das CSS für den div.layerKlein:

div.layerKlein {
	background-color: #fff;
	border-color: #f2ed00;
	border-style: solid;
	border-width: 0 2px;
	display: block;
	font-size: 11px;
	margin-bottom: 20px;
	padding: 9px 8px 9px 12px;
	width: 156px;
        z-index: 999;
}

div.layerKlein div.oben {
	background: transparent url(../media/images/shared/layerKleinOben.png) no-repeat 0 0;
	top: -1px;
	left: -2px;
}

div.layerKlein div.unten {
	background: transparent url(../media/images/shared/layerKleinUnten.png) no-repeat bottom left;
        bottom: -1px;
	left: -2px;
}

div.layerKlein div.oben,
div.layerKlein div.unten {
	margin: 0;
	padding: 0;
	position: absolute;
}

div.layerKlein a.schliessMuskel,
div.layerKlein a.schliessMuskel:visited {
	float: right;
	right: -4px;
	position: relative;
	top: -4px;
}

Hier das CSS des umgebenden Inhaltscontainers:

#basisTemplateA div#inhaltsContainer {
	width: 741px;
}

Hier das Javascript, was die Ein-/Ausblendung steuert:

function toggleById (id) {
    if (document.getElementById && document.getElementById(id)) {
        var myElem = document.getElementById(id);
        if (myElem.style.display=='none' || myElem.style.display=='') {
            myElem.style.display='block';
        }
        else {
            myElem.style.display='none';
        }
    }
    else {
        return false;
    }
}

Ansonsten hier noch die CSS-Regeln für html und body:

html {
	margin-bottom: 0.01em;
	min-height: 100%;
}

body {
	background-color: #fff100;
	color: #000;
	font: normal normal normal 12px/15px arial, helvetica, sans-serif;
	width: 978px;
}

Zu allererst wird die reset.css von Eric Meyer geladen:

@charset "UTF-8";

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

/* remember to define focus styles! */
:focus {
	outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse; 	/* default is separate.  */
	border-spacing: 0; 		/* in IE6 "border-spacing: 0;" doesn't work with "border-collapse: collapse;" */
}

Hier noch Doctype und Encoding:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">

<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />