IE doet de hover het niet
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
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
#nav, #nav ul, #nav ul ul{
padding: 0;
margin: 0;
list-style: none;
background: url(none.gif) repeat 0 0;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 75%;
}
#nav{
width: 195px;
}
#nav li{
width: 195px;
}
#nav ul{
position: absolute;
width: 195px;
left: -1000px;
margin: -22px 0 0 193px;
font-size: 100%;
}
* html #nav ul{
margin: -23px 0 0 193px;
}
#nav li li{
width: 195px;
}
#nav ul ul{
width: 195px;
margin: -22px 0 0 100px;
font-size: 100%;
}
* html #nav ul ul{
margin: -23px 0 0 100px;
}
#nav li li li{
width: 195px;
}
#nav li:hover ul, #nav li.ie_does_hover ul{
left: auto;
}
#nav li:hover ul ul, #nav li.ie_does_hover ul ul{
left: -1000px;
}
#nav ul li:hover ul, #nav ul li.ie_does_hover ul{
left: auto;
}
#nav a {
display: block;
text-decoration: none;
padding: 2px 4px 3px 4px;
margin: 1px;
}
#nav a:link, #nav a:visited{
background: white;
border: 1px solid black;
color: black;
}
#nav a:hover, #nav a:active{
background: #F0F0F0;
border: 1px solid black;
color: black;
}
#nav b {
display: block;
margin:0;
background-color:#E0E0E0;
}
padding: 0;
margin: 0;
list-style: none;
background: url(none.gif) repeat 0 0;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 75%;
}
#nav{
width: 195px;
}
#nav li{
width: 195px;
}
#nav ul{
position: absolute;
width: 195px;
left: -1000px;
margin: -22px 0 0 193px;
font-size: 100%;
}
* html #nav ul{
margin: -23px 0 0 193px;
}
#nav li li{
width: 195px;
}
#nav ul ul{
width: 195px;
margin: -22px 0 0 100px;
font-size: 100%;
}
* html #nav ul ul{
margin: -23px 0 0 100px;
}
#nav li li li{
width: 195px;
}
#nav li:hover ul, #nav li.ie_does_hover ul{
left: auto;
}
#nav li:hover ul ul, #nav li.ie_does_hover ul ul{
left: -1000px;
}
#nav ul li:hover ul, #nav ul li.ie_does_hover ul{
left: auto;
}
#nav a {
display: block;
text-decoration: none;
padding: 2px 4px 3px 4px;
margin: 1px;
}
#nav a:link, #nav a:visited{
background: white;
border: 1px solid black;
color: black;
}
#nav a:hover, #nav a:active{
background: #F0F0F0;
border: 1px solid black;
color: black;
}
#nav b {
display: block;
margin:0;
background-color:#E0E0E0;
}
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("li");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" hover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" hover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
var sfEls = document.getElementById("nav").getElementsByTagName("li");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" hover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" hover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="menu.js"></script>
<ul id="nav">
<!-- The strange spacing herein prevents an IE6 whitespace bug. -->
<li><a href="/?p=home">Zonder submenu</a></li>
<li><a href="/?p=nederland">Met submenu</a>
<ul>
<li><b>Dit is het submenu</b></li>
<li><a href="#">Link in submenu</a></li>
<li><a href="#">Link in submenu</a></li>
</ul>
</li>
</ul>
<script type="text/javascript" src="menu.js"></script>
<ul id="nav">
<!-- The strange spacing herein prevents an IE6 whitespace bug. -->
<li><a href="/?p=home">Zonder submenu</a></li>
<li><a href="/?p=nederland">Met submenu</a>
<ul>
<li><b>Dit is het submenu</b></li>
<li><a href="#">Link in submenu</a></li>
<li><a href="#">Link in submenu</a></li>
</ul>
</li>
</ul>
Dit is mijn menu, in FF & Chrome werkt de hover prima, in IE8 niet. (Ik heb XP, dus ik kan IE9 niet hebben).
Wat is er knalboem gegaan? En hoe is het weer te fixen?
Edit haha, ik had het in 1 een klein bestandje gedaan, zonder doctype!
Gewijzigd op 26/10/2010 22:11:39 door Dalando De Zuil
Er zijn nog geen reacties op dit bericht.