De PHPhulp kroeg
Firefox/IE position:absolute;
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
98
99
100
101
102
103
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
98
99
100
101
102
103
<html>
<head>
<title></title>
<style type="text/css" media="screen">
/**************** menu coding *****************/
body{
background: #000;
}
#menu {
z-index: 100;
margin: 0;
padding:0;
position:absolute;
width: 100%;
float: left;
font-family:verdana;
font-size:12px;
color: #FFF;
}
#menu a, a:visited, a:active{
color: #FFF;
}
#menu ul {
list-style: none;
margin: 0;
padding: 0;
float: left;
}
#menu ul ul {
position: absolute;
background: #EEE;
color: #000;
}
#menu ul li a:hover{
text-decoration: underline;
}
div#menu ul li:hover ul{
display: block;
}
div#menu ul ul {
display: none;
}
#menu ul li ul{
margin-left: 5px;
}
#menu ul li ul li a, a:visited, a:active{
color: #000;
}
</style>
<!--[if IE]>
<style type="text/css" media="screen">
body {
behavior: url(hover.htc);
}
</style>
<![endif]-->
</head>
<body>
<div id="menu">
<ul>
<li>| Intro |
<ul>
<li><a href="#" >blablablablabla</a></li>
<li><a href="#" >blablablablabla</a></li>
<li><a href="#" >blablablablabla</a></li>
</ul>
</li>
</ul>
<ul>
<li> <a href="#" >Een Goed Gevoel</a> |</li>
</ul>
<ul>
<li> <a href="#" >Wij zijn Wij</a> |</li>
</ul>
<ul>
<li> Onze Producten |
<ul>
<li><a href="#" >blablablablabla</a></li>
<li><a href="#" >blablablablabla</a></li>
<li><a href="#" >blablablablabla</a></li>
</ul>
</li>
</ul>
<ul>
<li> <a href="#" >Het Goede Doel</a> |</li>
</ul>
<ul>
<li> <a href="#" >Nieuws</a> |</li>
</ul>
<ul>
<li> <a href="#" >Contact</a> |</li>
</ul>
<ul>
<li> <a href="#" >Gastenboek</a> |</li>
</ul>
</div>
</body>
</html>
<head>
<title></title>
<style type="text/css" media="screen">
/**************** menu coding *****************/
body{
background: #000;
}
#menu {
z-index: 100;
margin: 0;
padding:0;
position:absolute;
width: 100%;
float: left;
font-family:verdana;
font-size:12px;
color: #FFF;
}
#menu a, a:visited, a:active{
color: #FFF;
}
#menu ul {
list-style: none;
margin: 0;
padding: 0;
float: left;
}
#menu ul ul {
position: absolute;
background: #EEE;
color: #000;
}
#menu ul li a:hover{
text-decoration: underline;
}
div#menu ul li:hover ul{
display: block;
}
div#menu ul ul {
display: none;
}
#menu ul li ul{
margin-left: 5px;
}
#menu ul li ul li a, a:visited, a:active{
color: #000;
}
</style>
<!--[if IE]>
<style type="text/css" media="screen">
body {
behavior: url(hover.htc);
}
</style>
<![endif]-->
</head>
<body>
<div id="menu">
<ul>
<li>| Intro |
<ul>
<li><a href="#" >blablablablabla</a></li>
<li><a href="#" >blablablablabla</a></li>
<li><a href="#" >blablablablabla</a></li>
</ul>
</li>
</ul>
<ul>
<li> <a href="#" >Een Goed Gevoel</a> |</li>
</ul>
<ul>
<li> <a href="#" >Wij zijn Wij</a> |</li>
</ul>
<ul>
<li> Onze Producten |
<ul>
<li><a href="#" >blablablablabla</a></li>
<li><a href="#" >blablablablabla</a></li>
<li><a href="#" >blablablablabla</a></li>
</ul>
</li>
</ul>
<ul>
<li> <a href="#" >Het Goede Doel</a> |</li>
</ul>
<ul>
<li> <a href="#" >Nieuws</a> |</li>
</ul>
<ul>
<li> <a href="#" >Contact</a> |</li>
</ul>
<ul>
<li> <a href="#" >Gastenboek</a> |</li>
</ul>
</div>
</body>
</html>
nu doettie de position bij firefox gewoon netjes eronder en bij internet explorer zettie m helemaal scheef:S er is iets met die #menu ul ul { in de CSS code denkik..
Gewijzigd op 01/01/1970 01:00:00 door Tijn
Als je zelf al denkt dat het in de CSS code zit, waarom geef je dan ook nog eens heel je javascript?
IE en FireFox verschillen in vele opzichten van elkaar, zo ook in de manier van het behandelen van scripts. Probeer eens wat uit en kijk hoe beide browsers er op reageren, of Google erover.
die JS is idd niet egt nodig maar kijk zet maar eens deze:
div#menu ul ul {
display: none;
}
gewoon naar
div#menu ul ul {
/*display: none;*/
}
zodat die niks verbergt dan zieje dat die blabla wat er onder zou moeten komen met een mouseover in internet explorer helemaal ergens in het midden zit.. en bij firefox gewoon netjes eronder..
als ik dan bij #menu ul ul { de position verander in relative; dan word hij daar opzich recht weergeven maar wanneer dan de text in het submenuutje breeder is rektie alles helemaal uit en klopt het weer niet.
door i.p.v.
behavior: url(hover.htc);
een gewone javascript functie te gebruiken:
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
<script language="JavaScript">
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" ie_does_hover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" ie_does_hover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" ie_does_hover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" ie_does_hover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>
Gewijzigd op 01/01/1970 01:00:00 door Tijn