Hey all,
I've been fighting with IE5/6 because of its being SO slow for
displaying onmouseover effects and even pseudo classes such as :hover!
Here is a code example:
<div id="menu">
<a href="myurl1" class="leftmenu">my link label4</a>
<a href="myurl2" class="leftmenu">my link label2</a>
<a href="myurl3" class="leftmenu">my link label3</a>
<a href="myurl4" class="leftmenu">my link label4</a>
<a href="myurl5" class="leftmenu">my link label5</a>
</div>
With the corresponding css:
#menu a.leftmenu {
background:url(myimage.gif) top left;
width:126px;
height:29px;
overflow:hidden;
display:block;
text-decoration:none;
line-height:29px;
}
#menu a.leftmenu:hover{
background-position:0 -29px;
}
The sliding trick is widely used througout the web ... but the display
remain very slow on IE 5/6, especially when more than one a.leftmenu
and a.leftmenu:hover blocks are present in my page.
I have another problem:
Consider:
<div class="button" onmouseover="this.className='buttonover'"
onmouseout="this.className='button'">
<div class="L"/>
<a class="btnlink" href="myurl">my label</a>
<div class="R"/>
</div>
And the following css
..button .L, .buttonover .L {
background:url(myimage);
width:5px;
height:23px;
}
..button a.btnlink, .buttonover a.btnlink {
display:block;
background:url(myimage) repeat-x;
height:23px;
padding:0 3px 0 0;
color:#000;
text-decoration:none;
line-height:23px;
}
..button .R, .buttonover .R {
background:url(myimage);
width:21px;
height:23px;
margin-right:4px;
cursor:pointer;
}
..buttonover .L, .buttonover a.btnlink {
background-position:0 -23px;
}
How can IE display this so slowly when mozilla-based browsers are so
quick handling it? Is there any workaround? I'm afraid that 85% of
users use IE5/6 :)
Thanks for your answers!
