Z-index im IE6

[info]

hallo!

ich habe mich durch das forum mit der suchfunktion gehangelt und auch schon das web durchsucht und in einem anderen forum diese frage gestellt, aber bisher konnte mir noch keiner bei meinem problem helfen.

folgendes problem:

ich möchte eine navigation bauen, die aus übereinander lappenden elementen bestetht. diese sind per z-index über einander gelegt.
ein element besteht aus 2 bildern. eins für den normal-zustand und eins für den hover-zustand. dazu kommt noch ein text der den beschreibt um was es geht wenn man auf den link geklickt hat.

nun nimmt das problem seinen lauf.

ich habe bisher 2 möglichkeiten getestet und keine von beiden unter dem IE 6/7 zum laufen bekommen.

firefox, opera, safari (beta für windows) hat alles geklappt nur der IE6/7 nicht.

folgendes:
man soll sowohl auf das bild als auch auf den text mit der maus fahren können, damit der hover-status aktiviert wird.
beim "hovern" soll sich das bild ändern und der text auch. der text soll aber NICHT im bild integriert sein, da SUMAs das sonst nicht lesen können.

ich hab das so gelöst:

<a class="test123" href="index2.html">
<ul id="box_startseite">

<li class="spacer"><h2>
<ahref="index2.html">&nbsp;&nbsp;Startseite</a></h2></li>

</ul>

</a>

und hier der css-code:

#box_startseite{
position: absolute;
display:block;
width: 152px;
height: 153px;
margin-top: 50px;
z-index: 0;
background-color: transparent;
}

.test123{

}

.spacer{
padding-top: 133px;
padding-left: 0px;

list-style-type: none;

}

.spacer h2{
font-size: 17px;
text-decoration: none;

}

.spacer a {
border: 0px solid black;
padding-top: 133px;
padding-right: 60px;
padding-bottom:2px;
padding-left:0px;
background-image:url(../images/navi/startseite_normal.gif);
background-position:center;
background-attachment:scroll;
background-repeat:no-repeat;
color:  #0c5259;
text-decoration: none;
}

.spacer a:hover {
color: black;
border: 0px solid black;
padding-top: 133px;
padding-right: 60px;
padding-left:0px;
background-image: url(../images/navi/startseite_hover.gif);
background-position:center;
background-attachment:scroll;
background-repeat:no-repeat;
color:  #0c5259;
text-decoration:none;
}

#box_startseite:hover{
position: absolute;
z-index: 100;
}

der IE erkennt zwar den hover-zustand und wechselt das bild dementsprechend, aber er überlappt das aktive element nicht.

das heißt der z-index im hover element ist ihm absolut wurst

und einen <a href>-tag um ein div-element geht nicht (da z-index nur für block-elemente wie divs gedacht ist und <ul> ist ja keins), das hab ich als erstes ausprobiert.

deswegen bin ich auf diese sehr "kreative" lösung gekommen. die wie gesagt im FF, Opera und Safari(beta) wunderbar funktioniert.

ich hoffe mein problem ist klar geworden und mir kann geholfen werden. :)

mfg

[wahsaga]

hi,

<a class="test123" href="index2.html">
<ul id="box_startseite">

A als inline-Element darf kein UL enthalten.

und einen <a href>-tag um ein div-element geht nicht

Stimmt, Div darf es genauso wenig enthalten.

(da z-index nur für block-elemente wie divs gedacht ist und <ul> ist ja keins)

Quark.
Erstens kannst du aus Sicht von CSS jedes Element per display als block darstellen lassen - und zweitens ist für das "funktionieren" von z-index die Positionierung per position entscheidend.

deswegen bin ich auf diese sehr "kreative" lösung gekommen. die wie gesagt im FF, Opera und Safari(beta) wunderbar funktioniert.

Die trotzdem hochgradiger Unfug, und deshalb ganz sicher keine "Lösung" ist.

gruß,
wahsaga

[Cheatah]

Hi,

(da z-index nur für block-elemente wie divs gedacht ist und <ul> ist ja keins)
Quark.
Erstens kannst du aus Sicht von CSS jedes Element per display als block darstellen lassen - und zweitens ist für das "funktionieren" von z-index die Positionierung per position entscheidend.

darüber hinaus ist <ul> üblicherweise ein Element vom Typ display:block. Das spielt zwar für den z-index (wie gesagt) keine Rolle, sollte aber dennoch erwähnt werden.

Cheatah

[Elya]

Hallo info,

ich möchte eine navigation bauen, die aus übereinander lappenden elementen bestetht. diese sind per z-index über einander gelegt.
ein element besteht aus 2 bildern. eins für den normal-zustand und eins für den hover-zustand. dazu kommt noch ein text der den beschreibt um was es geht wenn man auf den link geklickt hat.

Klingt kompliziert. Schon mal über die Verwendung von Hintergrundbildern für die Links nachgedacht? Z.B. wie in diesem Beispiel?

Gruß aus Köln-Ehrenfeld,

Elya

[info]

hi und danke für deine antwort!

ja habe ich, aber dann hab ich immernoch das problem mit dem z-index. denn auch wenn das hintergrundbild dann angezeigt wird, so ist es immernoch "hinter" den anderen navigationselmenten. es soll aber nach vorne rücken.

ich such mittlerweile schon 3 tage im netz und hab noch keine lösung gefunden. das ist echt zum haare ausraufen. damit du weißt was ich mein poste ich hier jez mal 2 links auf bilder bei denen ersichtlicher wird was ich meine.

Link1 - Navi Element normal
http://www.bilder-hosting.de/show/OCUJW.html

Link2 - Navi Element hover
http://www.bilder-hosting.de/show/OCVZI.html

wenn ich die nicht schon gepostet habe. :)

..wie gesagt, im FF, opera und safari funktioniert das wunderbar...nur der IE macht zicken..er lässt das element im hintergrund und stellt es nicht nach vorne. :(

gruß

[Elya]

Hallo info,

ja habe ich, aber dann hab ich immernoch das problem mit dem z-index. denn auch wenn das hintergrundbild dann angezeigt wird, so ist es immernoch "hinter" den anderen navigationselmenten. es soll aber nach vorne rücken.

so?

ich such mittlerweile schon 3 tage im netz und hab noch keine lösung gefunden.

wenn's das war, kann ich das nicht so ganz glauben, wonach hast Du gesucht? Suche nach "z-index bei hover verändern ie" gibt als ersten Treffer diese Lösung aus*.

Gruß aus Köln-Ehrenfeld,

Elya

* fürs Archiv: außer z-index bei hover noch eine weitere Eigenschaft ändern, z.B. background-color auf transparent setzen