IE7: Strange behaviour with hover event of nested Tabs/IRRE-levels with relative positioned HTML elements
This issue is very strange. It happens only in Internet Explorer 7 (and also version 6) when there are some nested Tabs and IRRE-levels and the Drag'n'Drop sorting using script.aculo.us activated.
The minimal structure is:
[tab 1] -> [irre 1] -> [tab 2] -> [irre 2] -> [tab 3] -> [irre 3]
On moving the mouse over the second tab menu ("tab 3"), all IRRE-levels below disappear. It seems that the CSS style would have been set to "visibility: hidden".
See the attached screenshots to get an idea what I'm talking about.
1) 0006104_normal.png shows the normal situation
2) 0006104_strange_error.png show the situation when moving the mouse over the parent tab menu
IE7 Version: 7.0.5730.11
prototype Version: 1.5.0
script.aculo.us Version: 1.7.0
This problem doesn't exist when using Firefox 2!
(issue imported from #M6104)
#1 Updated by Oliver Hader over 12 years ago
I found out, that the prototype.js method "Element.makePositioned()" is responsible for that behavior. If I disable the calls from script.aculo.us to the mentioned method, everything is fine in IE7.
<b>see</b> the attached experimental patch 0006104_experimental.patch
Unfortunatelly I don't know why this function was integrated to Drag'n'Drop in script.aculo.us. The new beta release 1.7.1-beta3 doesn't have any changes and the problem would still exist.
#2 Updated by Oliver Hader over 12 years ago
I found some related articles about this behaviour:
#3 Updated by Oliver Hader over 12 years ago
I found out that this also occurs if script.aculo.us Sortable isn't used at all. It can be seen, when CSS hover effects or onmouseover/onmouseout events are used that change the CSS-class of an element AND when a (DIV-)element is defined with the style 'position: relative;'.