css dropdown menu in IE6 niet zichtbaar

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Superman

Superman

24/03/2008 17:48:00
Quote Anchor link
Heb de volgende code toegepast om een css dropdown menu te creeeren. In Oprah, IE7, Firefox etc werkt die perfect. Behalve uiteraard in IE 6.

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)
PHP script in nieuw venster Selecteer het PHP script
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
<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>&raquo;</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>&raquo;</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)
PHP script in nieuw venster Selecteer het PHP script
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
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; }
Gewijzigd op 01/01/1970 01:00:00 door Superman
 
PHP hulp

PHP hulp

29/04/2024 16:28:49
 
Steen

steen

24/03/2008 18:18:00
Quote Anchor link
dan gooi je er een javascriptje achteraan dat hij op de versies avn IE lager dan 7 niet werkt... net zoiets als met frames dat je er dit neerzet:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
<noframes>Sorry, je ondersteunt geen frames</noframes>
 
Superman

Superman

24/03/2008 20:25:00
Quote Anchor link
Dat lijkt me niet gebruiksvriendelijk, 80% van de planeet gebruikt namelijk IE 6.
 
Andries

andries

24/03/2008 20:32:00
Quote Anchor link
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
 
Jesper Diovo

Jesper Diovo

24/03/2008 20:34:00
Quote Anchor link
IE6 kent ':hover' in CSS niet.
 
Erwin Nieuwenhuis

Erwin Nieuwenhuis

24/03/2008 20:37:00
Quote Anchor link
a:hover kent ie wel, dus..
 
Jesper Diovo

Jesper Diovo

24/03/2008 20:38:00
Quote Anchor link
Nee, ook niet.
 
Hans Kuiters

Hans Kuiters

24/03/2008 20:58:00
Quote Anchor link
IE6 kent alleen maar :hover als pseudoclass van a, niet van andere elementen zoals li:hover. Via javascript is dit wel op te lossen. Zoek eens bij www.alistapart.com.
 
Jan Koehoorn

Jan Koehoorn

24/03/2008 21:34:00
Quote Anchor link
Het simpelste is een behavior toepassen in combinatie met een conditional comment. Voor een voorbeeld, check een site die ik net gemaakt heb.

Je conditional comment hoort er zo uit te zien:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
    <!--[if lte IE 6]>
        <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
 
Superman

Superman

25/03/2008 10:00:00
Quote Anchor link
ja dat heb ik nu gedaan

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.
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.