[CSS]Son of suckerfish & crossbrowser compatibiliteit

[gitaarwerk]

Ik ben beetje bezig geweest met een son of suckerfish menu uit php te laten halen, nu dat eindelijk gelukt om het netjes met 1 query en array functie te doen, was ben ik bezig geweest met de ul/li items terug te laten parsen als een dropdown/rollover menu in CSS. Het zogenaamde "Son of suckerfish". (had er zelf tot voor kort nog nooit van gehoort, maar ken uiteraard het principe).

Ik gebruikte eerst het zogenaamde FaciMenu (als iemand dat kent) maar het nadeel is hiervan dat het hacks gebruikt en niet altijd even lekker werkt.

Nu kwam ik dus wat topics hiertegen die over de pure css manier werkt en een klein javascriptje voor de internet explorer kant.

Nu ik dit werkend heb en css ben aan het aanpassen brengt me dit een heel eind.

Echter heb ik een paar probleempjes met de positionering van de submenuus.

Noem me een mierenneuker, maar bij internet explorer zit bij het 2 niveau van het menu 1 pixel verschil "naar boven" in (Menu 1 > testlink ).

Ik weet dat internet en mozilla firefox iets anders met een marge omgaan, en ik ben er bijna zeker van dat daar het probleem ligt. Gek genoeg, kom ik er maar niet uit welk stuk het zit

adres: http://www.webventive.nl/

stylesheet: http://www.webventive.nl/menu/menu.css

css code:

code:

#nav { /* LEVEL 0 menulist*/
    list-style: none;
    width: 500px; 
    padding: 3px;
    
}


#nav ul { /* rest levels */
    list-style: none;
    width: 500px; 
    background-color:#FFFFFF;
    border: 1px #000000 solid;
    padding: 3px;
    

    /*
    -moz-opacity:0.90;
    opacity: 0.90; 
     filter:alpha(opacity=92); */
}

#nav a {
    display: block;
    width: 160px;
}

#nav li {

    float: left;
    height: 20px;
    padding-left: 2px; 
}

#nav li ul {
    position: absolute;
    width: 160px;
    left: -999em;
        margin-top: 4px; 
    
}

#nav li:hover ul {
    left: auto;
    padding: 2px;
    
}

#nav li:hover ul, #nav li.sfhover ul {
    left: auto;
}

#nav li ul ul {
    margin: -18px 0 0 160px;
    padding: 2px; 
}

#nav li ul ul ul {
    margin: -19px 0 0 160px;
}

#nav, #nav ul {
    padding: 0;
    margin: 0;
    list-style: none; 
    line-height: 130%;
}

zoals je ziet, heb ik de opacity waarden ook weggehaalt. Op een of andere manier blokkeert internet explorer hierop.

[PeterSelie]

Niet alleen daar zit verschil, in het hele menu worden verschillen zichtbaar als je de IE en FF versies over elkaar heen legt (ik heb gezorgt dat het woord 'menu1' zich allebij op dezelfde plek bevinden, daarbij is IE rood, en FF groen).

[gitaarwerk]

lijkt wel of bij "test_sub_sub" groter is in internet explorer en een omhoog schuift.

toch wel weer irritant dat die browsers het weer ieder anders intepreteren zal er nog eens even naar kjken (kan zijn dus dat het beeld op de site even veranderd in dat opzicht)

[ Voor 24% gewijzigd door gitaarwerk op 30-12-2006 16:16 ]

[Woudloper]

Vind crisp zijn oplossing een stuk lekkerder werken. Daarbij zit daar een vertraging in het menu en dat werkt voor de eindgebruikers wel lekker.

[gitaarwerk]

ziet er goed uit, helaas merk ik niets van de vertraging, misschien omdat het nauwelijks opvalt. tis wel inderdaad 'lekker'.

Ben er nog niet uit, teveel aan het pielen nog. Aside, ik ga niet crisp zijn code jatten, en wil het graag zo min mogelijk javascript gebruiken voor maximale compitabilitieit ipv die maken met javascript


edit:
Ik heb een andere suckerfish css template gevonden die ik redelijk heb verbouwd al en ook goed kan aanpassen. Hier kan ik op een of andere manier veel beter mee omgaan.

denk dat bij hierbij mijn problemen wel zijn opgelost

[ Voor 57% gewijzigd door gitaarwerk op 31-12-2006 13:28 ]