[html/css] hover (dropdown) menu in IE6

[Saven]

Helaas moet ik IE6 voor een projectje nog redelijkerwijs supporten; de belangrijkste dingen althans. En de navigatie is toch wel het belangrijkste

Het probleem is dat mijn hoofdcategorieën in IE6 niet netjes naast elkaar komen te staan zoals in elke andere browser wel het geval zou zijn. De hoofdcategorieën nemen 100% in de breedte aan in IE6 waardoor deze niet naast elkaar, maar onder elkaar komen te staan.

Heb voor jullie even een jsdfiddle online geknald zodat jullie zelf kunnen kijken:
http://jsfiddle.net/msF33/3/

Helaas valt die link niet te testen omdat IE6 die site niet goed weergeeft. Daarvoor kun je in een IE6 browser (of bijv een IE6 venster in IETester.exe) de volgende (directe) link bezoeken:
http://fiddle.jshell.net/msF33/3/show/

Heb al zitten denken aan een oplossing als fixed width voor de hoofdcategorieën voor IE6, maar lijkt me dat dit eleganter kan, ik kom er alleen niet meer uit hoe. Heb ook al geprobeerd om de hoofdcategorieën display inline-block te geven. Dat werkt half, want de subcategorieën komen er nu niet meer precies onder, maar schuin er onder.

[Saven]

schopje

[MrBrown]

inline-block wordt niet ondersteund in IE6, voor zover ik weet.

Verder denk ik dat je nog geen antwoord had omdat eigenlijk iedereen IE6 wel verlaten heeft (inclusief MS), niemand dus ook meer ietester en dat soort tools gebruikt. Eigenlijk zou je IE6 support gewoon moeten droppen... Waarom zou je dat nog ondersteunen?

Als je toch moet ondersteunen: is het niet mogelijk om, heel lelijk, een niet-dynamisch menu te nemen, maar gewoon een platte ul te tonen? Geen uitklappers dus? Dan kan je functioneel alles gewoon bereiken. Dat het er niet uitziet is het probleem van de gebruiker die niet wil upgraden.

[TheNephilim]

Tjah, ik zou IE6 ook niet ondersteunen hoor. Misschien kun je met JS nog wat fixen, maar verder is er geen redden aan lijkt me.

[Verwijderd]

Ik kan best begrijpen dat je IE6 moet ondersteunen voor een klant. Je zal je verbazen over hoeveel mensen dat nou nog gebruiken.. (Komt ervan als je mensen een optie geeft om Updaten uit te zetten..)

Check het volgende :
Heeft de Menu container een relative position ? Dit zorgt namelijk voor problemen in IE6

[MrBrown]

Verwijderd schreef op woensdag 03 april 2013 @ 17:23:
Ik kan best begrijpen dat je IE6 moet ondersteunen voor een klant.

Ik niet. MS smeekt je haast om IE6 te verlaten, Google ondersteund niet meer (IE7 en IE8 trouwens ook niet) met hun producten.

Door IE6 support te blijven leveren schep je verkeerde verwachtingen bij je klant, en sta je de vooruitgang van een toegankelijk web gewoon in de weg. Gewoon niet meer doen. Ik heb grote klanten binnen mijn bedrijf, maar geen van allen eisen meer IE6, die zien echt wel in dat dat nergens naartoe gaat.

Dumpen die zooi, mond durven opentrekken, is beter voor jou, internet in het algemeen, en ook voor de klant. Ik bedoel: al die moeite voor IE6 moet je in rekening brengen toch, neem ik aan?

[Verwijderd]

Ben het helemaal met je eens dat IE6 het toegankelijke web in de weg staat.
IE7 en zeker IE8 is prima mee te werken, daar hoef je alleen de trucjes voor te weten en wat workarounds in te voeren. Wordt er alleen wel gek van dat IE7 en IE8 geen goede Media Queries support hebben.

Wel vind ik het echt een beetje te gek voor worden dat Google geen IE8 meer support.. IE9 is net uit !

[MrBrown]

IE10 is net uit. IE9 is al twee jaar oud. Google heeft de policy 2 versies van IE te ondersteunen. Natuurlijk Commercieel handig, want als een thuisgebruiker toch moet upgraden, waarom dan niet naar Chrome , maar ook gewoon puur praktisch. Ze zetten daar echt de kosten wel tegenover de baten, en als het ontwikkelen van een app voor een oudere IE gewoon te duur wordt in vergelijking met de opbrengsten uit advertenties die het opbrengt, ja, dan gewoon stoppen met de ondersteuning...

[Verwijderd]

Cascading Stylesheet:

<style>
    li {
    width: 200px;
    min-height: 250px;
    border: 1px solid #000;
    display: -moz-inline-stack; // Firefox 2
    display: inline-block;
    vertical-align: top;
    margin: 5px;
    zoom: 1; // IE hack to trigger hasLayout
    *display: inline; // IE hack to achieve inline-block behavior
    }
    </style>

Een leuke hack die je kan proberen (Het geeft zelfs support voor Firefox 2 )
http://blog.mozilla.org/w...oss-browser-inline-block/

[TheNephilim]

Verwijderd schreef op woensdag 03 april 2013 @ 17:42:
Ben het helemaal met je eens dat IE6 het toegankelijke web in de weg staat.
IE7 en zeker IE8 is prima mee te werken, daar hoef je alleen de trucjes voor te weten en wat workarounds in te voeren. Wordt er alleen wel gek van dat IE7 en IE8 geen goede Media Queries support hebben.

Wel vind ik het echt een beetje te gek voor worden dat Google geen IE8 meer support.. IE9 is net uit !

Bedrijven als Google hebben zo'n grote hoeveelheid websites/webapps/etc. dat er geen beginnen aan is om al die oude versies van IE te ondersteunen. IE9 en hoger is prima, IE10 is inmiddels uit en zal bij de meeste Windows 7 (en hoger) gebruiker geïnstalleerd kunnen worden.

[geert1]

Welke doelgroep spreek je aan dat IE6 nog een noemenswaardig deel van de gebruikers is? Heb je niet wat statistieken waarmee je de klant kan overtuigen dat het onverstandig is om je hele code te verpesten voor 1-2% van de gebruikers?

Als je dan echt IE6 erbij wilt betrekken: De kern van je probleem zit erin dat de a-elementen binnen de li's voorzien zijn van "display: block". IE6 trekt dat niet en maakt deze blok-elementen zo breed mogelijk. Voorzie de a-elementen dus van float: left en haal de regel "display: block" weg. Dat kan misschien weer andere problemen veroorzaken die je dan ook moet uitzoeken, en is sowieso niet logisch of netjes, maar het is uiteindelijk wel de oplossing voor je (niet bestaande) "probleem" in IE6.

[ Voor 6% gewijzigd door geert1 op 04-04-2013 18:02 ]

[Saven]

Bedankt voor de tips en suggesties Ik neem ze allemaal mee en ga even e.e.a. proberen