Op deze website gebruiken we cookies om content en advertenties te personaliseren, om functies voor social media te bieden en om ons websiteverkeer te analyseren. Ook delen we informatie over uw gebruik van onze site met onze partners voor social media, adverteren en analyse. Deze partners kunnen deze gegevens combineren met andere informatie die u aan ze heeft verstrekt of die ze hebben verzameld op basis van uw gebruik van hun services. Meer informatie.

Akkoord

Vraag & Antwoord

Webdesign (HTML, CSS, Flash)

[CSS] bugs in IE 5.5 en IE 6

None
41 antwoorden
  • Beste forumleden,

    Ben bezig met een nieuw projectje. Ditmaal gekozen om de site te maken binnen het CMS ModX

    Dit staat echter los van mijn probleem. Mijn grote probleem zit hem in de navigatiebalk. Deze wordt opgemaakt via een list item. Deze list item krijgt op zijn beurt weer een opmaak via css waardoor er uiteindelijk een rollout menu ontstaat.

    Hij werkt overal prima.. behalve in IE 5.5 en 6.

    Heeft iemand een suggestie waar deze fout in zit?

    De site vind je hier

    Dank voor jullie evt hulp :)
  • Klopt.

    Ik zoek hier ook naar. Onder IE7, Firefox en Opera werkt dit wel.
  • Wat bedoel je precies..

    Werk je ook met modx (en de wayfinder snippet)… of zit je in het algemeen te stoeien met rollout menu's middels list items… (suckerfish ofzo)
  • [quote:202be7f8a0="D'acide"]Wat bedoel je precies..

    Werk je ook met modx (en de wayfinder snippet)… of zit je in het algemeen te stoeien met rollout menu's middels list items… (suckerfish ofzo)[/quote:202be7f8a0]
    Ik maak handmatig de list items en de ul's. Als ik naar de broncode van je site kijkt, doet modx dat ook.
    Er wordt nl een CSS menu gegenereerd. Er zit nl een li:hover element in. In IE5.5 en IE6 wordt het "hover" attribute alleen maar ondersteund in combinatie met het "a" element zoals: [code:1:202be7f8a0]a:hover[/code:1:202be7f8a0]Echter [code:1:202be7f8a0]li:hover[/code:1:202be7f8a0]wordt door de oudere browsers niet ondersteund.
  • Ow wacht eens.. daar zeg jij me wat..

    Ik dacht dat het systeem ook uitging van de a:hover ipv li:hover…

    Ik weet dat als je wil dat oudere browsers li als hover state kunnen zien, dat je dan wat extra javascript nodig hebt. (zoals bij het suckerfish systeem)

    even snel zoeken:
    [code:1:1b94760edb]
    startList = function() {
    if (document.all&&document.getElementById) {
    navRoot = document.getElementById("nav");
    for (i=0; i<navRoot.childNodes.length; i++) {
    node = navRoot.childNodes[i];
    if (node.nodeName=="LI") {
    node.onmouseover=function() {
    this.className+=" over";
    }
    node.onmouseout=function() {
    this.className=this.className.replace(" over", "");
    }
    }
    }
    }
    }
    window.onload=startList;
    [/code:1:1b94760edb]

    Dus door het toevoegen van deze code zou het een en ander wellicht al beter werken.. Ik ga eens even aan de slag.

    dank voor je opmerking.
  • En jij ook bedankt trouwens voor het uitzoeken.
    Want ik dat zelfde javascriptje proberen.
  • bij werkt het nog steeds niet..


    hier de tekst van Alistapart:

    [quote:9f9ef7378a]
    DOM-based scripting to the rescue

    We’ve established IE’s lack of support for the :hover pseudo class, but by using the Document Object Model, we can attach mouseover and mouseout events to any element. This is good news for us because it means that with a simple snippet of JavaScript we can effectively patch IE’s :hover problems.

    Because IE is blind we need to find another way to identify the properties of the :hover pseudo class. With JavaScript, we know that we can manipulate the className property of an element so what we are going to do first is alter the CSS:

    li:hover ul{ display: block; }

    becomes:

    li:hover ul, li.over ul{ display: block; }

    Now we can invoke the :hover CSS rules by adding the class over to the desired element. We also need a way to tell IE which of the UL elements on the page we actually want to be our dropdown menus. We can do this by giving an id to our root ul element:

    <ul>

    becomes:

    <ul id="nav">

    Now that we have a means of identifying the root ul element of our dropdown list, we can grab this element and loop through all of its child elements, attaching mouseover and mouseout events to all the li elements nested within it. And this is how it’s done:

    startList = function() {
    if (document.all&&document.getElementById) {
    navRoot = document.getElementById("nav");
    for (i=0; i<navRoot.childNodes.length; i++) {
    node = navRoot.childNodes;
    if (node.nodeName=="LI") {
    node.onmouseover=function() {
    this.className+=" over";
    }
    node.onmouseout=function() {
    this.className=this.className.replace(" over", "");
    }
    }
    }
    }
    }
    window.onload=startList;

    On page load, the startList function is invoked. The function determines if the browser is actually IE 5 or greater by checking for the existence of the document.all object and document.getElementById function. This is a bit of a crude way of doing it but it’s short and sweet — and since we are trying to make a compact solution, this will do. It then loops through, enabling mouseover and mouseout events which add and remove the over class from the className property of the element.

    There you have it. If you got lost anywhere, have a look at a commented, bare-bones example in action.
    [/quote:9f9ef7378a]

    Ze gaan zowieso uit dat het menu een ul id="nav" krijgt… Dat krijgt ie bij mij niet…

    Op basis daarvan werkt volgens mij ook het stukje javascript.

    Heeft iemand een idee wat ik moet veranderen aan het javascript zodat het voor mijn setup werkt?

    [code:1:9f9ef7378a]
    <div id="navigation">
    <div class="menu">
    <ul><li class="first"><a href="http://www.2wayservices.nl/cms/" title="2 Way Services" >2 Way Services</a><ul><li class="first"><a href="/cms/index.php?q=5.html" title="Bedrijfsprofiel" >Bedrijfsprofiel</a></li>
    <li><a href="/cms/index.php?q=6.html" title="Dienstverlening" >Dienstverlening</a></li>
    <li><a href="/cms/index.php?q=8.html" title="ABU CAO" >ABU CAO</a></li>
    <li class="last"><a href="/cms/index.php?q=9.html" title="Algemene Voorwaarden" >Algemene Voorwaarden</a></li>
    </ul></li>

    <li><a href="/cms/index.php?q=12.html" title="Werkgevers" >Werkgevers</a><ul><li class="first"><a href="/cms/index.php?q=13.html" title="Technisch personeel" >Technisch personeel</a></li>
    <li><a href="/cms/index.php?q=16.html" title="IT professionals" >IT professionals</a></li>
    <li><a href="/cms/index.php?q=17.html" title="Werving & selectie" >Werving & selectie</a></li>
    <li><a href="/cms/index.php?q=18.html" title="Service & begeleiding" >Service & begeleiding</a></li>
    <li><a href="/cms/index.php?q=19.html" title="Kwaliteit" >Kwaliteit</a></li>
    <li class="last"><a href="/cms/index.php?q=20.html" title="Voordelen 2WS" >Voordelen 2WS</a></li>
    </ul></li>
    <li><a href="/cms/index.php?q=14.html" title="Werknemers" >Werknemers</a><ul><li class="first"><a href="/cms/index.php?q=21.html" title="Werken bij 2WS" >Werken bij 2WS</a></li>

    <li><a href="/cms/index.php?q=23.html" title="Personeelsaanbod" >Personeelsaanbod</a><ul><li class="first"><a href="/cms/index.php?q=40.html" title="Technisch personeel" >Technisch personeel</a></li>
    </ul></li>
    <li class="last"><a href="/cms/index.php?q=24.html" title="Inschrijfformulier" >Inschrijfformulier</a></li>
    </ul></li>
    <li class="last"><a href="/cms/index.php?q=15.html" title="Contact" >Contact</a><ul><li class="first"><a href="/cms/index.php?q=27.html" title="Contact" >Contact</a></li>
    <li><a href="/cms/index.php?q=29.html" title="Routebeschrijving" >Routebeschrijving</a></li>
    <li class="last"><a href="/cms/index.php?q=30.html" title="Downloads" >Downloads</a></li>
    </ul></li>
    </ul>
    </div>

    </div>
    [/code:1:9f9ef7378a]
  • dat zit m in dit stukje:

    document.getElementById("nav");

    Je kan hier ook een ander element pakken (of meerdere en dat het stukje daar over mappen).

    Wanneer je een netter opgemaakt stuk HTML geeft wil ik nog wel voor je kijken maar zo is het echt niet leesbaar.
  • Zo moet het erui gaan zien:[code:1:6b73fc7cb9]<div id="navigation">
    <div class="menu">
    <ul id="nav">
    <li class="first"><a href="http://www.2wayservices.nl/cms/" title="2 Way Services">2 Way Services</a>
    <ul>
    <li class="first"><a href="/cms/index.php?q=5.html" title="Bedrijfsprofiel">Bedrijfsprofiel</a></li>
    <li><a href="/cms/index.php?q=6.html" title="Dienstverlening">Dienstverlening</a></li>
    <li><a href="/cms/index.php?q=8.html" title="ABU CAO">ABU CAO</a></li>
    <li class="last"><a href="/cms/index.php?q=9.html" title="Algemene Voorwaarden" >Algemene Voorwaarden</a></li>
    </ul>
    </li>
    <li><a href="/cms/index.php?q=12.html" title="Werkgevers">Werkgevers</a>
    <ul>
    <li class="first"><a href="/cms/index.php?q=13.html" title="Technisch personeel">Technisch personeel</a></li>
    <li><a href="/cms/index.php?q=16.html" title="IT professionals">IT professionals</a></li>
    <li><a href="/cms/index.php?q=17.html" title="Werving & selectie">Werving & selectie</a></li>
    <li><a href="/cms/index.php?q=18.html" title="Service & begeleiding">Service & begeleiding</a></li>
    <li><a href="/cms/index.php?q=19.html" title="Kwaliteit" >Kwaliteit</a></li>
    <li class="last"><a href="/cms/index.php?q=20.html" title="Voordelen 2WS">Voordelen 2WS</a></li>
    </ul>
    </li>
    <li><a href="/cms/index.php?q=14.html" title="Werknemers">Werknemers</a>
    <ul>
    <li class="first"><a href="/cms/index.php?q=21.html" title="Werken bij 2WS">Werken bij 2WS</a></li>
    <li><a href="/cms/index.php?q=23.html" title="Personeelsaanbod">Personeelsaanbod</a>
    <ul>
    <li class="first"><a href="/cms/index.php?q=40.html" title="Technisch personeel">Technisch personeel</a></li>
    </ul>
    </li>
    <li class="last"><a href="/cms/index.php?q=24.html" title="Inschrijfformulier">Inschrijfformulier</a></li>
    </ul>
    </li>
    <li class="last"><a href="/cms/index.php?q=15.html" title="Contact">Contact</a>
    <ul>
    <li class="first"><a href="/cms/index.php?q=27.html" title="Contact">Contact</a></li>
    <li><a href="/cms/index.php?q=29.html" title="Routebeschrijving">Routebeschrijving</a></li>
    <li class="last"><a href="/cms/index.php?q=30.html" title="Downloads">Downloads</a></li>
    </ul>
    </li>
    </ul>
    </div>
    </div>
    [/code:1:6b73fc7cb9]Je had je "root ul" nog geen id gegeven, "nav" in dit geval (of iets anders als je dat liever hebt, maar dan moet je de js aanpassen). [i:6b73fc7cb9]En waarom stop je spaties aan het einde van je anchor tags?[/i:6b73fc7cb9]

    [i:6b73fc7cb9]Edit: Daarnaast kan MODx een goed werkend dropdown menu voor je maken (wayfinder), ik geloof zelfs dat het in de standaard template zit (MODxHost …?) als je MODx net hebt geinstalleerd….[/i:6b73fc7cb9]
  • Beste Marientje en Drewster, dank voor jullie hulp.

    Ik weet dat modx zelf zo'n menu kan maken… dat is namelijk wat ik nu gebruik. Ik kan dus zelf niks aanpassen aan de <ul> en de <li>.. deze wordt namelijk gegenereerd naar aanleiding van de documenten die aangemaakt worden binnen het CMS.

    enige dat ik dus kan doen is het aanpassen van het stukje javascript zodat ie compatible is met mijn gegenereerde list. Echter ben ik nog niet zo begaan met javascript helaas.

    Dus de oplossing die je biedt om mijn root ul te voorzien van een id is geen optie.. anders waren we inderdaad snel klaar geweest.. dat is dus ook het grote probleem. Bepaalde elementen krijgen een id van wayfinder (het systeem dat de list genereerd binnen modx).. en sommigen niet.. en volgens mij kan ik die niet aanpassen helaas.
  • Maar waar kan je dan wel van uit gaan voor het vinden van het menu?

    je javascript, ik denk dat dit moet werken, niet getest echter:

    [code:1:fa1e5ea885]startList = function() {
    if (document.all&&document.getElementById) {
    navRoot = document.getElementById("navigation").childNodes[0].childNodes[0];
    for (i=0; i<navRoot.childNodes.length; i++) {
    node = navRoot.childNodes[i];
    if (node.nodeName=="LI") {
    node.onmouseover=function() {
    this.className+=" over";
    }
    node.onmouseout=function() {
    this.className=this.className.replace(" over", "");
    }
    }
    }
    }
    }
    window.onload=startList; [/code:1:fa1e5ea885]
  • ow ok.. dus in feite zeg je hier:

    [code:1:b2da59105d]navRoot = document.getElementById("navigation")[/code:1:b2da59105d]

    dat het hele stukje code javascript dus van toepassing is op de class: "navigation"?

    Zeg ik dat zo goed?

    Heb je stuk code inmiddels geintegreerd. ben nu op www.browsershots.org aan het wachten op screenshots van de site in IE5.5 en IE6

    (heb geen IE5.5 en 6 op mijn pc geinstalleerd)
  • Je kan het als het goed is wel aanpassen in de chunks, onder 'MODxhost Menu' ik heb hier geen originele versie meer van dat menu dus ik kan niet meer kijken hoe het ook alweer zat (is ook alweer een tijd geleden).

    Hier kan je de info vinden die je nodig hebt… (dat vindt ik het grote minpunt aan MODx er is niet een centrale plek waar je support info kan vinden over alle plugins, het is allemaal een beetje gefragmenteerd).
  • [quote:e6e28dc2cb="D'acide"]ow ok.. dus in feite zeg je hier:

    dat het hele stukje code javascript dus van toepassing is op de class: "navigation"?

    Zeg ik dat zo goed?

    Heb je stuk code inmiddels geintegreerd. ben nu op www.browsershots.org aan het wachten op screenshots van de site in IE5.5 en IE6

    (heb geen IE5.5 en 6 op mijn pc geinstalleerd)[/quote:e6e28dc2cb]
    Ja.
    dacht het zelf ook met browsershots te bekijken maar daar kan je natuurlijk niet zien of de javascript ook werkt. Je zal n computer moeten hebben met IE<7
  • [quote:ae81423d8f="Drewster"]Je kan het als het goed is wel aanpassen in de chunks, onder 'MODxhost Menu' ik heb hier geen originele versie meer van dat menu dus ik kan niet meer kijken hoe het ook alweer zat (is ook alweer een tijd geleden).

    Hier kan je de info vinden die je nodig hebt… (dat vindt ik het grote minpunt aan MODx er is niet een centrale plek waar je support info kan vinden over alle plugins, het is allemaal een beetje gefragmenteerd).[/quote:ae81423d8f]

    Hey thanks voor die link.. daar staan veel bruikbare dingen. thanks.
  • [quote:31465d3a5a="marientje"][quote:31465d3a5a="D'acide"]ow ok.. dus in feite zeg je hier:

    dat het hele stukje code javascript dus van toepassing is op de class: "navigation"?

    Zeg ik dat zo goed?

    Heb je stuk code inmiddels geintegreerd. ben nu op www.browsershots.org aan het wachten op screenshots van de site in IE5.5 en IE6

    (heb geen IE5.5 en 6 op mijn pc geinstalleerd)[/quote:31465d3a5a]
    Ja.
    dacht het zelf ook met browsershots te bekijken maar daar kan je natuurlijk niet zien of de javascript ook werkt. Je zal n computer moeten hebben met IE<7[/quote:31465d3a5a]

    Nou, in IE5.5 en IE6 is de navigatiediv velen malen hoger dan zoals ie eigenlijk moet zijn.. Ik dacht zelf dat dat komt door de fout mbt hover states.

    Kan natuurlijk ook zijn dat er een css conflictje bij is gekomen.
  • De oudere (stand alone) versies van IE zijn hier te downloaden. Zover ik weet nog niet geschikt voor Vista.
    wimb
  • [quote:dc07c04ba1="WimB"]Zover ik weet nog niet geschikt voor Vista.[/quote:dc07c04ba1]
    Klopt. Nu draai ik geen Vista, maar in XP kan je het één en ander instellen als je rechtsklikt op een snelkoppeling, vervolgens Eigenschappen kiest en dan het tabje "Compatibiliteit". Ik kan daar onder andere kiezen voor een Compatibiliteitsmodus "Windows 95"… Wellicht kan iets dergelijks dus ook in Vista.

    - Bas
  • IE6 en IE7 virtual pc image
  • Heey thanks voor jullie hulp mannen… Ik ga direct aan de slag om IE6 te installeren.

Beantwoord deze vraag

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