Hi all,
I have a slight display speed problem under IE5/6 when putting an
onmouseover/out effect in a <div> tag inserted inside a relatively
positioned parent block. Mozilla and Safari handle this finely,
though.
[The parent block is relatively positioned because an asbolutely
positioned submenu is to appear on a certain event.]
Here's an example:
..parent{position:relative;}
..mydiv .divL{background:url(image.gif);width:15px;height: 40px;}
..mydiv a.divC{display:block;background:url(image.gif)
repeat-x;height:40px;}
..mydiv .divR{background:url(image.gif);width:15px;height: 40px;}
..mydivover .divL{background:url(anotherimage.gif);}
..mydivover a.divC{display:block;background:url(anotherimage.g if);}
..mydivover .divR{background:url(anotherimage.gif);}
<div class="parent">
<div class="mydiv" onmouseover="this.className='mydivover'"
onmouseout="this.className='mydiv'">
<div class="divL">
<a href="#" class="divC">...</a>
<div class="divR">
</div>
</div>
I was wondering whether such slowness was coming from the use of
"this.className", as it implies heavy DOM crawling ... but how come
mozilla is so much faster?
It could also come from the fact that several parent blocks are
displayed. Is it because I do NOT declare anything for the 'mydiv'
class (which is really only use as a containing block)?
On strange thing is that the 'mydiv' elements display just as fast as
in mozilla if they are outside the relatively positioned parent
block...
Thanks for the help.