[IE6] Son of Suckerfish menu met plaatjes

[Verwijderd]

Ik kom er niet meer uit... Ik ben bezig met het implementeren van het "son of suckerfish" menu op een website.
Alles precies zoals het hoort, alleen gebruik ik plaatjes in het hoofdmenu i.p.v. tekst. In Firefox en Opera doet het menu precies wat het moet doen, alleen Internet Explorer toont het menu niet onder het plaatje maar ernaast.

Ik heb alle relevante code in een testdocument gepropt, deze is hier te vinden
Bekijk hem aar eens in IE en je ziet meteen wat ik bedoel.

Ik heb geprobeerd de plaatjes van het hoofdmenu een clear mee te geven, maar dat werkt niet. floaten helpt ook niet...

[ Voor 4% gewijzigd door Verwijderd op 14-11-2006 11:18 ]

[MBV]

Helpt het misschien om je plaatje absoluut te positioneren, zodat de rest er geen last van heeft?

Wel een interessant dingetje trouwens, was laatst ook al naar zoiets op zoek, en ik denk dat ik deze ga gebruiken. Dus ga maar snel die bug fixen

[Verwijderd]

wat mij betreft is absoluut positioneren van de plaatjes niet de oplossing. Ik heb dit getest alleen zonder resultaat... tevens kan je de UL dan wel weg laten om de plaatjes, die hebben dan ook geen nut meer.

Je zou zeggen dat er een logische "IE bug" verklaring voor zou moeten zijn, aangezien de pagina prima werkt in FF en Opera.

Anybody?

[MBV]

http://positioniseverything.net/

daar staan de meeste known bugs.

[Verwijderd]

Ik ben er achter dat het fout gaat bij de volgende CSS regel:

Cascading Stylesheet:

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { /* lists nested under hovered list items */
    left: auto;
} 

Zodra hier de left:auto; wordt vervangen door een absolute left en top waarde in pixels, dan komt het menu daar natuurlijk terecht (Ook in IE)
Echter is de flexibiliteit van dit menu dan helemaal weg, ik heb namelijk een menu met meerdere plaatjes als hoofdmenu, gevolgd door meerdere "uitklap" menu's.

wordt vervolgd...

[update]

Ik wordt helemaal gestoord! het lijkt te maken te hebben met position:absolute van de <ul>
in IE, maar ik kom geen steek verder

[ Voor 10% gewijzigd door Verwijderd op 15-11-2006 15:16 ]

[MBV]

kijk eens op die site naar de 'haslayout'-property. Kan je een hoogte instelllen? Dan heeft hij een layout, en gaat IE er ineens wat zinnigs mee doen.

IE zuigt, heel hard...

[Verwijderd]

Niemand?

Nou ik ben gaan zoeken naar een andere oplossing en wil die hier toch even plaatsen:

geheel nieuw, zonder javascript, met hacks voor IE6:

http://www.paxmedia.nl/tweakers/sos/sos2.htm

Met dank aan Stu Nicholls

Ik ben er zelf niet heel blij mee gezien de hacks in de code, dus mocht iemand nog een oplossing weten voor probleem 1 dan hoor ik het graag.

[MBV]

heb je mijn tip niet geprobeerd? Als hij het gaat doen zodra je een breedte opgeeft (wat er niks mee te maken heeft) zal het waarschijnlijk weer zo'n haslayout probleem zijn, en zal een fixed hoogte het probleem ook oplossen.
Ik kan het zelf nog niet testen, misschien als ik er op mijn werk aan denk.

edit:
damn, die andere is ranzig

[ Voor 6% gewijzigd door MBV op 15-11-2006 18:40 ]

[Bartolomew85]

Verwijderd schreef op woensdag 15 november 2006 @ 12:26:
Ik ben er achter dat het fout gaat bij de volgende CSS regel:

Cascading Stylesheet:

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { /* lists nested under hovered list items */
    left: auto;
} 

Voor zover ik weet ondersteund IE geen li:hover. IE6 ondersteunt :hover alleen op het a-element. Misschien kun je er iets mee?

[Verwijderd]

Bartolomew85 schreef op woensdag 15 november 2006 @ 18:53:
[...]

Voor zover ik weet ondersteund IE geen li:hover. IE6 ondersteunt :hover alleen op het a-element. Misschien kun je er iets mee?

Beter de code bekijken... er wordt een stuk javascript gebruikt (sfhover) voor de hover in IE6, en dat is het probleem ook niet. Probleem is dat de dropdown NAAST het plaatje verschijnt ipv er ONDER.

[MBV]

hij ziet op de een of andere manier het eerste menu al als een submenu, dat is namelijk precies dezelfde verschuiving. Ik zal daar thuis eens naar kijken, eens op websites uitzoeken hoe SoS werkt. Dat is iets te ingewikkeld om hier op mijn werk in betaalde tijd te doen

[MBV]

MBV schreef op vrijdag 17 november 2006 @ 17:50:
hij ziet op de een of andere manier het eerste menu al als een submenu, dat is namelijk precies dezelfde verschuiving. Ik zal daar thuis eens naar kijken, eens op websites uitzoeken hoe SoS werkt. Dat is iets te ingewikkeld om hier op mijn werk in betaalde tijd te doen

Ik ben hier inmiddels zelf mee bezig gegaan, en het blijkt dat Son of Suckerfish in IE alleen werkt wanneer je overal linkjes van maakt. Wanneer je platte tekst neergooit geeft hij het verschoven weer, net zoals bij een plaatje. Wanneer je hem in een <p> zet komt het onder het einde van de buitenste <ul>. Dat is niet echt intuitief als het over 2 regels loopt . Firefox laat zien waardoor het komt: als je een <p> neerzet, zet firefox hem op de 2e regel .
Oplossing voor mij is simpel: <a> tag zonder href doet het prima, en volgens mij kan je daar ook een plaatje in zetten Zolang het maar een <a> is, is het best

[crisp]

Dat is imo een ranzige workaround voor een technische limitatie van SoS. Maar SoS is sowieso niet zaligmakend: CSS is bedoelt voor opmaak, niet voor behavior...

[MBV]

Wat is dan een betere? Een dropdown-menu dat werkt op IE6, Firefox, wat niet je structuur verziekt en wat niet al teveel javascript code nodig heeft. SoS is wat dat betreft erg handig, toch?
En als jij graag je behaviour in JS wil doen ipv CSS, dan laat je toch gewoon ook in Firefox de Javascript uitvoeren?

[edit]
De nettere versie, om ook <p>, en <img> te kunnen gebruiken:

Cascading Stylesheet:

#nav a, #nav p, #nav img {
    display: block;
    width: 10em;
    margin: 0;
    padding: 0;
}

Dit ipv de #nav a sectie neerzetten, en je bent klaar .
Eventuele andere elementen kunnen toegevoegd worden . Platte tekst gaat dus zeer waarschijnlijk niet lukken, da's wel weer jammer.

Is dit minder ranzig, Crisp?

[ Voor 39% gewijzigd door MBV op 29-12-2006 14:26 ]

[crisp]

Het grootste nadeel van CSS-based behavior voor het in/uitklappen van menu's is toch wel dat je geen delay hebt, en dat nadeel heb je nog steeds als je de SoS-javascript ook gebruikt voor non-IE clients.

Maar verder: je elementen gewoon goed stylen is inderdaad minder ranzig dan een nutteloze A gebruiken

[MBV]

oh ja, delay: http://www.htmldog.com/ptg/archives/000050.php#comment470

Ik vind hem zonder delay al mooi genoeg, 'k moet een site "nabouwen" op een manier dat hij wel door google gevonden wordt, en in de oorspronkelijke site zat ook geen delay.

_{ook geen tekst: de enige tekst op de voorpagina zat in meta-tags, en ook de openingstijden zaten niet in een plaatje}

[ Voor 8% gewijzigd door MBV op 29-12-2006 16:03 . Reden: link weggehaald ]

[Verwijderd]

Goh! Was dit "projectje" al weer bijna vergeten. De oplossing werkt perfect... ik heb er voor gekozen om de #nav a een width van het kleinste plaatje mee te geven.

voor de luie tweaker hier nog een voorbeeld, inclusief de delay:

http://www.paxmedia.nl/tweakers/sos/sos3.htm

hij gaat na mijn vakantie hier geimplementeerd worden...