Javascript menu
Ik heb een probleem met mijn website, bij mij doet mijn site het perfect maar bij andere niet. hieronder zie je een foto dat (rechts) de manier zoals het hoord, (links) zoals het niet hoort en het er bij 10% van de mensen uitziet.
ik heb de onderstaande javascript code gebruikt
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 type="text/javascript">
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\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+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>
Edit:
Zie hier mijn 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
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
#nav{
width: 900px;
height: 35px;
margin: 0 auto;
background: #CE9D27;
}
#nav ul {
padding: 0;
margin: 0;
list-style: none;
line-height: 25px;
}
#nav a {
display: block;
width: 10em;
float: left;
color : #FFFFFF;
font-weight: bold;
font-size: 1em;
font-family: Arial, Helvetica, sans-serif;
text-decoration: none;
background-color: #CE9D27;
border: none;
padding: 2px;
}
#nav li a:hover {
color : #000000;
background-color : #CE9D27;
}
#nav li {
display: inline;
text-transform: uppercase;
float: left;
width: 10em;
}
#nav li ul {
position: relative;
width: 10em;
left: -999em;
}
#nav li ul ul {
margin: -1em 0 0 10em;
}
#nav li:hover ul ul, #nav li.sfhover ul ul {
left: -999em;
}
#nav li:hover ul, #nav li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul {
left: auto;
}
width: 900px;
height: 35px;
margin: 0 auto;
background: #CE9D27;
}
#nav ul {
padding: 0;
margin: 0;
list-style: none;
line-height: 25px;
}
#nav a {
display: block;
width: 10em;
float: left;
color : #FFFFFF;
font-weight: bold;
font-size: 1em;
font-family: Arial, Helvetica, sans-serif;
text-decoration: none;
background-color: #CE9D27;
border: none;
padding: 2px;
}
#nav li a:hover {
color : #000000;
background-color : #CE9D27;
}
#nav li {
display: inline;
text-transform: uppercase;
float: left;
width: 10em;
}
#nav li ul {
position: relative;
width: 10em;
left: -999em;
}
#nav li ul ul {
margin: -1em 0 0 10em;
}
#nav li:hover ul ul, #nav li.sfhover ul ul {
left: -999em;
}
#nav li:hover ul, #nav li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul {
left: auto;
}
EDIT: Probleem opgelost!
Gewijzigd op 01/01/1970 01:00:00 door Bob Duisters
Greetz,
Edit: je site is ook niet valid.
Probleem zit niet in je css, maar in je html opbouw.
Je maakt toch een aantal fouten die de normale browsers niet goed weergeven, bijvoorbeeld:
Code (php)
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
<ul>
<li>Test</li>
<li>
<ul>
<li>blab</li>
<li>blab</li>
</ul>
</li>
</ul>
<li>Test</li>
<li>
<ul>
<li>blab</li>
<li>blab</li>
</ul>
</li>
</ul>
Een ul in een ul moet dus altijd nog in een li tag staan, dan wordt de volgorde zo:
Ul > li > ul.
Gewijzigd op 01/01/1970 01:00:00 door Onbekend Onbekend
Plaats us een klein stukje code (van 1 menuutje bijv)...
Maar je hebt waarschijnlijk loop het met je margin's niet helemaal lekker.. heb dit probleem ook gehad alleen geen idee meer hoe op te lossen. je zei dat hij in FF wel goed deed maar in IE niet.. Dan denk ik door de Margin's want IE is niet zo happy met die codes..
PS test ook eens voor IE6 dan sta je verstelt.. =)