[xHTML] Hoogte div verandert na javascript actie

[Verwijderd]

Momenteel ben ik een website aan het ontwikkelen die tot twee lagen diep pagina's heeft. Om niet een ontzettend lange lijst in het menu weer te geven heb ik met CSS en Javascript een functie gemaakt die de submenu's weergeeft wanneer op de parent geklikt wordt.

Deze constructie leverde twee problemen op, waarvan ik er inmiddels één (wel met een workaround) opgelost heb. Het eerste probleem was dat wanneer ik de achtergrondkleur op een a:hover event liet veranderen de hoogte van de pagina ineens met ongeveer 200 pixels toenam. Door deze eigenschap uit het stylesheet te halen en een onmouseover/out (this.style.background) aan de link toe te voegen heb ik dit opgelost.

Nu dit probleem was opgelost stuitte ik op het volgende probleem: zodra ik de javascriptfunctie uitvoer die het submenu laat uitklappen wordt ook de pagina met ongeveer 200 pixels hoger. Ik heb geprobeerd om dit te corrigeren met Javascript en door verschillende waardes aan het stylesheet toe te voegen, maar niets lijkt te helpen.

Opvallend is wel dat alleen Internet Explorer 6 last lijkt te hebben van dit probleem, andere browsers renderen de pagina gewoon zoals het hoort.

De Javascript functie die het submenu togglet is:

JavaScript:

var lastOpen;
var lastParent;

function toggleSubmenu(id, parent) {

    var submenu = 'submenu' + id;

    if (lastOpen != null && lastOpen != id) {

        if (lastOpen != parent) {

            document.getElementById('submenu' + lastOpen).style.display = 'none';

        }

        document.getElementById(submenu).style.display  = 'block';
        lastOpen = id;

    } else if (lastOpen != null && lastOpen == id) {
    
        document.getElementById(submenu).style.display = 'none';
        lastOpen = null;

    } else {

        document.getElementById(submenu).style.display = 'block';
        lastOpen = id;

    }

    lastParent = parent;
    
}

De pagina waar het probleem te bekijken is http://particulieren.vanhelvoirt.nu/content/136/aanpak.html. Klik hier bijvoorbeeld op het item 'Diensten' en je zult zien dat de paginahoogte verandert. De div's 'nav' (het menu) en 'content' (de inhoud dus) behouden hun normale lengte, de wrap van deze twee met het id 'main' is de div die ineens langer wordt.

Waar zou dit aan kunnen liggen en hoe is het te verhelpen?

Edit:

Op zeer hoge resoluties is dit probleem niet waar te nemen, omdat die 200 pixels extra dan geen verschil maken tussen scrollbars of niet. Het probleem valt daarom dus vooral op bij resoluties als 1024 x 768 en 1280 x 1024.

[ Voor 4% gewijzigd door Verwijderd op 13-12-2006 17:24 ]

[crisp]

Je gebruikt ook wel alle mogelijke CSS-hacks die er zijn voor IE, dat maakt het er niet overzichtelijker op. Ik zou die in een aparte stylesheet zetten en die dmv conditional comments inladen, dat maakt het al een stuk overzichtelijker. Maar een simpelere testcase ontdaan van alles wat er niets mee te maken heeft maakt het een stuk eenvoudiger te debuggen, dus mijn advies is ook: uitkleden totdat het probleem zich niet meer voordoet en dan weet je in ieder geval waar je het moet zoeken

[ Voor 5% gewijzigd door crisp op 13-12-2006 17:43 ]

[Verwijderd]

Ik heb inderdaad een aantal keer de CSS hacks voor IE6 en IE7 toegepast, als alles werkt zal ik deze omzetten naar conditional stylesheets. Zoals ik al aangaf had ik alles al uitgekleed met het a:hover probleem, op deze manier kwam ik er dan ook achter dat het lag aan het veranderen van de achtergrondkleur.

Ook na dit probleem heb ik de stylesheets uitgekleed, echter vond ik toen geen oorzaak van het probleem. Daarom hoop ik middels dit topic wat wijzer te worden, misschien heeft iemand ervaring met een soortgelijk probleem.