Overlappen IE
een lijst maken met daarin items, en die items kunnen dan door css en javascript weer uitklappen in een lijst met eventueel items.
Ik heb het volgende probleem:
de code hieronder werkt probleemloos in FF2. In IE7 werkt hij ook, maar daar worden de uitgeklapte lijstitems overlapt door de niet uitgeklapte items die eronder staan. In IE6 klapt alleen het bovenste item uit.
Code (php)
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
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
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
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
<ul class="eventlist" id="nav">
<li class="eventitem">
<ul class="inlist">
<li class="initem"></li><li class="initem"></li>
</ul>
<div class="clear"></div>
<ul class="event_itemlist">
data
</ul>
</li>
</ul>
.inlist {
padding: 0;
margin: 0;
list-style: none;
}
.initem {
float: left;
position: relative;
width: 252px;
background: white;
}
.eventlist { /* alle lists */
padding: 0;
margin: 0;
list-style: none;
width: 504px;
}
.eventitem { /* alle list items */
float: left;
position: relative;
width: 504px;
background: white;
border-bottom: 1px solid #C0C0C0;
}
.event_itemlist { /* sub items */
padding: 6px;
display: none;
position: absolute;
top: 1em;
left: 0;
background: white;
list-style: none;
width: 492px;
float: left;
z-index: 10;
}
.event_itemlist p {
margin: 0;
}
.event_itemlist img {
float: left;
margin: 10px;
border: 0;
}
.event_itemlist a {
border: 0;
margin: 0;
padding: 0;
color: white;
}
.eventitem>ul { /* postitie resetten voor alle browsers behalve IE */
top: auto;
left: auto;
}
.eventitem:hover ul, .eventitem.over ul { /* lists nested onder hovered list items */
display: block;
}
javascript:
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}
window.onload=startList;
<li class="eventitem">
<ul class="inlist">
<li class="initem"></li><li class="initem"></li>
</ul>
<div class="clear"></div>
<ul class="event_itemlist">
data
</ul>
</li>
</ul>
.inlist {
padding: 0;
margin: 0;
list-style: none;
}
.initem {
float: left;
position: relative;
width: 252px;
background: white;
}
.eventlist { /* alle lists */
padding: 0;
margin: 0;
list-style: none;
width: 504px;
}
.eventitem { /* alle list items */
float: left;
position: relative;
width: 504px;
background: white;
border-bottom: 1px solid #C0C0C0;
}
.event_itemlist { /* sub items */
padding: 6px;
display: none;
position: absolute;
top: 1em;
left: 0;
background: white;
list-style: none;
width: 492px;
float: left;
z-index: 10;
}
.event_itemlist p {
margin: 0;
}
.event_itemlist img {
float: left;
margin: 10px;
border: 0;
}
.event_itemlist a {
border: 0;
margin: 0;
padding: 0;
color: white;
}
.eventitem>ul { /* postitie resetten voor alle browsers behalve IE */
top: auto;
left: auto;
}
.eventitem:hover ul, .eventitem.over ul { /* lists nested onder hovered list items */
display: block;
}
javascript:
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}
window.onload=startList;
Gesponsorde koppelingen:
Code (php)
1
.eventitem:hover
Kent die browser niet.
Gewijzigd op 01/01/1970 01:00:00 door Martijn B
En de overlapping in IE7, is daar iets aan te doen?
Al van alles geprobeert met z-index waardes.
http://photo.bus3.nl/nextevents.txt
Kevichill schreef op 03.03.2008 23:08:
Bumpen pas na 24 uur RT!
En hoeveel uur zit er dan nu tussen?
Oja het uitgeklapte menu wordt uitgelijnd met position:absolute en left: auto.
Een nummerieke waarde opgeven bij left: kan dus niet omdat de website is gecentreerd.
Gewijzigd op 01/01/1970 01:00:00 door RT
verder KeviChill; kijk even naar de postdata's voordat je een bericht plaatst. 01-03 en 03-03 zit toch wel degelijk 2 dagen verschil tussen (of leef je ergens anders?)
Deze gebruikt standaard al absolute positioning, waarschijnlijk nodig voor de dropdown. Maargoed waarom klapt het menu in IE7 niet normaal uit? Dus over de andere elementen eronder heen?
gr
Gewijzigd op 01/01/1970 01:00:00 door RT
