Problem mit dem IE

Hallo zusammen, meine erste technische Frage hier im Forum. ich hoffe ich stell mich nicht all zu blöd mit meiner frage an, bin schließlich nur Grafiker :-)

in unserem Spiel an dem ich mit meinem Kumpel (er ist der Coder) arbeite, taucht zur Zeit ein kleines aber nerviges (für die Augen) Problem im IE auf. es geht um unser pulldown-menü:

wenn ich mit der maus über die buttons am oberen rand des browsers (siehe Bild) fahre um so das untermenü zu öffnen, dann flackert es im IE. wir vermuten das es am div liegt, welches einen menü tab mit link inhalt umgibt, und zwei javascript funktionen hat: onmouseenter und onmouseout. zum ein und ausblenden... nur im ie8 werden die funktionen wohl öfter ausgelöst, obwohl man sich die ganze zeit im div befindet.

hier ein screen aus dem funktionierenden FF: damit ihr es auch bildlich vor euch habt. rechts zeigt es euch das "ausgefahrene" menü, welches probleme macht, wenn man mit der maus über die submenüs fährt (im IE).

http://www.seppel-art.de/browser/wiki_screen01.jpg

hat jemand eine idee wie sich das problem lösen lässt? falls sich keine lösung fidnet werden wir das menü per "klick" öfnnen lassen müssen, was ich aber nicht ganz so elegant finde. die andere variante wäre besser, sofern sich eine lösung findet.

falls die infos nicht ausreichen um das Problem zu lösen, sagt bescheid ich werde sie dann nachtragen, sofern ichs beantworten kann.

gruß und danke für eure Hilfe

Sebastian

Das kommt wohl daher, dass der IE das Hintergrundbild beim "Hovern" zig mal neu lädt
(hatte das Problem auch mal).
Die einzigste Möglichkeit die ich kenne dies zu unterbinden funktioniert per JS:

JavaScript:

document.execCommand("BackgroundImageCache", false, true);

Hoffe ich konnte dir/deinem Freund helfen !

hi TopGunner

danke für deine schnelle Antwort. Das ist leider nicht die Lösung, da wir kein Image Hintergrund dafür verwenden :-) ich vermute das flackern kommt daher, dass das menü immer auf und zu klappt,

weil das mouseover mouseout event ausgelöst wird, wenn man die maus über die grenze von zwei der inneren divs bewegt.

aber eine Lösung für dieses Prob haben wir bisher noch nicht gefunden im IE :-( im FF klappts dagegen wudnerbar (wie so oft)

gruß

Sebastian

Hm, was machen andere Browser wie Opera oder Safari damit?

Da du von mouseover und mouseout sprichst gehe ich mal davon aus dass das Aufklappen nur mit Javascript funktioniert!?

Ohne jetzt eine Lösung für das Problem zu kennen: Ich favorisiere bei aufklappenden Menüs ganz auf Javascript zu verzichten und reines CSS zu nutzen. Finde ich simpler, eleganter und fehlerresistenter (auch wenn man (noch) auf schicke Animationen verzichten muss).

ja css ist natürlich eine saubere geschichte.

es geht ja im prinzip im IE (zumindestens das aufklappen) das problem dabei ist, dass flackern beim navigieren druch die menüpunkte. (vermutlich aufgrund des oben beschrieben mouseover problems)

wenn wir keine lösung dafür finden werden wir es mal mit einem klick event versuchen, sprich das menü wird erst aufgeklappt, wenn man den entsprechenden button einmal mit der maus angewählt hat. wäre auch kein beinbruch. die andere möglichkeit wäre aber definitiv "schicker". -> imho

(ich weiß ich wiederhol mich :-))

Murmeli (mit ihm entwickel ich das game, in unserer Freizeit), sofern er fürs entwicklerforum freigeschaltet wird, kann dann evtl nochmal selbst was dazu schreiben.

Original von Spiriter1982

ich vermute das flackern kommt daher, dass das menü immer auf und zu klappt,

weil das mouseover mouseout event ausgelöst wird, wenn man die maus über die grenze von zwei der inneren divs bewegt.

 Dann debugged das doch einfach mal (ja auch für den IE gibts JS-Debugger^^).

Wenns das wirklich ist, könnte man das relativ einfach fixen:

JavaScript:

bool isMenuOpen = false;

onmouseenter

if(isMenuOpen)

return;

else

isMenuOpen = true;

onmouseout 

isMenuOpen = false;

Original von altertoby

if(isMenuOpen)

return;

else

isMenuOpen = true;

Oder einfach isMenuOpen = true; ?

Wir hatten mal ein ähnliches Problem. Ein Kollege hat es dann gefixt, darum weiss ich leider grad keine Einzelheiten. Es lag aber irgendwie am Event Model von IE, so dass auch andere Objekte die Events bekommen haben oder so. Google mal nach "Internet Explorer Event Bubbling", vielleicht bringt Dich das weiter.

Ernsthaft: Warum nicht ein fertiges Framework wie das durchaus kleine jQuery? $('MeinMenuItem').mouseenter(function(){$(this).slideDown();}); - feddich.

Das flackern kann auch (falls ihr mit o.g. Lösungen nicht weiterkommt) daran liegen, dass jeweils immer auf- und zugemacht wird. Ein Anzeichen, das irgendwelche Paddings/Margings oder sogar Größenangaben nicht stimmen, verursacht durch irgendwelche pseudo-standardisierten Einstellungen der entsprechenden IE-Version.

ich werd das mal so weiter reichen, danke für eure Hilfe! ich meld mich nochmal, wenns geklappt hat.

Soo, jetzt kann ich mich mal selber dazu äußern ;)

Das Problem hängt wohl offensichtlich mit dem

Konstrukt zusammen. dieses befindet sich innerhalb des Divs, welches die mouseover/out Funktion enthält. Das führt im IE dazu, dass die Listenelemente diese Funktionen für das Eltern-div auslösen. Unzwar nicht wenn das Div betreten oder verlassen wird, sondern wenn die Listenelemente betreten oder verlassen werden. Daraus resultiert dann das Flackern :\

Ich werd mal probieren ob es ohne die Listenelemente funktioniert.

hm, stattdessen würde ich versuchen ob es ohne das div geht...

Das Menü sollte IMHO so aufgebaut sein:

HTML:

• Item 1
  
  
  
  • Submenu Item 1
  
  
  • Submenu Item 2
  
  
  • Submenu Item 3
  
  
  
  


• 
  Item 2

<
/ul> 

So ähnlich ist es ja gemacht, und genau das verursacht das Problem ;)

Event Bubbling beschreibt genau diesen Vorgang. Die Events werden nach Abarbeitung an gleiche Eventhandler der Parentobjekte weitergegeben. Da Du Deinen Code nicht posten willst, kann ich nur spekulieren. Aber bevor Du irgendwelche exotischen Lösungsansätze ausprobierst, solltest Du Dich erstmal damit vertraut machen, um ein Problem mit dem Event Model auszuschliessen:

http://www.quirksmode.org/js/events_order.html

Ich hab eigentlich kein Problem damit den Code zu Posten ;) Hier das HTML-Fragment für ein Menü:

und hier die beiden JS-Funktionen: function expandMenu(name) { $('#' + name + ' > div.item').removeClass('hidden'); $('#' + name + ' > div.tab').addClass('selected'); } function collapseMenu(name) { $('#' + name + ' > div.item').addClass('hidden'); $('#' + name + ' > div.tab').removeClass('selected'); } Das Eventmodell ist mir durchaus bekannt. Aber das ist hier ja auch nicht wirklich von Relevanz, da nur ein Element Eventhandler definiert hat. Aber im IE fängt das li-Element das Event des Parent-Divs ab und bearbeitet es.

Hm, so sollte das nicht aussehen... die Editieren sowie Antworten-Buttons im Forum scheinen auch nicht wirklich zu funktionieren