[CSS] Probleem in Chrome, IE en Firefox tonen div wel

[? ?]

Ik heb een heel leuke scroll () site gemaakt voor mezelf
NB: ik vond geen perfecte scroll-js dus heb ik die zelf gemaakt.

Vorige week heb ik wat veranderd en sindsdien doet het menu het niet meer in Chrome...
De div id=navigation (onderaan source) moet fixed getoond worden.
Voor de duidelijkheid heb ik er een rode rand op gezet.

Het rare is dat de inhoud van die div niet getoond wordt, terwijl de inhoud wel aanklikbaar is. Firefox en IE tonen het dan weer wel. Soms toont Chrome wel wat, soms niet, ik geraak er niet uit. Help?

Note: mouse-scroll-to-use-the-site

url: *snip*

(geen url's quoten enz aub, deze bit.ly is goed genoeg (is geen spam))

stukje html

code:

    <div id="navigation">
        <ol>
          <li id="li-1" data-link="section1" class="active"><div class="bullet">o</div><span class="tooltip">Home</span></li>
          <li id="li-2" data-link="section2"><div class="bullet">o</div><span class="tooltip">Prive</span></li>
          <li id="li-3" data-link="section3"><div class="bullet">o</div><div class="tooltip">Life List</div></li>
          <li id="li-4" data-link="section4"><div class="bullet">o</div><div class="tooltip">Computers</div></li>
          <li id="li-5" data-link="section5"><div class="bullet">o</div><div class="tooltip">Moestuin</div></li>
          <li id="li-6" data-link="section6"><div class="bullet">o</div><div class="tooltip">Houtbewerking</div></li>
          <li id="li-7" data-link="section7"><div class="bullet">o</div><div class="tooltip">Muziek</div></li>
          <li id="li-8" data-link="section8"><div class="bullet">o</div><div class="tooltip">Film</div></li>
        </ol>
    </div>

stukje css

code:

body, *
{
    margin: 0;
    padding: 0;
    overflow: hidden;
}

#navigation
{
    border: 1px solid red;
    cursor: pointer;
    width: 150px;
    display: block;
    overflow: auto;
    position: fixed;
    top: 100px;
    left: 100px;
}

#navigation li .bullet
{
    font-family: 'sans serif';
    display: inline-block;
    width: 8px;
    height: 8px;
    margin: 4px 0;
    text-indent: -999em;
    border: 2px solid #333;
    border-radius: 6px;
    cursor: pointer;
    opacity: .4;
    /* -webkit-filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3)); */
    -moz-filter: drop-shadow(0 1px 2px rgba(0,0,0,.3));
    -ms-filter: drop-shadow(0 1px 2px rgba(0,0,0,.3));
    -o-filter: drop-shadow(0 1px 2px rgba(0,0,0,.3));
    /*filter: drop-shadow(0 1px 2px rgba(0,0,0,.3));*/
}

#navigation li .tooltip
{
    width: 100px;
    display: inline-block;
    color: #fff;
    font-size: 18px;
    font-family: bebas_neueregular;
    font-weight: normal;
    position: relative;
    left: 10px;
    top: -3px;
    overflow: visible;  
    /*-webkit-filter: drop-shadow(0 1px 2px rgba(0,0,0, 1));*/
    -moz-filter: drop-shadow(0 1px 2px rgba(0,0,0,1));
    -ms-filter: drop-shadow(0 1px 2px rgba(0,0,0,1));
    -o-filter: drop-shadow(0 1px 2px rgba(0,0,0,1));
    filter: drop-shadow(0 1px 2px rgba(0,0,0,1));
}

stukje js (jquery)

code:

function fixNavigation()
{
    $('#navigation').css('position', 'fixed');
    $('#navigation').css('z-index', '999');
    $('#navigation').css('top', parseInt(($(window).height() - $('#navigation').height()) / 2) + 'px');
    $('#navigation').css('left', parseInt(($(window).width() - $('#navigation').width())) + 'px');
    setTimeout("fixNavigation()", 1000);    //mag weg, maar voor zekerheid wordt dit continue gedaan
}

[ Voor 77% gewijzigd door RobIII op 08-04-2014 14:32 ]

[RobIII]

Randmr schreef op dinsdag 08 april 2014 @ 14:19:
(geen url's quoten enz aub, deze bit.ly is goed genoeg (is geen spam))

Nog beter: maak gewoon even een fatsoenlijke testcase (gebruik even http://jedomein.be/testcase of http://jsfiddle.net) waar je enkel-en-alleen wat relevante(!) html/css/js neerzet om je probleem te reproduceren. Lees voor de rest van het riedeltje even hier verder. Scheelt me weer typen

[ Voor 16% gewijzigd door RobIII op 08-04-2014 14:36 ]