[css + IE6] hidden div neemt toch ruimte in

[Foutlook]

Ondanks searches hier en via Google heb ik de oplossing op mijn probleem niet gevonden.

Ik heb mijn menu opgebouwd met ul's en li's (zodat deze in een tekstbrowser ook goed te zien is) maar ik heb een probleem. Onder een aantal menu-items hangt een div met daarin weer een UL (en li's die menu items bevatten). De display property van deze divs zet ik dmv javascript op 'none' en 'block', zodat ik het idee van een uitklapmenu verkrijg.

code menu (tenminste wat mijn php ervan maakt):

PHP:

<ul class='hoofdmenu'>

    <li class='hoofdmenu'><a href='index.php?rubr=2' class='hoofdmenu'>Home</a>
    <li class='hoofdmenu'><a href='#' class='hoofdmenu' onclick="showSubmenu('submenu1');">Portfolio</a>

        <div id='submenu1' style='display: none;'>
            <ul class='hoofdmenu'>
                <li class='hoofdmenu'><a href='portfolio.php?rubr=6' class='submenu'>Webdesign</a>
                <li class='hoofdmenu'><a href='fotoindex.php?rubr=8' class='submenu'>Fotografie</a>
            </ul>
        </div>

    <li class='hoofdmenu'><a href='#' class='hoofdmenu' onclick="showSubmenu('submenu2');">Informatie&nbsp;&nbsp;</a>

        <div id='submenu2' style='display: none;'>
            <ul class='hoofdmenu'>
                <li class='hoofdmenu'><a href='index.php?rubr=16' class='submenu'>Over mij</a>
                <li class='hoofdmenu'><a href='index.php?rubr=17' class='submenu'>Apparatuur</a>
                <li class='hoofdmenu'><a href='index.php?rubr=19' class='submenu'>Deze website</a>
            </ul>
        </div>

    <li class='hoofdmenu'><a href='formulier.php?rubr=5' class='hoofdmenu'>Contact&nbsp;&nbsp;</a>

</ul>

javascript dinges:

code:

function showSubmenu(menu)
{
    obj = document.getElementById(menu);
            
    if (obj.style.display == 'none')
    {
        obj.style.display = 'block'
    }
    else
        obj.style.display = 'none';
}

function hideSubmenus()
{
    for (i = 0; i < menus.length; i++)
    {
        obj = 'submenu' + menus[i];
        if (document.getElementById(obj))
        {
            element = document.getElementById(obj);
            //alert (element.style.visibility);
            obj.style.display = 'none';
        }
    }
}

In Firefox (1.0) werkt dit dus perfect. In IE 6 opzich ook wel, alleen is er een 'ruimte' te zien op de plek van de divs als deze ingeklapt zijn (display: none). Dit wil ik graag weghebben. Iemand een idee hoe ik dit kan doen?

[Woudloper]

Hoe ziet je CSS eruit? Naar mijn idee heeft het meer daar mee te maken, dan met je javascript...

edit:
Verder kan je voor jouw idee ook gebruik maken van Clay zijn CSS Hover. Zie hier een voorbeeld van zijn toepassing

[ Voor 56% gewijzigd door Woudloper op 04-11-2004 16:30 ]

[PaulZ]

Margins en/of paddings van DIV/UL/LI op 0 zetten?

[ Voor 7% gewijzigd door PaulZ op 04-11-2004 16:30 ]

[Foutlook]

code:

#submenu1, #submenu2, #submenu3, #submenu4
{
    position: relative;
    text-align: right;
    margin: 0;
    padding: 0;
    margin-right: 15px;
}

ul.hoofdmenu, li.hoofdmenu {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

Zoals je kan zien staan de padding en margins op 0 in de stylesheet.. dus dat is het imo niet. (edit: afgezien van de margin-right dan, maar na testen blijkt dat die het niet is)

[ Voor 11% gewijzigd door Foutlook op 04-11-2004 16:57 ]

[Verwijderd]

Ik heb je code even ge-paste in een html bestandje en bij mij ziet het er goed uit!
(IE6.0 SP2)
items klappen open en worden rechts uitgelijnd.
items gaan dicht en komen strak tegen elkaar.

[Foutlook]

Verwijderd schreef op 04 november 2004 @ 17:01:
Ik heb je code even ge-paste in een html bestandje en bij mij ziet het er goed uit!
(IE6.0 SP2)
items klappen open en worden rechts uitgelijnd.
items gaan dicht en komen strak tegen elkaar.

hm, misschien ligt het dan toch aan code die ik niet gepost heb. Zou je op -url removed- willen kijken of het nog steeds goed werkt? Het gaat om het menu in de linker (grijze) balk.

ps. ik heb ook XP SP2 en IE 6.0 maar op die url werkt het bij mij niet.

[ Voor 3% gewijzigd door Foutlook op 08-11-2004 09:22 ]

[Verwijderd]

Op je website staan er wel grote lege ruimtes als de items zijn ingeklapt!

Ik ondekte in ieder geval dit (vreemd genoeg werkt dit!!!):

Verwijder de linebreak en lege regels voor de <div> en voor elke <li>
en elke <ul>; dus plaats de <div> en de <li> en <ul> strak achter de voorgaande regel.
Plaats linebreaks in de tags ipv erbuiten, om het leesbaar te houden.

code:

<ul><li class='hoofdmenu'>Home</li><li
class='hoofdmenu'>item2</li><div
id='submenu1'><ul><li class='hoofdmenu'>Webdesign</li><li
class='hoofdmenu'>Fotografie</li></ul></div><li
class='hoofdmenu'>Contact</li></ul>

Sluit dus ook <li> af met </li>.

Normaal hebben spaties en linebreaks geen invloed!!! Met jouw CSS wel!!!
Succes. Ik moet weg...

[ Voor 118% gewijzigd door Verwijderd op 04-11-2004 18:35 ]