css dropdown menu in IE6 niet zichtbaar
Heb de volgende link gevonden waarin het wordt uitgelegd maar kom er maar niet uit.
http://www.webmastercity.nl/forum/viewtopic.php?t=20070
Zou iemand zo vriendelijk willen zijn om de code te willen aanpassen of om we op t goede pad te zeten.
Hier iig de html
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
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
<div id="container">
<br><br>
<ul id="navigation-1">
<li><a href="#" title="Welkom">Welkom</a></li>
<li><a href="#" title="Mededelingen">Mededelingen</a></li>
<li><a href="#" title="Agenda">Agenda</a></li>
<li><a href="#" title="Informatie">Informatie</a>
<ul class="navigation-2">
<li><a href="#" title="Algemeen">Algemeen</a></li>
<li><a href="#" title="Staf team">Staf team</a></li>
<li><a href="#" title="Technieken">Technieken <span>»</span></a>
<ul class="navigation-3">
<li><a href="#" title="Kompas & Kaart">Kompas & Kaart</a></li>
<li><a href="#" title="Tochttechnieken">Tochttechnieken</a></li>
</ul>
</li>
<li><a href="#" title="Materiaal">Materiaal <span>»</span></a>
<ul class="navigation-3">
<li><a href="#" title="Guitar Stands">Rugzak</a></li>
<li><a href="#" title="Strings">Slaapzak</a></li>
<li><a href="#" title="Tuners">Slaapmatje</a></li>
<li><a href="#" title="Plectrums">(Berg)schoenen</a></li>
<li><a href="#" title="Capos">Sokken</a></li>
</ul>
</li>
<li><a href="#" title="Bass Guitars">Uniform</a></li>
<li><a href="#" title="Bass Guitars">Bestanden</a></li>
<li><a href="#" title="Bass Guitars">Verhalen</a></li>
</ul>
</li>
<li><a href="#" title="Gastenboek">Gastenboek</a>
</li>
<li><a href="#" title="Foto's">Foto's</a>
<ul class="navigation-2">
<li><a href="#" title="Foto Album">Foto Album</a></li>
<li><a href="#" title="Groot formaat">Groot formaat</a></li>
<li><a href="#" title="Smoelenboek">Smoelenboek</a></li>
<li><a href="#" title="Groepsfoto's">Groepsfoto's</a></li>
</ul>
</li>
<li><a href="#" title="Links">Links</a>
<ul class="navigation-2">
<li><a href="#" title="Scouting NL">Scouting NL</a></li>
<li><a href="#" title="Regio ZO Brabant">Regio ZO Brabant</a></li>
<li><a href="#" title="Schotland">Schotland</a></li>
<li><a href="#" title="Overig">Overig</a></li>
</ul>
</li>
</ul>
</div>
<br><br>
<ul id="navigation-1">
<li><a href="#" title="Welkom">Welkom</a></li>
<li><a href="#" title="Mededelingen">Mededelingen</a></li>
<li><a href="#" title="Agenda">Agenda</a></li>
<li><a href="#" title="Informatie">Informatie</a>
<ul class="navigation-2">
<li><a href="#" title="Algemeen">Algemeen</a></li>
<li><a href="#" title="Staf team">Staf team</a></li>
<li><a href="#" title="Technieken">Technieken <span>»</span></a>
<ul class="navigation-3">
<li><a href="#" title="Kompas & Kaart">Kompas & Kaart</a></li>
<li><a href="#" title="Tochttechnieken">Tochttechnieken</a></li>
</ul>
</li>
<li><a href="#" title="Materiaal">Materiaal <span>»</span></a>
<ul class="navigation-3">
<li><a href="#" title="Guitar Stands">Rugzak</a></li>
<li><a href="#" title="Strings">Slaapzak</a></li>
<li><a href="#" title="Tuners">Slaapmatje</a></li>
<li><a href="#" title="Plectrums">(Berg)schoenen</a></li>
<li><a href="#" title="Capos">Sokken</a></li>
</ul>
</li>
<li><a href="#" title="Bass Guitars">Uniform</a></li>
<li><a href="#" title="Bass Guitars">Bestanden</a></li>
<li><a href="#" title="Bass Guitars">Verhalen</a></li>
</ul>
</li>
<li><a href="#" title="Gastenboek">Gastenboek</a>
</li>
<li><a href="#" title="Foto's">Foto's</a>
<ul class="navigation-2">
<li><a href="#" title="Foto Album">Foto Album</a></li>
<li><a href="#" title="Groot formaat">Groot formaat</a></li>
<li><a href="#" title="Smoelenboek">Smoelenboek</a></li>
<li><a href="#" title="Groepsfoto's">Groepsfoto's</a></li>
</ul>
</li>
<li><a href="#" title="Links">Links</a>
<ul class="navigation-2">
<li><a href="#" title="Scouting NL">Scouting NL</a></li>
<li><a href="#" title="Regio ZO Brabant">Regio ZO Brabant</a></li>
<li><a href="#" title="Schotland">Schotland</a></li>
<li><a href="#" title="Overig">Overig</a></li>
</ul>
</li>
</ul>
</div>
En het css gedeelte
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
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
ul#navigation-1
{ margin:0; padding:1px 0; list-style:none; width:100%; height:21px; font:normal 8pt verdana, arial, helvetica;}
ul#navigation-1 li
{ margin:0; padding:0; display:block; float:left; position:relative; width:120px; }
ul#navigation-1 li a:link,
ul#navigation-1 li a:visited
{ padding:4px 0; display:block; text-align:center; text-decoration:none; background:#000000; color:#ffffff; width:120px; height:13px; }
ul#navigation-1 li:hover a,
ul#navigation-1 li a:hover,
ul#navigation-1 li a:active
{ padding:4px 0; display:block; text-align:center; text-decoration:none; background:#2a78ca; color:#ffffff; width:118px; height:13px; border-left:1px solid #ffffff; border-right:1px solid #ffffff; }
ul#navigation-1 li ul.navigation-2
{ margin:0; padding:1px 1px 0; list-style:none; display:none; background:#ffffff; width:118px; position:absolute; top:21px; left:-1px; border:1px solid #000000; border-top:none; }
ul#navigation-1 li:hover ul.navigation-2
{ display:block; }
ul#navigation-1 li ul.navigation-2 li
{ width:118px; clear:left; width:118px; }
ul#navigation-1 li ul.navigation-2 li a:link,
ul#navigation-1 li ul.navigation-2 li a:visited
{ clear:left; background:#2a78ca; padding:4px 0; width:118px; border:none; border-bottom:1px solid #ffffff; position:relative; z-index:1000; }
ul#navigation-1 li ul.navigation-2 li:hover a,
ul#navigation-1 li ul.navigation-2 li a:active,
ul#navigation-1 li ul.navigation-2 li a:hover
{ clear:left; background:#429efe; padding:4px 0; width:118px; border:none; border-bottom:1px solid #ffffff; position:relative; z-index:1000; }
ul#navigation-1 li ul.navigation-2 li ul.navigation-3
{ display:none; margin:0; padding:0; list-style:none; position:absolute; left:117px; top:-2px; padding:1px 1px 0 1px; border:1px solid #000000; border-left:1px solid #000000; background:#ffffff; z-index:900; }
ul#navigation-1 li ul.navigation-2 li:hover ul.navigation-3
{ display:block; }
ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li a:link,
ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li a:visited
{ background:#2a78ca; }
ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li:hover a,
ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li a:hover,
ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li a:active
{ background:#429efe; }
ul#navigation-1 li ul.navigation-2 li a span
{ position:absolute; top:0; left:105px; font-size:12pt; color:#c3d9ff; }
ul#navigation-1 li ul.navigation-2 li:hover a span,
ul#navigation-1 li ul.navigation-2 li a:hover span
{ position:absolute; top:0; left:105px; font-size:12pt; color:#ffffff; }
{ margin:0; padding:1px 0; list-style:none; width:100%; height:21px; font:normal 8pt verdana, arial, helvetica;}
ul#navigation-1 li
{ margin:0; padding:0; display:block; float:left; position:relative; width:120px; }
ul#navigation-1 li a:link,
ul#navigation-1 li a:visited
{ padding:4px 0; display:block; text-align:center; text-decoration:none; background:#000000; color:#ffffff; width:120px; height:13px; }
ul#navigation-1 li:hover a,
ul#navigation-1 li a:hover,
ul#navigation-1 li a:active
{ padding:4px 0; display:block; text-align:center; text-decoration:none; background:#2a78ca; color:#ffffff; width:118px; height:13px; border-left:1px solid #ffffff; border-right:1px solid #ffffff; }
ul#navigation-1 li ul.navigation-2
{ margin:0; padding:1px 1px 0; list-style:none; display:none; background:#ffffff; width:118px; position:absolute; top:21px; left:-1px; border:1px solid #000000; border-top:none; }
ul#navigation-1 li:hover ul.navigation-2
{ display:block; }
ul#navigation-1 li ul.navigation-2 li
{ width:118px; clear:left; width:118px; }
ul#navigation-1 li ul.navigation-2 li a:link,
ul#navigation-1 li ul.navigation-2 li a:visited
{ clear:left; background:#2a78ca; padding:4px 0; width:118px; border:none; border-bottom:1px solid #ffffff; position:relative; z-index:1000; }
ul#navigation-1 li ul.navigation-2 li:hover a,
ul#navigation-1 li ul.navigation-2 li a:active,
ul#navigation-1 li ul.navigation-2 li a:hover
{ clear:left; background:#429efe; padding:4px 0; width:118px; border:none; border-bottom:1px solid #ffffff; position:relative; z-index:1000; }
ul#navigation-1 li ul.navigation-2 li ul.navigation-3
{ display:none; margin:0; padding:0; list-style:none; position:absolute; left:117px; top:-2px; padding:1px 1px 0 1px; border:1px solid #000000; border-left:1px solid #000000; background:#ffffff; z-index:900; }
ul#navigation-1 li ul.navigation-2 li:hover ul.navigation-3
{ display:block; }
ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li a:link,
ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li a:visited
{ background:#2a78ca; }
ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li:hover a,
ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li a:hover,
ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li a:active
{ background:#429efe; }
ul#navigation-1 li ul.navigation-2 li a span
{ position:absolute; top:0; left:105px; font-size:12pt; color:#c3d9ff; }
ul#navigation-1 li ul.navigation-2 li:hover a span,
ul#navigation-1 li ul.navigation-2 li a:hover span
{ position:absolute; top:0; left:105px; font-size:12pt; color:#ffffff; }
Gewijzigd op 01/01/1970 01:00:00 door Superman
Dat lijkt me niet gebruiksvriendelijk, 80% van de planeet gebruikt namelijk IE 6.
jah of vaak nog lager ie7 dan moet je net een nieuwe pc hebben en dat je gelijk alles nieuw wilt of je moet gewoon het nieuwste van het neiuwste willen
IE6 kent ':hover' in CSS niet.
a:hover kent ie wel, dus..
Nee, ook niet.
site die ik net gemaakt heb.
Je conditional comment hoort er zo uit te zien:
Het htc bestand dat je nodig hebt staat hier.
Het simpelste is een behavior toepassen in combinatie met een conditional comment. Voor een voorbeeld, check een Je conditional comment hoort er zo uit te zien:
Code (php)
1
2
3
4
5
6
7
2
3
4
5
6
7
<!--[if lte IE 6]>
<style type="text/css" media="screen">
body {
behavior: url(csshover.htc);
}
</style>
<![endif]-->
<style type="text/css" media="screen">
body {
behavior: url(csshover.htc);
}
</style>
<![endif]-->
Het htc bestand dat je nodig hebt staat hier.
Edit:
In mijn voorbeeld staat het htc bestand in dezelfde map als de HTML pagina.
Gewijzigd op 01/01/1970 01:00:00 door Jan Koehoorn
maar er zitten nu wat fouten in de layout heb ik t idee, alleen weet ik niet hoe ik t moet oplossen of waar ik het in moet zoeken.
de zwarte balk springt naar rechts als je over een menu heen gaat. en onder de zwarte balk komt een 1 px laag erbij want niet gebeurt in firefox, ie 7 of oprah.
Heel vervelend.
Zie hier het voorbeeld:
http://scouts.hjvb.nl
Iemand die misschien eens door de layout heen zou willen spitten om te kijken of die iets ontdekt.
http://scouts.hjvb.nl/style.css
Is css opmaak bestand.