Toon posts:

[HTML/CSS] Menu werkt niet goed onder Internet Explorer

Pagina: 1
Acties:
  • 160 views sinds 30-01-2008
  • Reageer

Verwijderd

Topicstarter
Ik ben bezig met een menu, alleen heb ik nu het probleem dat het niet onder Internet Explorer werkt. Onder alle andere browsers (Mozilla, Opera, Konqueror) werkt het wel gewoon.
Ik heb nu op internet een script gevonden die het probleem in Internet Explorer zou moeten oplossen alleen het wil niet echt werken. Dit is het script, en hieronder mijn code..

Hier mijn html code:
code:
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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Menu Test</title>
<link href="style.css" rel="stylesheet" />
<style type="text/css">  body { behavior:url("csshover.htc"); } </style>
</head>
<body>
<div class="menu">

<ul>
    <li ><a href="link.html" title="Menu Item 1">Menu Item 1</a></li>
</ul>

<ul>
    <li ><a href="link.html" title="Menu Item 2">Menu Item 2</a></li>
</ul>

<ul>
    <li ><a href="link.html" title="Menu Item 3">Menu Item 3</a></li>
</ul>

<ul>
    <li class="menu-submenu"><a href="link.html" title="Menu Item 4">Menu Item 4</a>
        <ul>
            <li ><a href="link.html" title="Menu Item 4.1">Menu Item 4.1</a></li>
            <li ><a href="link.html" title="Menu Item 4.2">Menu Item 4.2</a></li>
            <li ><a href="link.html" title="Menu Item 4.3">Menu Item 4.3</a></li>
            <li class="menu-submenu"><a href="link.html" title="Menu Item 4.4">Menu Item 4.4</a>
                <ul>
                    <li ><a href="link.html" title="Menu Item 4.4.1">Menu Item 4.4.1</a></li>
                    <li ><a href="link.html" title="Menu Item 4.4.2">Menu Item 4.4.2</a></li>
                </ul>
            </li>
            <li ><a href="link.html" title="Menu Item 4.5">Menu Item 4.5</a></li>
            <li ><a href="link.html" title="Menu Itme 4.6">Menu Item 4.6</a></li>
        </ul>
    </li>
</ul>

<ul>
    <li ><a href="link.html" title="Menu Item 5">Menu Item 5</a></li>
</ul>

<ul>
    <li ><a href="link.html" title="Menu Item 6">Menu Item 6</a></li>
</ul>

</div>
</body>
</html>


En het CSS-bestand:
code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.menu { background: black; float: left; }

.menu a { color: white; text-decoration: none; font: 11px "Trebuchet MS", Helvetica }
.menu a:visited { color: white }
.menu a { display: block; margin: 0px; padding: 3px 1em; text-align: left; background: black; }

.menu li.menu-submenu > a { background: #8d8f88; }
.menu li:hover > a { background: #fff; color: #8d8f88; }
.menu li { position: relative; }

.menu ul { list-style-type: none; margin: 0; padding: 0; float: left; }
.menu ul ul { width: 7em; border: 1px solid black; position: absolute; z-index: 500; }
.menu ul ul { display: none; }
.menu ul ul ul { position: absolute; top: 0; left: 100%; }
.menu ul li:hover > ul { display: block; }

Ziet iemand misschien wat ik fout doe?

  • b19a
  • Registratie: September 2002
  • Niet online
Je topic zou beter geplaatst zijn in W&G.

Heb je misschien een URL om dit te testen...

  • disjfa
  • Registratie: April 2001
  • Laatst online: 08-01 11:17

disjfa

be

Wat zou het moeten doen dan?

Een achtergrond van een link veranderen? Daar heb je iig helemaal geen extra dingen voor nodig zolang je er voor zorgt dat je je structuur goed opbouwd en de hovers op je <a> zet.

disjfa - disj·fa (meneer)
disjfa.nl


Verwijderd

Topicstarter
BoukeHaarsma schreef op donderdag 11 augustus 2005 @ 13:43:
Je topic zou beter geplaatst zijn in W&G.

Heb je misschien een URL om dit te testen...
Ja sorry, ik zag het pas nadat ik het al had geplaatst.

De URL om te kijken is: MENU TEST

  • NMe
  • Registratie: Februari 2004
  • Laatst online: 15-04 22:07

NMe

Quia Ego Sic Dico.

HTML en CSS horen in Webdesign & Graphics. Verder mag je, zoals duidelijk wordt uit de posts hier boven mij, wel iets meer info geven. :)

PW>>WG

'E's fighting in there!' he stuttered, grabbing the captain's arm.
'All by himself?' said the captain.
'No, with everyone!' shouted Nobby, hopping from one foot to the other.


Verwijderd

Topicstarter
disjfa schreef op donderdag 11 augustus 2005 @ 13:44:
Wat zou het moeten doen dan?

Een achtergrond van een link veranderen? Daar heb je iig helemaal geen extra dingen voor nodig zolang je er voor zorgt dat je je structuur goed opbouwd en de hovers op je <a> zet.
Nee, het is een submenu dat geopend moet worden. Alleen de achtergrond veranderen lukt me wel in alle browsers :) Maar wordt vanzelf duidelijk als je de link van een paar posts eerder opent in mozilla

[ Voor 12% gewijzigd door Verwijderd op 11-08-2005 13:49 ]


  • Sappie
  • Registratie: September 2000
  • Laatst online: 27-04 07:10

Sappie

De Parasitaire Capaciteit!

Je gebruikt de door IE niet ondersteunde universal child selector ">". Verder is de opzet van je menuutje niet helemaal zoals t zou 'horen'. Je begint namelijk telkens een nieuwe ul voor elk 'hoofdonderdeel', terwijl je dat beter in een grote lijst kan zetten.

Ik zal es ff snel kijken verder..

Specs | Audioscrobbler


  • Fuzzillogic
  • Registratie: November 2001
  • Laatst online: 01-07-2025
en :hover op iets anders dan een <A /> element snapt IE6 ook niet. Je kunt eens het IE7-script includen, mogelijk dat dat al veel van je problemen oplost.

edit:
Oh het hover-gedeelte heb je al onder controle zie ik :) Zet die IE-meuk wel even in conditional comments, dan hoef je andere browsers en IE7 er niet mee lastig te vallen.

[ Voor 44% gewijzigd door Fuzzillogic op 11-08-2005 13:57 ]


  • KneoK
  • Registratie: December 2001
  • Laatst online: 02-05 03:19

KneoK

Not in a million lightyears

Volgens mij lijkt dit op een halve Suckerfish achtige oplossing. Het probleem daar is dat je een klein stukje javascript nodig hebt om het onder IE te laten werken.
En die zie ik bij jou nergens...

  • Sappie
  • Registratie: September 2000
  • Laatst online: 27-04 07:10

Sappie

De Parasitaire Capaciteit!

BioWEB schreef op donderdag 11 augustus 2005 @ 13:56:
Volgens mij lijkt dit op een halve Suckerfish achtige oplossing. Het probleem daar is dat je een klein stukje javascript nodig hebt om het onder IE te laten werken.
En die zie ik bij jou nergens...
Dat heeft ie al opgelost door middel van de csshover behavior, zoals Nexxennium ook al opmerkte :)

offtopic:
Verder geniet deze behavior bij mij sinds kort niet meer de voorkeur. Uit de praktijk blijkt namelijk (heb dit zelf meerdere malen ondervonden) dat deze ervoor kan zorgen dat, bij redelijk lange html pagina's, IE volledig hangt.

Specs | Audioscrobbler


  • ZeilDude
  • Registratie: Juli 2004
  • Laatst online: 19-02-2022
Google op 'css menu' en je vind al bij het derde zoekresultaat, de volgende pagina: http://www.howtocreate.co.uk/tutorials/testMenu.html

Hier vind je een voorbeeld hoe het wel werkt, en ook uitleg over de '>-selector'.

  • IschaGast
  • Registratie: Juli 2001
  • Laatst online: 25-11-2025
Misschien is dit ook iets voor je: http://www.udm4.com/

  • disjfa
  • Registratie: April 2001
  • Laatst online: 08-01 11:17

disjfa

be

Waarom zou je een schript van 160 kb downloaden als het ook in 20 regels kan :? Beetje onnozel imho.

disjfa - disj·fa (meneer)
disjfa.nl


  • ZeilDude
  • Registratie: Juli 2004
  • Laatst online: 19-02-2022
Dit is juist weer met javascript, terwijl het ook prima zonder kan. Zie ook de opmerking over resources hierboven.

  • Sappie
  • Registratie: September 2000
  • Laatst online: 27-04 07:10

Sappie

De Parasitaire Capaciteit!

Het kan dus _niet_ zonder gebruik te maken van javascript in Internet Explorer. Wat denk je dat er in die behavior staat.. juist.. javascript :) Verder is er in mijn ogen niets mis mee om hiervoor javascript te gebruiken, maar dat is een heel andere discussie

[ Voor 3% gewijzigd door Sappie op 11-08-2005 14:17 ]

Specs | Audioscrobbler


Verwijderd

Topicstarter
Ik heb het nu werkend gekregen door de :hover en '>-selector' af te vangen met Javascript (volgens de http://www.howtocreate.co.uk/tutorials/testMenu.html manier) , maar echt netjes vind ik dit niet. Is er echt geen manier om zonder Javascript dit simpel menu'tje werkend te krijgen?
De Suckerfish oplossing werkt ook wel, alleen daarbij is ook Javascript nodig.

Verwijderd

Topicstarter
Sappie schreef op donderdag 11 augustus 2005 @ 14:16:
Het kan dus _niet_ zonder gebruik te maken van javascript in Internet Explorer. Wat denk je dat er in die behavior staat.. juist.. javascript :) Verder is er in mijn ogen niets mis mee om hiervoor javascript te gebruiken, maar dat is een heel andere discussie
Oh, reageer net te laat, sorry :) Dan laat ik het dus maar zoals het is

  • Sappie
  • Registratie: September 2000
  • Laatst online: 27-04 07:10

Sappie

De Parasitaire Capaciteit!

Ik weet niet wat je er nu van gebrouwen hebt, maar het is zeker wel netjes op te lossen :)

- include dat javascript (eventueel in de csshover behavior (welke overigens weer IE only is, dus dan zijn conditional comments weer niet per se nodig)) alleen in het geval van internet explorer door middel van bijvoorbeeld conditional comments (zoals eerder aangegeven).
- en serveer aan IE (weer door middel van bijvoorbeeld conditional comments) een andere stylesheet als je per se de universal child selector wilt gebruiken (in het geval je deze niet per se wilt gebruiken dan kost het je een klein beetje meer css)

[ Voor 9% gewijzigd door Sappie op 11-08-2005 14:27 ]

Specs | Audioscrobbler


  • disjfa
  • Registratie: April 2001
  • Laatst online: 08-01 11:17

disjfa

be

Sappie schreef op donderdag 11 augustus 2005 @ 14:26:
- include dat javascript (eventueel in de csshover behavior (welke overigens weer IE only is, dus dan zijn conditional comments weer niet per se nodig)) alleen in het geval van internet explorer door middel van bijvoorbeeld conditional comments (zoals eerder aangegeven).
Dat deed de ts al. Bekijk de html maar een keer ;)

disjfa - disj·fa (meneer)
disjfa.nl


  • KneoK
  • Registratie: December 2001
  • Laatst online: 02-05 03:19

KneoK

Not in a million lightyears

Sappie schreef op donderdag 11 augustus 2005 @ 14:00:
[...]

Dat heeft ie al opgelost door middel van de csshover behavior, zoals Nexxennium ook al opmerkte :)

offtopic:
Verder geniet deze behavior bij mij sinds kort niet meer de voorkeur. Uit de praktijk blijkt namelijk (heb dit zelf meerdere malen ondervonden) dat deze ervoor kan zorgen dat, bij redelijk lange html pagina's, IE volledig hangt.
Ah, iets te snel gereageerd dus. Foutje :)

  • Sappie
  • Registratie: September 2000
  • Laatst online: 27-04 07:10

Sappie

De Parasitaire Capaciteit!

disjfa schreef op donderdag 11 augustus 2005 @ 14:32:
[...]

Dat deed de ts al. Bekijk de html maar een keer ;)
De ts gebruikt geen conditional comments in zijn html. Dit geniet sowieso de voorkeur, aangezien het erg waarschijnlijk is dat IE7 de behavior files weer gaat ondersteunen. En IE7 biedt ook ondersteuning voor de :hover pseudo klasse, dus wie weet gooit die behavior file dan wel roet in het eten.

Maar goed daar was ik niet helemaal duidelijk in in mn reply :)

Specs | Audioscrobbler


  • Fuzzillogic
  • Registratie: November 2001
  • Laatst online: 01-07-2025
De conditional comments dienen nog een ander doel: je zorgt dat je code gewoon standards-compliant is. Nou zullen browsers, vanwege die standaarden, de behaviour-property gewoon negeren, maar voorkomen is beter dan genezen ;)

Maar ik blijf bij het IE7-script. Het is logger dan deze dedicated-oplossingen, maar het werkt over het algemeen prima en je kunt veelal gewoon lekker je gang gaan met CSS2 zonder rekening te houden met het zwaar verouderde IE6.

Verwijderd

Topicstarter
Sappie schreef op donderdag 11 augustus 2005 @ 14:26:
Ik weet niet wat je er nu van gebrouwen hebt, maar het is zeker wel netjes op te lossen :)

- include dat javascript (eventueel in de csshover behavior (welke overigens weer IE only is, dus dan zijn conditional comments weer niet per se nodig)) alleen in het geval van internet explorer door middel van bijvoorbeeld conditional comments (zoals eerder aangegeven).
- en serveer aan IE (weer door middel van bijvoorbeeld conditional comments) een andere stylesheet als je per se de universal child selector wilt gebruiken (in het geval je deze niet per se wilt gebruiken dan kost het je een klein beetje meer css)
Hoe zet ik dan een universal child selector stukje code om in een stukje dat Internet Explorer wel snapt, bijvoorbeeld:
code:
1
2
.menu li.menu-submenu > a { background: #8d8f88; }
.menu li:hover > a { background: #fff; color: #8d8f88; }


KLIK

Zoals je ziet zit er onder internet explorer ook overal een ruimte tussen, deze krijg ik ook niet weg.

[ Voor 12% gewijzigd door Verwijderd op 11-08-2005 16:00 ]


  • Sappie
  • Registratie: September 2000
  • Laatst online: 27-04 07:10

Sappie

De Parasitaire Capaciteit!

ajb:
code:
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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <title>Menu Test</title>
    <!--[if IE]>
    <style type="text/css" media="screen">
        body { behavior: url(csshover.htc); }
        .menu ul li { margin-bottom: -4px; }
    </style>
    <![endif]-->
    <style type="text/css">  
        .menu a { 
            color: white; 
            text-decoration: none; 
            font: 11px "Trebuchet MS", Helvetica;
            display: block; 
            margin: 0px; 
            padding: 3px 1em; 
            text-align: left; 
            background: black 
        }
        .menu a:hover { background: #fff; color: #8d8f88 }
        
        .menu li.menu-submenu a, .menu li:hover li.menu-submenu a { background: #8d8f88; }
        
        .menu li:hover li a, 
        .menu li li:hover li a, 
        .menu li li.menu-submenu:hover li a,
        .menu li:hover li.menu-submenu:hover li a { 
            background: black; color: white; 
        }
        
        .menu li:hover a, 
        .menu li li:hover a, 
        .menu li:hover li.menu-submenu:hover a,  
        .menu li:hover li:hover li:hover a { 
            background: #fff; color: #8d8f88 
        }
        
        .menu li { position: relative; float: left; }
        .menu ul li { float: none; width: 7em; }
        
        .menu, .menu ul { list-style: none; margin: 0; padding: 0; background:#fffcf0 }
        .menu ul { width: 7em; border: 1px solid black; position: absolute; display: none }
        .menu ul ul { position: absolute; top: -1px; left: 100% }
        
        .menu li:hover ul ul { display:none }
        .menu li:hover ul, .menu li:hover li:hover ul { display: block }
    </style>
</head>
<body>
    <ul class="menu">
        <li><a href="link.html" title="Menu Item 1">Menu Item 1</a></li>
        <li><a href="link.html" title="Menu Item 2">Menu Item 2</a></li>
        <li><a href="link.html" title="Menu Item 3">Menu Item 3</a></li>
        <li class="menu-submenu"><a href="link.html" title="Menu Item 4">Menu Item 4</a>
            <ul>
                <li><a href="link.html" title="Menu Item 4.1">Menu Item 4.1</a></li>
                <li><a href="link.html" title="Menu Item 4.2">Menu Item 4.2</a></li>
                <li><a href="link.html" title="Menu Item 4.3">Menu Item 4.3</a></li>
                <li class="menu-submenu"><a href="link.html" title="Menu Item 4.4">Menu Item 4.4</a>
                    <ul>
                        <li ><a href="link.html" title="Menu Item 4.4.1">Menu Item 4.4.1</a></li>
                        <li ><a href="link.html" title="Menu Item 4.4.2">Menu Item 4.4.2</a></li>
                    </ul>
                </li>
                <li><a href="link.html" title="Menu Item 4.5">Menu Item 4.5</a></li>
                <li><a href="link.html" title="Menu Itme 4.6">Menu Item 4.6</a></li>
            </ul>
        </li>
        <li><a href="link.html" title="Menu Item 5">Menu Item 5</a></li>
        <li><a href="link.html" title="Menu Item 6">Menu Item 6</a></li>
    </ul>
</body>
</html>

de css is misschien nog wat bloated, maar ik heb er al teveel tijd aan 'verspilt'.. moet eik aan t werk zijn nu :)

[ Voor 21% gewijzigd door Sappie op 11-08-2005 16:38 ]

Specs | Audioscrobbler

Pagina: 1