[CSS] Menu werkt niet

[kleautviool]

Ik ben bezig voor een site een menu te maken met css en het htc bestand van Clay om ook :hover in IE te laten werken, alleen werkt het in IE niet . Ik heb al vanalles geprobeerd, maar krijg het in IE niet aan de praat. Volgens mij zit de fout ergens in de manier waarop ik het htc bestand aanroep, want niks met :hover (behalve links) werkt in IE, maar ik gebruik het precies op dezelfde manier als op deze pagina waar ik ook een beetje aan het testen was. Kijk ik nu ergens overheen? want ik heb nu een redelijk tijdje zitten zoeken naar de fout, maar kan hem niet vinden.
In Firebird werkt het allemaal overigens perfect (maar dat is logisch ) perfect. Dit is mijn CSS voor het menu:

Cascading Stylesheet:

    div#leftMenu ul, li {
        list-style-type: none;
        margin: 0;
        padding: 0;
    }
    div#leftMenu ul {
        background: #fff;
        width: 175px;
    }
    div#leftMenu li {
        display: block;
        position: relative;
        border-bottom: solid 1px #ccc;
    }
    div#leftMenu li ul {
        border-left: solid 1px #ccc;
    }
    div#leftMenu li a {
        display: block;
        padding: 3px 0 3px 10px;
        background: #fff;
        color: #000;
        text-decoration: none;
        font-weight: bold;          
    }
    div#leftMenu li a:hover {
        background-color: #fff;
        color: #f00;
    }
    div#leftMenu li:hover ul {
        visibility: visible;
    }
    div#leftMenu ul ul {
        position: absolute;
        visibility: hidden;
        z-index: 100;
        left: 117px;
        top: 3px;
    }

Mijn menu zit op de volgende manier in elkaar (zijn lange regels in mijn html bestand dus dat zou de layout een beetje verneuken denk ik):

HTML:

<ul>
    <li>Kop
        <ul>
            <li>Subkop</li>
            <li>Subkop</li>
            <li>Subkop</li>
        </ul>
    </li>
    <li>Kop
        <ul>
            <li>Subkop</li>
            <li>Subkop</li>
            <li>Subkop</li>
        </ul>
    </li>
</ul>

Een voorbeeld van de html pagina staat hier en een voorbeeld van mijn stylesheet staat hier

[Rickets]

Ik vermoed dat de browser het .htc bestand niet als zodanig herkent.
Je moet de goede header meegeven. Met .htaccess kan dat zo:

code:

AddType text/x-component htc

[kleautviool]

Zal dat even in mijn htaccess zetten, maar dan vind ik het alsnog vreemd dat het op deze pagina wel gewoon werkt. Het is dezelfde host/server en alles. Maar zal ff mijn htaccess verranderen.

edit:
Deze oplossing werkt helaas ook niet

[ Voor 10% gewijzigd door kleautviool op 05-01-2004 21:12 ]

[Clay]

misschien dat de css het pad naar de htc niet kan vinden. /content en /home enzo worden misschien als directories gezien, waardoor de css op de verkeerde plek kijkt?

link eens naar de htc met "/boom/htc/csshover.htc" ipv met ../, of zet een alert() ergens in de htc zodat je kan zien of die ueberhaupt gevonden wordt.

[kleautviool]

Ik heb nu behavior: url("http://www.jaboom.nl/boom/htc/csshover.htc"); en dat werkt! bedankt!!
Alleen gaat het in IE weer niet helemaal goed, maar dat kijk ik nog ff na.

Bedankt iig beide!!

[Clay]

ah, dat is de z-index wat je doen kan is de z-index van de li's in dat menu b.v standaard op 10 zetten, en bij de li:hover de z-index 1 hoger. dan valt het submenu automatisch over de andere li's heen. Bij de discussie op A list Apart over dit soort menu's stonden daar ook hele verhandelingen over. schijnt het "telefoonboek effect" oid genoemd te worden (je moet wat)

[ Voor 5% gewijzigd door Clay op 05-01-2004 21:27 ]

[kleautviool]

Hmm... werkt niet helemaal goed. Heb nu mijn ul een z-index van 10 gegeven:

Cascading Stylesheet:

    div#leftMenu ul {
        background: #fff;
        width: 175px;
        z-index: 10;
    }

en dan de 2e ul een z-index van 11 gegeven

Cascading Stylesheet:

    div#leftMenu li:hover ul {
        visibility: visible;
        z-index: 11;
    }

, maar ik krijg nog steeds hetzelfde effect in IE. Maar op ALA staan dus discussie's hierover? Zal eens ff kijken of ik er wat bruikbaars kan vinden

[Clay]

de li zelf moet een hogere z-index krijgen. de ul gaat daarmee mee. dan moet het werken.

[kleautviool]

Hmm vaag. wat ik ook doe met die z-index hij blijft er maar onder vallen. Heb die hogere z-index volgens mij nu wel op zo'n beetje op alle manieren op de tweede li toegepast, maar ik krijg hem er niet boven

[kleautviool]

* Bescheiden Schopje *

[bredend]

Je zou eens kunnen proberen om de z-index dmv aparte classes toe te kennen. Wel redelijk 'vies' maar om te debuggen mag dat wel

_{ik ben toevallig ook net met zulke dingen bezig}

edit2: z-index verlagen werk toch niet, vandaar een wat nuttigere mededeling

[ Voor 174% gewijzigd door bredend op 06-01-2004 22:52 ]

[kleautviool]

wat niet?

zie de edit nu pas
Wel irritant, want het lijkt mij een niet zo moeilijk oplosbaar probleem, alleen kan het niet vinden

[ Voor 92% gewijzigd door kleautviool op 06-01-2004 22:49 ]

[bredend]

Ach, nu begrijp ik het probleem, de 1e ul is 'roll-over-gevoelig' als er een andere ul overheen hangt.

Klopt dat? Dan lijkt dat me eerder een 'feature' van IE Zie je ook vaak in brakke flashmovie's.

[kleautviool]

Sorry, maar dit begrijp ik niet helemaal dus weet ik ook niet of dat klopt

Wat bedoel je precies met 'roll-over-gevoelig'?

[Verwijderd]

Kijk hier eens:

http://www.xs4all.nl/~peterned/csshover.html

http://www.xs4all.nl/~peterned/examples/cssmenu.html

Je krijgt gelijk uitleg over voor- en nadelen.

[Clay]

Dit zou het toch moeten doen:

Cascading Stylesheet:

...

div#leftMenu li {
   display: block;
   position: relative;
   border-bottom: solid 1px #ccc;
   z-index:10;
}

div#leftMenu li:hover {
   z-index:11;
}

...

De submenu's van een LI schuiven zonder z-index onder de volgende LI, omdat die UL's in de z-index stack/tree/indeling van die LI zitten. De volgende LI van het hoofdmenu is later aangemaakt, en valt daar zonder verdere inmengen dus overheen. Of je dan binnen die LI de z-index van dingen aanpast boeit niet, omdat die elementen hoe dan ook nog afhankelijk zijn van de z-index van de parent.
Als je die LI's dan dus een zelfde z-index geeft, en diegene die je hovert 1 hoger (en dus niet dat wat er verder INzit, dat gaat vanzelf), dan moeten ook de submenu's over de volgende LI's heenvallen.

Het lijkt er dus op dat elke nesting van elementen zijn eigen z-index indeling krijgt. Iet met z-index 5 kan dus best over iets met z-index 10 heenvallen; als de z-indices van hun parents respectievelijk omgekeerd zijn wbt wie de hoogste heeft.

[kleautviool]

Juist, dat werkt. Danku!!
Zie ook nu waarmee ik fout zat, ik zat telkens met li a:hover en li:hover ul te klooien. Stom, maar iig bedankt voor de uitleg sowieso!