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)

FF vs IE problemen

Anoniem
catwalkcriminal
13 antwoorden
  • Ook ik heb wat ruzie met IE vs FF. Ben al avonden aan het klooien met mn code, maar ik kom er echt niet uit. heb veel dingen gelezen over menu's maken, maar ben nog een redelijke leek. In FF werkt het menu goed, maar natuurlijk ligt IE weer is dwars en ik weet zeker dat ik een hele simpele fout maak, maar welke??

    [code:1:92853120a9]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html>
    <head>
    <title>Drop-Down Menu</title>
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link rel="stylesheet" type="text/css" href="css/default.css">

    <!– dd menu –>
    <script type="text/javascript">
    <!–
    var timeout = 500;
    var closetimer = 0;
    var ddmenuitem = 0;

    // open hidden layer
    function mopen(id)
    {
    // cancel close timer
    mcancelclosetime();

    // close old layer
    if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';

    // get new layer and show it
    ddmenuitem = document.getElementById(id);
    ddmenuitem.style.visibility = 'visible';

    }
    // close showed layer
    function mclose()
    {
    if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
    }

    // go close timer
    function mclosetime()
    {
    closetimer = window.setTimeout(mclose, timeout);
    }

    // cancel close timer
    function mcancelclosetime()
    {
    if(closetimer)
    {
    window.clearTimeout(closetimer);
    closetimer = null;
    }
    }

    // close layer when click-out
    document.onclick = mclose;
    // –>

    startList = function() {
    if (document.all&&document.getElementById) {
    navRoot = document.getElementById("sddm");
    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;

    </script>

    </head>
    <body>

    <h1>&nbsp;</h1>

    <ul id="sddm">
    <li><a href="#" onmouseover="mopen('m1')" onmouseout="mclosetime()">HOME</a>
    <div id="m1" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
    </div>
    </li>
    <li><a href="#" onmouseover="mopen('m2')" onmouseout="mclosetime()">NIEUWS</a>
    <div id="m2" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
    </div>
    </li>
    <li><a href="#" onmouseover="mopen('m3')" onmouseout="mclosetime()">BLOG</a>
    <div id="m3" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
    </div>
    </li>
    <li><a href="#" onmouseover="mopen('m4')" onmouseout="mclosetime()">DISCOGRAFIE</a>
    <div id="m4" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
    </div>
    </li>
    <li><a href="#" onmouseover="mopen('m5')" onmouseout="mclosetime()">AGENDA</a>
    <div id="m5" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
    </div>
    </li>
    <li><a href="#" onmouseover="mopen('m6')" onmouseout="mclosetime()">MEDIA</a>
    <div id="m6" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
    <li><a href="#">FOTO'S</a></li>
    <li><a href="#">INTERVIEWS</a></li>
    <li><a href="#">VIDEO'S</a></li>
    </div>
    </li>
    <li><a href="#" onmouseover="mopen('m7')" onmouseout="mclosetime()">DRUMKIT</a>
    <div id="m7" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
    </div>
    </li>
    <li><a href="#" onmouseover="mopen('m8')" onmouseout="mclosetime()">LINKS</a>
    <div id="m8" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
    </div>
    </li>
    <li><a href="#" onmouseover="mopen('m9')" onmouseout="mclosetime()">CONTACT</a>
    <div id="m9" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
    </div>
    </li>
    </ul>
    <div style="clear:both"></div>

    <div style="clear:both"></div>
    <p>

    </body>

    </html>[/code:1:92853120a9]

    en de css is:

    [code:1:92853120a9]#sddm
    { margin: 0;
    padding: 0;
    z-index: 30
    height: 10
    }

    #sddm li
    { margin: 0;
    padding: 0;
    list-style: none;
    float: left;
    font: bold 11px arial}

    #sddm li a
    { display: block;
    margin: 0 px 0 0;
    padding: 4px 10px;
    width: 70px;
    background: #5970B2;
    color: #FFF;
    text-align: center;
    text-decoration: none}

    #sddm li a:hover
    { /*for ie*/
    background: #49A3FF
    }

    #sddm div
    { position: absolute;
    visibility: hidden;
    margin: 0;
    padding: 0;
    background: #EAEBD8;
    border: 1px solid #5970B2}

    #sddm div a
    { position: relative;
    display: block;
    margin: 0;
    padding: 5px 10px;
    width: auto;
    white-space: nowrap;
    text-align: left;
    text-decoration: none;
    background: #EAEBD8;
    color: #2875DE;
    font: 11px arial}

    #sddm div a:hover
    { background: #49A3FF;
    color: #FFF}

    [/code:1:92853120a9]

    Excuses voor de enorme lap. Kan iemand me hier helpen met wat ik nou fout doe. Ik las al dat met div's werken niet netjes is, maar als ik die weghaalde werkte het ook niet meer in FF.

    Ik wil graag snappen wat ik nu fout doe, zodat ik het nooit meer hoef te vragen haha. Dus ik zou het heel erg op prijs stellen als iemand mij duidelijk kan maken waar en wat er nu niet goed zit.
  • Het is niet de bedoeling, dat je een topic "kaapt"
    Start even een nieuw topic, dat maakt de zaak wat overzichtelijker.
  • en afgesplitst.

    t.
  • Sorry, ik dacht juist het aantal onderwerpen te beperken haha. Thx voor het splitsen. Iemand die me wat verder kan helpen?
  • Allereerst kan je je code behoorlijk inkorten, als je bij een menu item geen sub menu items hebt kan je die lege div weg halen (dan verlies je ook die paar pixels die aan de onderkant van je menu hangen als je met je muis over een menu item hovert). Daarnaast moet je je submenu 'list items' in een eigen 'unsorted list' element plaatsen, een menu item met submenu moet er dus zo uitzien:[code:1:73a625977b]<li><a href="#" onmouseover="mopen('m6')" onmouseout="mclosetime()">MEDIA</a>
    <div id="m6" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
    <ul>
    <li><a href="#">FOTO'S</a></li>
    <li><a href="#">INTERVIEWS</a></li>
    <li><a href="#">VIDEO'S</a></li>
    </ul>
    </div>
    </li>[/code:1:73a625977b]Als laatste zit er nog een klein foutje in je CSS:[code:1:73a625977b]margin: 0 px 0 0;[/code:1:73a625977b]Wordt niet begrepen door een browser die zich aan de regels houd en dus over geslagen. Plaats of een getal voor de 'px' of vervang de 'px' voor een '0'.
  • Drewster, bedankt voor je reactie. De div's die er niet horen snap ik nu helemaal. Ik had al naar die extra pixels zitten kijken en toen dacht ik nog goh bij foto's, video's en interview heb ik het niet. Nee duh daar stond die div niet omheen.

    Die css heb ik aangepast, ik wist niet dat dat zo was. Weer wat geleerd.

    In IE is het submenu nu in ieder geval verdwenen, maar het komt nog steeds niet te voorschijn bij een hover over.
    Ik dacht eerst moet er dan nog een css bij, dus dat heb ik gedaan, maar dat maakte geen verschil. Hoe kan het nou dat het submenu nog steeds niet werkt. Zou dat dan toch aan het javscript liggen??
  • Nou ja, bij mij werkt het prima, krijg alleen een warning bij IE7 en gaat ie zeuren over het uitvoeren van scripts…en in IE6 zet ie de submenu items op 1 of andere manier eerst onder elkaar (display:block;) en pas als je over het submenu hovert gaan ze naast elkaar (display:inline;?)…maar dat mag je zelf verder uitzoeken, leer je ook nog iets… :wink:
  • Haha is ook helemaal de bedoeling dat ik het zelf door ga krijgen. Het is de eerste keer dat ik een menu maak. Hierna wil ik het niet meer hoeven te vragen. Ik ga er vandaag nog even verder mee stoeien. Als ik er echt niet uitkom, kom ik nog even terug.
  • Een goede tip is dat alles goed moet werken voordat je de java script zijn werk laat doen. Dus misschien eerst de js uit en dan alles werkend krijgen, dan kan je daarna de js aanzetten en dan weet je dat een fout niet de schuld is van de html/css maar van de javascript.
  • Het is helemaal gelukt! Bedankt voor de hulp. Ik snap alleen niet waarom IE begint te zeuren over het active x als ik het menu vanaf de pc open. Maar als ik t open terwijl het op de server staat doet ie dat niet.

    Het is alleen javascript dat erin staat, verder niks bijzonders.
  • Ja ik weet ook niet waarom dat is, maar ik ben daar ook al een aantal keren tegen aan gelopen. Het is alleen met IE7l, voor dat active x gebeuren heeft MS een patent probleem maat waaromze moeilijk doen over js weet ik niet…
  • Als ik het google dan kom ik wel en aantal tutorials tegen met een script die dat tegen zou gaan. Heb het alleen nog niet getest.
  • Die melding kun je gewoon aan- en uitzetten in je internetopties.

Beantwoord deze vraag

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