nicht angemeldet
IE6: block wird trotz z-index hinter div dargestellt
Hallo zusammen,
bei folgendem Problem brauche ich Hilfe:
ich habe folgenden Code in der HTMl-Datei:
<a href="index.htm?size=1"> 1 <span>Klicken Sie hier, um die Schriftgröße einzustellen.</span></a>
Dazu folgender CSS-Code, mit dem der Text zwischen >span> und </span> nur bei mouseover nagzeigt wird. Klappt auch alles, aber: die Box, die erscheint, erscheint hinter dem Hauptbereich der Seite... In Netscape und Opera fluppt es übrigens wie gewünscht, zu sehen alles unter http://www.mhis.de/portal-fischerei/
div#head a span {
display:none;
}
div#head a:hover span {
position:absolute;
top:72px;
left:0px;
margin:0;
width:148px;
padding:5px;
display:block;
border:1px solid red;
color:#fff;
background-color:#008;
z-index:5;
}
Die Definition des Hauptbereiches, welcher die Box verdeckt:
div#mainarea {
position:absolute;
top:120px;
left:152px;
margin:0;
border:1px solid silver;
background-image:url(images/bckgrd_01.gif);
z-index:4;
}
div#content {
margin:0 150px 0 0;
padding:20px;
height:100%;
background-color:#fff;
}
Die gesamte CSS liegt unter http://www.mhis.de/portal-fischerei/pf_def.css
Bin für jede Hilfe dankbar!
Gruß,
--
Marc.
Marc.
-
Hallo zusammen,
jetzt beantworte ich meine eigene Frage, weil vielleicht auch ein anderer mal so lange nach einer Antwort suchen wird, wie ich das heute getan habe:
Die Seite ist wie folgt aufgebaut: /* -----------------------------------------------------------------------------------------------+--+ / / | div# | img (Kutter | Fontsize | | H / / | page- | auf See) | 1 2 3 | | E / / | title |--------------------------+--------------| | A / / | | . Aufklappende . | D / / |-----------------------------------------.... Box ......-------------------------------------+--+ / / | div#submenu . mit . | submenu / / |-----------------------------------------.. Hinweisen ..-------------------------------------+-- / / | div# | div#mainarea . zu . | / / | mainmenu | +------------------------... den ......--------------------------| | / / | ul | | . Schrift- . | | M / / | li | | div#content . größen . | | A / / | li | | . . | | I / / | li | | ................ | | N / / | | | | | M / / | form | | | | E / / | _____ _ | | | | N / / | || |_| | | | | U / / | | | | | / / | ____________ | | | | & / / || || | | | / / || div# || | | | M / / || officials || | | | A / / || || | | | I / / || ul || | | | N / / || li || | | | A / / || li || | | | R / / || || | | | E / / || || | | | A / / ||______ || || | / / ||___________________________|__ */
Die Frage war:
ich habe folgenden Code in der HTMl-Datei:
<a href="index.htm?size=1"> 1 <span>Klicken Sie hier, um die Schriftgröße einzustellen.</span></a>
Dazu folgender CSS-Code, mit dem der Text zwischen >span> und </span> nur bei mouseover nagzeigt wird. Klappt auch alles, aber: die Box, die erscheint, erscheint hinter dem Hauptbereich der Seite... In Netscape und Opera fluppt es übrigens wie gewünscht, zu sehen alles unter http://www.mhis.de/portal-fischerei/
Das Problem war, dass div#head a, div#head a span und div#head a:hover span in div#head sind. Der IE - und nur der - ignoriert die Angabe z-index in dem untergeordneten div-Elementen. NAchdem ich für div#head den z-index hochgesetzt habe, klappt es auch IE. - Vielleicht kann es ja jemand anders auch brauchen...
Gruß,
Marc.
-
Noch ein Nachtrag: in diesem speziellen Fall gab es noch ein weiteres Layout-Problem: Mit dem höheren z-index für div#head hatte ich am linken Rand der Seite eine unschöne Überlappung. Daher habe ich die Box für die Schriftgrößenänderung aus div#head herausgenommen. Sie heißt jetzt: div#schrift.
Wenn jemand mal so etwas braucht, findet er hier den gesamten Quelltext:
http://www.mhis.de/portal-fischerei/pf_def.css
Später unter http://www.portal-fischerei.de/ (fürs Archiv)
Gruß,
--
Marc.
-