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 dropdown werkt niet onder IE 6

redroest
4 antwoorden
  • Hoi

    Ik ben bezig met een dropdown menu voor mijn website en het menu werkt perfect op firefox en IE 7.0, maar voor lagere versies werkt de dropdown niet.

    De website is: www.vvmonnickendam.nl

    Hieronder staat de CSS van het menu:

    [code:1:e7823c2fa7]
    #topmenu{
    padding: 10px;
    margin: 0px;
    font-family: arial, helvetica, sans-serif;
    white-space:nowrap;
    background-image: url(gras.jpg);
    }

    #topmenu td{
    text-align:center;
    background-image: url(Graswit.jpg);
    border-width: 3px;
    border-style: solid;
    border-color: #215D21;
    width: 130px;
    position: relative;
    }

    #topmenu td a{
    display: block;
    text-decoration: none;
    color:#215D21;
    font-weight:bold;
    font-size:12px;
    }

    #topmenu td a:hover {
    background:#004300;
    color:#FFFFFF;
    font-weight:bold;
    }

    #topmenu ul { /* alle lists */
    padding: 0;
    margin: 0;
    list-style: none;
    align: left;
    position: absolute;
    left: left;
    }

    #topmenu td { /* alle list items */
    float: left;
    position: relative;
    width: 130px;
    }

    #topmenu td ul { /* sub items */
    display: none;
    position: absolute;
    top: 1em;
    left: 0;
    background-image: url(Graswit.jpg);
    }

    #topmenu td ul { /* postitie resetten voor alle browsers behalve IE */
    top: auto;
    left: auto;
    }

    #topmenu td:hover ul, td.over ul { /* lists nested onder hovered list items */
    display: block;
    border-width: 3px;
    border-style: solid;
    border-color: #215D21;
    background-image: url(Graswit.jpg);
    position: absolute;
    left: 0px;
    padding: 4px;
    width: 105px;
    }

    #content {
    clear: left;
    }
    [/code:1:e7823c2fa7]

    Hier staat de html van het menu:

    [code:1:e7823c2fa7]
    <table id="topmenu"><tr>
    <td><a href="">Zaterdag</a>
    <ul>
    <li><a href="construction.php">Zaterdag 1</a></li>
    <li><a href="construction.php">Zaterdag 2</a></li>

    </ul>
    </td>

    <td><a href="construction.php">Zondag</a>
    <ul>
    <li><a href="construction.php">zondag 1</a></li>
    <li><a href="construction.php">Zondag 2</a></li>
    <li><a href="construction.php">zondag 3</a></li>
    </ul>
    </td>

    <td><a href="construction.php">A junioren</a>
    <ul>
    <li><a href="construction.php">A1</a></li>
    <li><a href="construction.php">A2</a></li>

    </ul>
    </td>
    <td><a href="">B junioren</a>
    <ul>
    <li><a href="construction.php">B1</a></li>
    <li><a href="construction.php">B2</a></li>

    </ul>
    </td>
    <td><a href="">C junioren</a>
    <ul>

    </ul>
    </td>
    <td><a href="">D junioren</a>
    <ul>

    </ul>
    </td>
    <td><a href="">E pupillen</a>
    <ul>

    </ul>
    </td>
    <td><a href="">F pupillen</a>
    <ul>

    </ul>
    </td>
    <td><a href="">Dames</a>
    <ul>

    </ul>
    </td>
    <td><a href="">Meiden</a>
    <ul>

    </ul>
    </td>
    <tr></table>[/code:1:e7823c2fa7]

    Hier staat het javascript:

    [code:1:e7823c2fa7]<script type="text/javascript">
    startList = function()
    {
    if(document.all && document.getElementById)
    {
    topmenuRoot = document.getElementById("topmenu");
    for (i=0; i<navRoot.childNodes.length; i++)
    {
    node = topmenuRoot.childNodes[i];
    if (node.nodeName=="td")
    {
    node.onmouseover=function()
    {
    this.className+=" over";
    }
    node.onmouseout=function()
    {
    this.className=this.className.replace(" over", "");
    }
    }
    }
    }
    }
    window.onload=startList;
    </script>[/code:1:e7823c2fa7]

    Ik hoop dat jullie weten wat hier mis is en me kunnen helpen het op te lossen.
  • In FF2 werkt het ook niet goed wanneer het menu uit twee regels bestaat en het dropdown menu over een onderstaand item zou moeten vallen.
  • Jup dat weet ik. dat is een kwestie van het aanpassen van de layout. het gaat mij erom dat hij een dropdown weergeeft bij IE6
  • Ik snap niet helemaal waarom je hier een table gebruikt, in elk dropdowntutorial gebruikt men - terecht - slechts een pure list. Het makkelijkst is om te werken zoals in een goed tutorial wordt uitgelegd, zoals in de 'son of suckerfish dropdowns'.

Beantwoord deze vraag

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