jQuery of CSS werkt niet correct

[Hiroj]

Voor een klant ben ik bezig met een bestaande website wat moderne elementen te geven.
Hiervoor gebruik ik jQuery en CSS.

Alles gaat op zich goed, tot ik in andere browsers ga testen dan Firefox.

Het probleem doet zich voor in het menu op deze website.
Wanneer ik in Internet Explorer over het menu-item "Home" ga, klapt het menu zich goed uit. Wanneer ik dit doe bij het menu-item "Bestuur" zie ik heel kort een groene streep (wat het achtergrond is) en daarna verdwijnt hij weer direct. Het probleem doet zich alleen voort in Safari en Chrome.

Ik heb hetzelfde javascript (zie hieronder) gebruikt in een ander project. In dit project werkt het wel correct in alle "mainstream" browsers.

JavaScript:

$(document).ready( function() {

    $('ul.menu li').hover( function() {
    
        $('ul', this).slideDown();
    }, function() {
    
        $('ul', this).slideUp();
    });
    
});

En het CSS heb ik overgenomen en bewerkt naar de wensen van het project. En nog blijft het probleem zichtbaar.

Cascading Stylesheet:

/*######## NAVIGATION ########*/
ul.menu, ul.menu li ul, ul.menu ul li ul, ul.menu ul ul li ul, ul.layer_two, ul.layer_three { list-style: none; }

ul.layer_three li a { display: block; padding: 5px; font-size: 12px; color: #dbdba8; text-decoration: none; border: 2px solid #dbdba8; width: 145px; margin-bottom: 2px; }
ul.layer_three li a:hover { font-size: 12px; color: #C00000; border: 2px solid #C00000; text-decoration: none; }

    /*######## EERSTE LAAG ########*/
    ul.menu { float: left; width: 898px; position: relative; }
    ul.menu li { float: left; padding: 0 10px; background: url('images/menuborder.png') no-repeat left center; }
    ul.menu li:first-child { background: none; }
    ul.menu li a { display: block; text-decoration: none; color: #005700; font-weight: bold; font-size: 13px; height: 40px; line-height: 35px; }
    ul.menu li a:hover { background: #dbdba8; color: #c00000; }

        /*######## TWEEDE LAAG ########*/
        ul.menu li ul { float: left; width: 248px; position: absolute; display: none; z-index: 1; background: #7e932a; padding: 0; }
        ul.menu li ul li { float: left; padding: 0 10px; background: none; }
        ul.menu ul li a { display: block; width: 228px; text-decoration: none; color: #005700; height: auto; font-weight: bold; font-size: 13px; line-height: normal; margin: 10px 0; }
        ul.menu ul li a:hover { background: none; }

Hopelijk kunnen jullie mij helpen bij dit probleem.

[Verwijderd]

De javascript is goed, en aan je CSS lijkt ook niets mis.

Het probleem zit in de HTML; er zijn geen submenu items beschikbaar onder "bestuur".
En omdat de lege li een display:none heeft, zal deze ook nooit getoond worden.

Waarom het alleen fout gaat met webkit weet ik niet, maar mij lijkt het erger dat het wel werkt in andere browsers...

[Flowmo]

En als je dan toch aan het "moderniseren" bent, valideer je HTML dan ook gelijk. Kan een hoop problemen oplossen.

Edit:
Item "Bestuur" bevat geen onderliggende items. Daarom klapt er niks open.

En dan dit:

Cascading Stylesheet:

ul.menu li ul {
float: left;
position: absolute;
padding: 0;
* knip *
}

float:left en position:absolute samen heeft geen zin. Het is of floaten, of absoluut positioneren.

En dan padding:0, die kan je in een algemene reset aan het begin van je stylesheet al opgeven.

[ Voor 77% gewijzigd door Flowmo op 21-02-2011 15:33 ]

[NMe]

Verwijderd schreef op maandag 21 februari 2011 @ 14:25:
Waarom het alleen fout gaat met webkit weet ik niet, maar mij lijkt het erger dat het wel werkt in andere browsers...

Het gaat hier ook in FF3.6 mis, dus Webkit is niet het enige slachtoffer.

[Hiroj]

Flowmo schreef op maandag 21 februari 2011 @ 15:23:
En als je dan toch aan het "moderniseren" bent, valideer je HTML dan ook gelijk. Kan een hoop problemen oplossen.

Edit:
Item "Bestuur" bevat geen onderliggende items. Daarom klapt er niks open.

En dan dit:

Cascading Stylesheet:

ul.menu li ul {
float: left;
position: absolute;
padding: 0;
* knip *
}

float:left en position:absolute samen heeft geen zin. Het is of floaten, of absoluut positioneren.

En dan padding:0, die kan je in een algemene reset aan het begin van je stylesheet al opgeven.

Bedankt voor de tip over float en position. Omdat mijn collega een nieuw ontwerp moet aanleveren werk ik in de oude template. Ik ga daarom dus ook geen extra tijd besteden in het valideren van HTML tot het nieuwe ontwerp wordt aangeleverd.

Het is mij na jullie reacties opgevallen dat de onderliggende <ul> van "Bestuur" geen items bevat in Safari en Chrome. Firefox en IE bevat raar genoeg wel onderliggende onderdelen in een <ul>..
Je zou dus zeggen dat het een systematische fout is, maar ik weet niet of dit nou aan WordPress (het systeem erachter) ligt of aan de gebruikte thema. Er wordt naast de javascript verder niets gedaan met het menu.

[Keeper]

Kan het niet komen doordat je in die browsers wel bent ingelogd en die items die onder Bestuur staan alleen worden getoond aan ingelogde gebruikers?

[rhodium]

Ik weet niet hoe je het test, maar ik krijg het met elke browser incl IE7 en IE8. Denk dat het komt door de border die niet lekker meegaat met de animatie.

Met debuggen en gewoon simpel dingen aan en uitzetten had je dit ook kunnen vinden.

[Hiroj]

Keeper schreef op maandag 21 februari 2011 @ 16:13:
Kan het niet komen doordat je in die browsers wel bent ingelogd en die items die onder Bestuur staan alleen worden getoond aan ingelogde gebruikers?

Nadat je dit had geplaatst heb ik gecontroleerd welke gebruikers met welke rechten in het systeem waren.
Het bleek dus dat de klant een account had gekregen, waarvan ik niet op de hoogte was gesteld.

De klant heeft gretig gebruik gemaakt van de materialen die klaar waren voor gebruik. Namelijk het blokkeren van pagina's voor niet geregistreerde gebruikers.

Deze topic kan mij betreft op slot en ik wil iedereen bedanken voor het meedenken!

[Keeper]

Hiroj schreef op maandag 21 februari 2011 @ 18:49:
Nadat je dit had geplaatst heb ik gecontroleerd welke gebruikers met welke rechten in het systeem waren.
Het bleek dus dat de klant een account had gekregen, waarvan ik niet op de hoogte was gesteld.

Had het toevallig ook laatst, dus vandaar dat ik er aan dacht. Volgende keer iets om ook te controleren voor je de schuld legt bij jQuery en/of CSS .