[HTML] probleem met list
Toen ik vanmiddag een simpel menutje aan het maken was kwam ik op het volgende probleem, in alle browsers behalve IE wordt het menu goed weer gegeven, nu is mijn vraag of ik dit op een of andere manier op kan lossen.
HTML:
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
<div id="navigation">
<ul>
<li><a href="#" class="toggle" id="nieuws">Nieuws</a></li>
<ul style="padding:3px 0px 3px 20px;" id="nieuws_content">
<li>Nieuws toevoegen</li>
<li>Nieuws aanpassen</li>
<li>Nieuws verwijderen</li>
<li>Nieuws opties</li>
</ul>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
</ul>
</div>
<ul>
<li><a href="#" class="toggle" id="nieuws">Nieuws</a></li>
<ul style="padding:3px 0px 3px 20px;" id="nieuws_content">
<li>Nieuws toevoegen</li>
<li>Nieuws aanpassen</li>
<li>Nieuws verwijderen</li>
<li>Nieuws opties</li>
</ul>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
</ul>
</div>
CSS:
Code (php)
1
2
3
4
5
2
3
4
5
body { font-family:Verdana, Arial, Helvetica, sans-serif; }
#navigation ul { margin:0px; padding:0px; }
#navigation li { list-style:none; padding:5px; border:1px solid #CCCCCC; margin:1px; background-color:#FFFFFF; }
#navigation a { text-decoration:none; color:#000000; }
#navigation { float:left; width:220px; overflow:auto; font-size:10px; }
#navigation ul { margin:0px; padding:0px; }
#navigation li { list-style:none; padding:5px; border:1px solid #CCCCCC; margin:1px; background-color:#FFFFFF; }
#navigation a { text-decoration:none; color:#000000; }
#navigation { float:left; width:220px; overflow:auto; font-size:10px; }
Hier kan je zien wat ik bedoel met mijn probleem: http://www.myconfero.net/php/
Alvast bedankt!
Jeroen
Is er een andere oplossing?
iemand een andere oplossing?
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
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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script language="javascript" type="text/javascript" src="mootools.js"></script>
<script>
window.addEvent('domready', function()
{
var getSlides = $$('.toggle');
getSlides.each(
function(slider)
{
slider.fx = new Fx.Slide(slider.id + '_content');
slider.addEvent('click', function(e){
e = new Event(e);
this.fx.toggle();
e.stop();
});
});
});
</script>
<style type="text/css">
body { font-family:Verdana, Arial, Helvetica, sans-serif; }
#navigation ul { margin:0px; padding:0px; }
#navigation li { list-style:none; padding:5px; border:1px solid #CCCCCC; margin:1px; background-color:#FFFFFF; }
#navigation a { text-decoration:none; color:#000000; }
#navigation { float:left; width:220px; overflow:auto; font-size:10px; }
</style>
</head>
<body>
<div id="navigation">
<ul>
<li><a href="#" class="toggle" id="nieuws">Nieuws</a></li>
<li style="border:0px;"><ul style="padding:3px 0px 3px 20px;border:0px;" id="nieuws_content">
<li>Nieuws toevoegen</li>
<li>Nieuws aanpassen</li>
<li>Nieuws verwijderen</li>
<li>Nieuws opties</li>
</ul>
</li>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
</ul>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script language="javascript" type="text/javascript" src="mootools.js"></script>
<script>
window.addEvent('domready', function()
{
var getSlides = $$('.toggle');
getSlides.each(
function(slider)
{
slider.fx = new Fx.Slide(slider.id + '_content');
slider.addEvent('click', function(e){
e = new Event(e);
this.fx.toggle();
e.stop();
});
});
});
</script>
<style type="text/css">
body { font-family:Verdana, Arial, Helvetica, sans-serif; }
#navigation ul { margin:0px; padding:0px; }
#navigation li { list-style:none; padding:5px; border:1px solid #CCCCCC; margin:1px; background-color:#FFFFFF; }
#navigation a { text-decoration:none; color:#000000; }
#navigation { float:left; width:220px; overflow:auto; font-size:10px; }
</style>
</head>
<body>
<div id="navigation">
<ul>
<li><a href="#" class="toggle" id="nieuws">Nieuws</a></li>
<li style="border:0px;"><ul style="padding:3px 0px 3px 20px;border:0px;" id="nieuws_content">
<li>Nieuws toevoegen</li>
<li>Nieuws aanpassen</li>
<li>Nieuws verwijderen</li>
<li>Nieuws opties</li>
</ul>
</li>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
</ul>
</div>
</body>
</html>
Gewijzigd op 01/01/1970 01:00:00 door Robert Deiman