:strip_exif()/u/54992/idlogo_anim.gif?f=community)
Hey!
Ik ben bezig met een rewrite van een site om hem standards compliant te maken. Ik maak gebruik van Anne's fixed positioning voor het "framework" van de site en suckerfish dropdown voor het menu.
Nu is het probleem dat het suckerfish menu niet werkt in een absoluut gepositioneerde div. Wat werkt niet? De menus klappen wel uit, maar zodra de cursor buiten de (binnenste) <li> (maar wel nog binnen het submenu!) gaat klapt het menu weer in. Als het divje waar het menu in staat niet absoluut gepositioneerd is werkt dat wel! Ik wil het menu echter graag absoluut gepositioneerd omdat dat het lekkerst werkt (zonder floats) vind ik.
Ik heb het voor FireFox en Opera opgelost door de buitenste uls een positieve z-index te geven. IE (5.5 en 6) boeit dat helaas niet zo. Niet alleen werkt de hover niet zodra je buiten de li komt, het menutje lijkt achter het binnenste menu en op dezelfde hoogte als de content te staan. (zal wel hetzelfde probleem zijn)
De gestripde code:
Hier de volledige testcase: CLICKIE
De oplossingsrichtingen lijken mij:
• Niet absoluut positioneren maar floaten (als dat maar goed gaat in IE 5.5)
• die z-index fixen (hoort te werken vanaf IE 4 toch?)
Ik ben bezig met een rewrite van een site om hem standards compliant te maken. Ik maak gebruik van Anne's fixed positioning voor het "framework" van de site en suckerfish dropdown voor het menu.
Nu is het probleem dat het suckerfish menu niet werkt in een absoluut gepositioneerde div. Wat werkt niet? De menus klappen wel uit, maar zodra de cursor buiten de (binnenste) <li> (maar wel nog binnen het submenu!) gaat klapt het menu weer in. Als het divje waar het menu in staat niet absoluut gepositioneerd is werkt dat wel! Ik wil het menu echter graag absoluut gepositioneerd omdat dat het lekkerst werkt (zonder floats) vind ik.
Ik heb het voor FireFox en Opera opgelost door de buitenste uls een positieve z-index te geven. IE (5.5 en 6) boeit dat helaas niet zo. Niet alleen werkt de hover niet zodra je buiten de li komt, het menutje lijkt achter het binnenste menu en op dezelfde hoogte als de content te staan. (zal wel hetzelfde probleem zijn)
De gestripde code:
HTML:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
| <style> /* Layout */ div#wrapper { /* staat gecentreed in de pagina */ margin: 0 auto; padding: 0; width: 750px; text-align: left; } div#nav { padding: 60px 0 0 0; position: relative; width: 170px; } div#content { width: 579px; position: relative; left: 170px; z-index: 0; /* kan ook zonder, maakt geen verschil */ } /* Relevante Suckerfish code */ div#nav ul { margin: 0; padding: 0; list-style: none; } div#nav ul li { position: relative; } div#nav ul li ul { display: none; position: absolute; z-index: 10; } div#nav ul li:hover ul { display: block; position: absolute; } </style> <body> <div id="wrapper"> <div id="nav"> <ul id="navlist"> <!-- HET menu --> <li><a href="#">WELKOM</a></li> <li>BLA <ul> <!-- submenu --> <li><a href="#">sweet</a></li> <li><a href="#">kewl</a></li> </ul> </li> </ul> </div> <div id="content">Content</div> </div> </body> |
Hier de volledige testcase: CLICKIE
De oplossingsrichtingen lijken mij:
• Niet absoluut positioneren maar floaten (als dat maar goed gaat in IE 5.5)
• die z-index fixen (hoort te werken vanaf IE 4 toch?)
offtopic:
En ARGH wat een gezeik om lists goed te krijgen in IE quirks
En ARGH wat een gezeik om lists goed te krijgen in IE quirks
[ Voor 12% gewijzigd door JayVee op 28-01-2005 16:33 ]
ASCII stupid question, get a stupid ANSI!