IE7: Hover-Effekt verschiebt Button immer tiefer

[Mastershrimp]

Heyho!

Ich beschäftige mich gerade mit einem sehr merkwürdigen Phänomen. Schaut am besten zuerst einmal selbst:
http://www.mastershrimp.com/test/IEbutton/index.html (bitte mit dem IE7 öffnen)

Die Eingabefelder haben per CSS eine "Hover-Eigenschaft" bekommen, wodurch sich der Rahmen dunkelgrau färbt, wenn man ihn mit der Maus überfährt. Soweit so gut.

Nun klickt bitte auf "Neue Publikation" - es wird jetzt ein weiteres <li> mit weiteren 3 Eingabefeldern angefügt. Die dazugehörige JS-Methode findet ihr ebenfalls in der Datei (ist im Prinzip nur eine appendChild-Orgie ;-) ). Auch das klappt.

Doch fahrt nun bitte mit der Maus wieder über die Felder. Der Button wandert immer weiter nach unten!!

Dass das Problem nur im IE auftritt, brauche ich denk ich nicht zu erwähnen.  Die Textareas werden übrigens später noch durch TinyMCE-Instanzen (WYSIWYG-Editor) ersetzt. Wenn ich dann dort über die Icons von TinyMCE fahre (wieder mit hover-Effekt), verschiebt sich der Button ebenfalls.

Die zentralen Fragen, auf die ich nach mehrstündigem rumdoktorn immer noch keien Antwort habe:

• Warum tritt das Problem erst auf, nachdem ich per JS den Code eingehängt habe?
• Warum verschiebt sich nur der Button? Dessen <li> bleibt laut IEDeveloperToolbar an der richtigen Stelle

Das verrückteste ist übrigens: Wenn ich die addPublication()-Methode dahingehend anpasse, dass sie nur den anfangs vorhandenen <li>-Knoten klont und darunter einhängt, tritt das Problem nicht auf! Leider müssen die Felder alle unterschiedliche IDs haben, sodass diese Lösung wegfällt

Hab schon gegooglet, hier gesucht, in anderen Foren gesucht - irgendwie komme ich nicht weiter :/

Kennt einer von euch das Problem?

Grüße

Mastershrimp