Vraag & Antwoord

Webdesign (HTML, CSS, Flash)

Wie o wie kan mij helpen met de hover-functie in IE?

17 antwoorden
  • Hoi, De hover-functie in IE6 werkt niet in de test-omgeving. Heel vreemd, want in de produktieomgeving werkt deze wel. Ik ben een beetje wanhopig, want ik heb alles 100 keer gecheckt. Het kan goed zijn dat ik telkens ergens overheen kijk. Voor IE6 maak ik gebruik van Whatever-hover. [url=http://test.mscentrumnijmegen.nl]De link naar de test-site[/url] M.vr.gr., Dalertje
  • Welke hover functie werkt dan niet? Want hier werkt hij in het menu wel gewoon.
  • Hoi, Sorry, ik was niet helemaal volledig. Ik heb het over de hover-functie in het rechter navigatiemenu. Bij o.a. de tweede link in het menu moet er als overheen gaat een submenu getoond worden. M.vr.gr., Dalertje
  • dat komt doordat in IE6 hover alleen op a-elementen werkt. Om het toch op andere elementen te laten werken moet een stukje Javascript worden opgenomen, zie http://alistapart.com/articles/dropdowns
  • Hoi, Dat weet ik Marientje. Vandaar dat ik het Whatever-hover-script heb toegepast. In de produktieomgeving is dit werkende, maar in de test-omgeving werkt het niet. Ra ra. Vandaar mijn vraag. M.vr.gr., Dalertje
  • Ik weet het niet zeker, maar ik zie twee menuus die horen uit te klappen, en die <UL>s hebben allebei hetzelfde ID. Ik zou me zo kunnen voorstellen dat het JavaScript (dat voor IE < v7 wordt gebruikt in dat 'whatever-hover' ding) daar niet mee kan omgaan. Dus misschien moet je die tweede <UL> een andere ID geven, maar misschien heeft dit er wel niets mee te maken...
  • [quote:d96299f7b9="Buur"]Ik weet het niet zeker, maar ik zie twee menuus die horen uit te klappen, en die <UL>s hebben allebei hetzelfde ID. Ik zou me zo kunnen voorstellen dat het JavaScript (dat voor IE < v7 wordt gebruikt in dat 'whatever-hover' ding) daar niet mee kan omgaan. Dus misschien moet je die tweede <UL> een andere ID geven, maar misschien heeft dit er wel niets mee te maken...[/quote:d96299f7b9] Hoi, Wat bedoel je met de tweede <UL> Buur? In dat navigatiemenu hebben drie links een submenu. Bedoel je dat? M.vr.gr., Dalertje
  • Misschien is dit ook op een andere manier op te lossen. Zie bv. hier: http://naarvoren.nl/artikel/hover/ onderaan, dmv gebruik van een SPECIFITY. De testsite heb ik al eerder gezien. Vroeg me toen ook af wat er wordt bedoeld met een grafisch ontwerp. Bedoel je daarmee de hele lay-out van de pagina?
  • @ Dalertje: Oja het zijn er drie... Je hebt steeds deze structuur bij een uitklapmenu:[code:1:637f006962]<li><a href="#" title="x">X</a> <ul id="subnav"> <li class="subnav"><a href="a.php" title="a">a</a></li> <li class="subnav"><a href="b.php" title="b">b</a></li> <li class="subnav"><a href="c.php" title="c">c</a></li> </ul> </li> <li><a href="#" title="y">Y</a> <ul id="subnav"> <li class="subnav"><a href="d.php" title="d">d</a></li> <li class="subnav"><a href="e.php" title="e">b</a></li> <li class="subnav"><a href="f.php" title="f">f</a></li> </ul> </li>[/code:1:637f006962]Je krijgt dan meerdere <UL>s met dezelfde ID. Ik vroeg me af of dat geen probleem zou opleveren met het JavaScript voor IE 6 (en lager)? Kun je net subnav1, subnav2, etcetera maken... (Of liever nog wat meer zeggende namen, semantisch gezien). Verder zie ik nu dat er ook een class bestaat die 'subnav' heet. Dat zou in theorie geen enkel probleem moeten opleveren, maar ik vermijd dat soort constructies altijd, omdat IE zich niet echt aan de theorie houdt... Maar nogmaals, het is maar een idee, ik weet echt niet of dit de oplossing is. Succes!
  • Hoi, Buur hartelijk dank voor je voorstel en ook Ali Jas (trouwens, ik maak al gebruik van specifity), maar het werkt nog steeds niet. Ik ben radeloos. Help mij a.u.b., want dan kan ik verder om het in de produktie-omgeving te plaatsen. Nogmaals, waarom heb ik [url=http://www.mscentrumnijmegen.nl]hier[/url] geen problemen en op de test-site wel, terwijl ze nagenoeg gelijk zijn aan elkaar. Alleen heb ik op de test-site het stramien van de pagina's omgegooid, zodat het voldoet aan iedere resolutie/schermgrootte. Ook heb ik daardoor de css een beetje aangepast, maar nogmaals in wezen zijn ze gelijk (volgens mij). Oh ja, nog even een reactie op de vraag van Ali Jas: met het grafisch ontwerp bedoel ik inderdaad de lay-out (het uiterlijk) van de pagina. Moet ik daar dan een andere term voor gebruiken? Wie o wie kan mij helpen met de hover-functie in het rechter navigatie-menu? m.vr.gr., Dalertje
  • Waar zijn jouw specificity links dan? Ik zie ze niet. Ik bedoel dus dit: http://www.w3.org/TR/CSS2/cascade.html#specificity En heb je dit trouwens al gedaan?… http://validator.w3.org/ Kan ook ontzettend veel tijd schelen. Verder: Als een versie van een site goed werkt, ga dan vooral daar mee verder! :wink: En als je het hebt over een ‘grafisch ontwerp’ dan is dat te algemeen. Wie heeft nu wat gemaakt? (Ik neem aan dat zij de huisstijl en de template hebben geleverd?) Anyway, in dit geval zitten er verschillende handen aan. En dat is ook wel te zien.
  • Wat is dat nu weer voor een opmerking Ali Jas. Ik stel vragen om te leren en niet om ongevraagd bepaalde kritiek te krijgen die geen hout snijdt.
  • relax! Ik snap de frustratie, maar haal ff diep adem :) Dit is je CSS van de test site: [code:1:47a66f4748] #sidebar ul ul { position: absolute; left: -120%; top: 0; } #sidebar li { position: relative; padding: .3em; } #subnav a { font-size: 16px; font-weight: bold; width: 220px; } #sidebar ul ul { display: none; background-color: #C7E6E0; border-style: groove; border-width: thin; } #sidebar ul li:hover ul { display: block;[/code:1:47a66f4748] Dit is de CSS van de ander: [code:1:47a66f4748]#nav ul ul { position: absolute; left: -130%; top: 0; } #nav li { position: relative; padding: .3em; } #subnav a { font-size: 16px; padding: 0; margin: 0; font-weight: bold; display: block; width: 15em; } div#nav ul ul { display: none; /* z-index: 10;*/ background-color: #C7E6E0; border-style: groove; border-width: thin; } div#nav ul li:hover ul { display: block;[/code:1:47a66f4748] En als je er niet meer uitkomt, begin dan opnieuw met het werkende exemplaar, precies zoals ali jas schreef.
  • Even wat huiswerk gedaan, 3 geconstateerde fouten bij je test-site:[code:1:c237a026c4]12 html, body Eigenschap behavior bestaat niet : url("csshover.htc") 108 #footer Ongeldig getal : (background) poging een puntkomma te vinden voor de eigenschapnaam: voeg deze toe 201 #keurmerk Ongeldig getal : (right) poging een puntkomma te vinden voor de eigenschapnaam: voeg deze toe [/code:1:c237a026c4]Jouw ‘gevalideerde sheet’, ga vanuit hier weer verder:[code:1:c237a026c4]a:link { color : #6dc0ae; } a:visited { color : #cc0000; } a:hover { color : #6dc0ae; } html, body { margin : 0; padding : 0; } #outer_wrap { min-width : 740px; width : 100%; background : #fff url(../knoppen/left.gif) repeat-y left 0%; } #wrap { background : url(../knoppen/right.gif) repeat-y right 0%; } #header { margin : 0; padding : 0; background : #ffffff; width : 65%; } #container { float : left; width : 110%; display : inline; margin-left : -350px; text-align : justify; font-family : Arial, Helvetica, sans-serif; font-size : 18px; font-weight : 500; } #route { clear : both; float : right; } #main { margin-left : 350px; } #sidebar { position : relative; padding-left : 100%; margin-left : -200px; display : block; } #sidebar a { font-family : Arial, Helvetica, sans-serif; font-size : 24px; color : #248c73; font-weight : 600; text-decoration : none; display : block; } #sidebar a:hover { color : #003300; background-image : url(../knoppen/triangle.gif); background-repeat : no-repeat; background-position : right 0%; } #sidebar p { position : relative; } #footer { width : 75%; clear : both; float : inherit; background : #ffffff; font-family : "Times New Roman", Times, serif; font-size : 16px; color : #31a286; } .clearing { height : 0; clear : both; } .subnav a { padding : 0; margin : 0; font-weight : 200; display : block; width : 13em; } #sidebar ul { text-align : left; list-style-type : none; padding-top : 0; margin-top : 0; padding-left : 3px; margin-left : 3px; } #sidebar ul ul { position : absolute; left : -120%; top : 0; } #sidebar li { position : relative; padding : 0.3em; } #subnav a { font-size : 16px; font-weight : bold; width : 220px; } #sidebar ul ul { display : none; background-color : #c7e6e0; border-style : groove; border-width : thin; } #sidebar ul li:hover ul { display : block; } .big { font-family : Arial, Helvetica, sans-serif; font-size : 18px; font-weight : bold; color : #6dc0ae; } .xbig { font-family : Arial, Helvetica, sans-serif; font-size : 24px; font-weight : bold; color : #6dc0ae; } .style3 { font-family : Arial, Helvetica, sans-serif; font-size : 18px; font-weight : bold; } .style4 { font-family : Arial, Helvetica, sans-serif; font-size : 14px; font-weight : bold; font-style : italic; } #keurmerk { position : absolute; right : 20%; top : auto; } .testclass { color : #31a286; font : 28px arial, helvetica; font-style : normal; font-weight : bold; text-align : left; } #test { position : absolute; top : 5em; left : 40%; width : 10em; text-align : left; } #video { float : left; } .termen { font-family : Arial, Helvetica, sans-serif; font-size : 18px; font-style : italic; font-weight : 500; color : #6dc0ae; line-height : 22px; } #wijziging { font-size : 12px; font-style : italic; font-weight : 600; } [/code:1:c237a026c4] Zo, en nu weer ‘on track’ .... Full speed! Succes ermee.
  • Hoi, Allereerst, ik had mede door tijdgebrek nog niet gevalideerd. Eigenlijk een kleine moeite. Dit doe ik normaal gesproken, maar door mijn frustratie verloor ik het overzicht. De opmerking van Ali Jas wat betreft het verder werken vanuit de werkende situatie, was me inderdaad vantevoren duidelijk, maar alleen die laatste opmerking schoot me in het verkeerde keelgat en toen reageerde ik wat (te) primair. De hulp nu van Teacher en van Ali Jas geven mij weer een goed gevoel. Dit zijn constructieve opmerkingen. Ik kan nu weer verder. Hartelijk dank. M.vr.gr., Dalertje
  • Beste dalertje, Ali Jas, Buur en teachter, ik kon het niet nalaten om even te laten weten dat ik me erg heb geamuseerd bij het lezen van deze posts en vooral hoe het afgelopen is! Geweldig hoe volwassen mensen klaarblijkelijk toch met elkaar om kunnen gaan. Een pluim voor allen. (wie ben ik om een pluim uit te delen maar goed ;))
  • Heb je je speciaal om dat te melden geregistreerd op dit forum?

Beantwoord deze vraag

Weet jij het antwoord op deze vraag? Registreer of meld je aan met je account

Dit is een gearchiveerde pagina. Antwoorden is niet meer mogelijk.