menuknop verschuift bij IE
Het probleem is dat in IE de 4de menuknop (waar een drop-down menu uitkomt) dat deze ineens naar onder wordt geschoven en niet meer in de "menubalk" staat.
Heeft iemand een idee wat ik hier tegen kan doen?
desbetreffende CSS:
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
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
#menu {
margin:0;
padding:0;
height:35px;
width:960px;
background-image:url(../images/button.png);
background-repeat:repeat-x;
}
#menu li a {
display:block;
font-weight:bold;
color:#ffffff;
background-image:url(../images/button.png);
width:150px;
height:35px;
text-align:center;
font-size:15pt;
float:left;
text-decoration:none;
line-height:2;
}
#menu li a:hover, #menu li a.current {
background-image:url(../images/button_hover.png);
color:#6d4f00;
}
li a.drop-down {
display:block;
font-weight:bold;
font-size:5pt;
color:#ffffff;
background-image:url(../images/button.png);
width:150px;
height:20px;
text-align:center;
padding:0;
text-decoration:none;
}
li a.drop-down:hover, li a.drop-down:active {
background-image:url(../images/button_hover.png);
color:#6d4f00;
}
ul.drop-down {
list-style-type:none;
font-size:8pt;
margin-left:450px;
margin-top:35px;
position:absolute;
height:20px;
width:150px;
left:-1000px; /* de ul is uit beeld */
}
ul.drop-down li {
list-style-type:none;
}
li:hover ul.drop-down {
left:auto; /*de ul komt terug dus, je krijgt een drop-down menu */
}
margin:0;
padding:0;
height:35px;
width:960px;
background-image:url(../images/button.png);
background-repeat:repeat-x;
}
#menu li a {
display:block;
font-weight:bold;
color:#ffffff;
background-image:url(../images/button.png);
width:150px;
height:35px;
text-align:center;
font-size:15pt;
float:left;
text-decoration:none;
line-height:2;
}
#menu li a:hover, #menu li a.current {
background-image:url(../images/button_hover.png);
color:#6d4f00;
}
li a.drop-down {
display:block;
font-weight:bold;
font-size:5pt;
color:#ffffff;
background-image:url(../images/button.png);
width:150px;
height:20px;
text-align:center;
padding:0;
text-decoration:none;
}
li a.drop-down:hover, li a.drop-down:active {
background-image:url(../images/button_hover.png);
color:#6d4f00;
}
ul.drop-down {
list-style-type:none;
font-size:8pt;
margin-left:450px;
margin-top:35px;
position:absolute;
height:20px;
width:150px;
left:-1000px; /* de ul is uit beeld */
}
ul.drop-down li {
list-style-type:none;
}
li:hover ul.drop-down {
left:auto; /*de ul komt terug dus, je krijgt een drop-down menu */
}
Gewijzigd op 26/05/2012 13:51:20 door Dennis Jacobs
dan kunnen we de pagina openen en eens eenkeer door de css rommelen en proberen
;)
volgens mij loopt het fout omdat ul een beetje plaats toevoeg aan de regel en dat gebeurt enkel bij IE
Kijk eens of je geen ander teken kan gebruiken dan ul of dat je dat je die ruimte kan aanpassen
Maar de ik heb de ul gestript van zijn opmaak dus houd ik alleen de eigenschappen over, toch?
Hoe bedoel je trouwens een ander "teken"? Ik bedoel hoe wil je anders een menu maken als met ol/ul?