Problem med dropdown-meny och z-index i IE

retypejonas · 2009-04-01, 00:37

Hej. Har stött på ett sjukt enerverande problem som jag inte lyckas komma runt.

Har en site som är uppbyggd så att det är en container div, sedan flytande (float:left) horizontella divvar för header, innehåll och sidfot.

Problemet är att jag vill lägga en dropdown-meny i headern... som poppar ut en div vid mouseover över resten av sidan.

I firefox & safari fungerar det fint... men i ie6 & ie7 så vägrar sig den utpoppande divven att lägga sig över nästa div.

Har fibblat med z-index i all oändlighet nu. Satt typ 9999999 på menyn och divvarna som poppar upp och negativt på resten, osv. Testat att göra ett eget javascript och testat att slänga in ett tiotal färdiga exempel. Testade t.om. att slå av javascripten och bara sätta display:block; på en av dom dolda divvarna. Men icke.

Bifogar en bild vad som händer vid mouse-over. Det ljusblåa som syns i underkant är en ny div under headern som innehåller en stor tom bild.

Hjälp uppskattas väldigt mycket!

Syke · 2009-04-01, 07:42

Bilden är fin, men bifoga hellre koden

uffe_nordholm · 2009-04-01, 07:49

Läs på www.alist apart.com, leta efter "suckerfish dropdowns". Artikeln visar hur man använder CSS för att göra menyerna.

icehole · 2009-04-01, 15:26

bara en tanke, och rätta mig om jag har fel, men z-index fungerar endast om du har positionerat elementet (t.e.x: position: relative)

retypejonas · 2009-04-01, 16:56

Hej och tack. Har läst och testat exempel från list apart också.

Och ja, z-index fungerar enbart på position:absolute; enligt w3c. Men det går ju inte att sätta det på alla divvar, du förstör man ju det fina i att ha en flytande layout.

Jag löste det nu genom att lägga menydivven i rooten av <body> och lägga det ovanpå headern med position:absolute;... känns inte så snyggt men det fungerar. Tar gärna emot bättre förslag!

Koden/länk lägger jag helst inte ut iom att projektet är hemligt och tål inte dagsljus än så länge

icehole · 2009-04-01, 17:05

Är du säker på att det måste vara absolute?

Givetvis förstör det den flytande layouten, men det var ju din idé att använda z-index

retypejonas · 2009-04-01, 17:26

Citat:

Originally posted by icehole@Apr 1 2009, 17:05
Är du säker på att det måste vara absolute?

Givetvis förstör det den flytande layouten, men det var ju din idé att använda z-index

Det står så här;

http://www.w3schools.com/Css/pr_pos_z-index.asp

Hur skulle man göra utan z-index?

icehole · 2009-04-02, 02:48

Citat:

Ursprungligen postat av retypejonas

Citat:

Ursprungligen postat av icehole

Är du säker på att det måste vara absolute?

Givetvis förstör det den flytande layouten, men det var ju din idé att använda z-index

Det står så här;

http://www.w3schools.com/Css/pr_pos_z-index.asp

Hur skulle man göra utan z-index?

nja, det står bara att den måste vara postionerad genom exempelvis position: absolute

strunt samma, låter ju som att du fått det att fungera för dig

Hjalmarsson · 2009-04-06, 07:51

Explorer över lag har problem med z-index. Bra att veta är att IE6 gör en ny stackorder på positionerade element, så skulle nog våga sätta en 5'a på att du har positionerat det som är efter i DOM'en också

Aktiva användare som för närvarande tittar på det här ämnet: 1 (0 medlemmar och 1 gäster)

Menu

Problem med dropdown-meny och z-index i IE