Re: IE/LIs with onmouseover/image reloading problem

Hey Seb,

I don't know how much of a pain it is to change your HTML, but you may
want to try using a SPAN or DIV inside the LI and changing the child's
class instead.  Sounds like an internal IE quirk.  I hope someone has
a fix, rather than my possible work-around.  

Actually, I typically solve this problem by using an A tag inside the
LI (be sure to set display:block on it so it takes up the entire LI's
content box).  You don't need to use javascript to switch the class on
an A tag since you can now use the :hover pseudo-class (as you no
doubt know from your examples) -- the only tag it works on with IE6 or
lower.  

The problem with this approach is that the background behind the
bullet does not change, though... not unless you move the bullet image
to the A tag .. but thn, why use LI's at all??  :-o

My 2 cents.  Hope it's worth even that much.  

-- John

http://e-numera.com/
http://ajax-web2.com/


--- In [email protected], "Seb Frost" <seb@...> wrote:
>
> I have a bunch of LIs with a background image on them.  When I mouse
over
> the LI it's class changes (using a small bit of JS).  The background
image
> gets reloaded each time, making it a very flickery effect....
> 
> 
> javascript
> ---------------
> function $(e){return document.getElementById(e);}
> 
> function init()
> {
> 	if ($('apps'))
> 	{
> 		var e = $('apps').getElementsByTagName('li');
> 
> 		var over=function(){this.className='hover';};
> 		var out=function(){this.className='';};
> 
> 		for(i=0,l=e.length; i<l; i++)
> 		{
> 			e[i].onmouseover=over;
> 			e[i].onmouseout=out;
> 		}
> 	}
> }
> 
> if (window.attachEvent)
> 	window.attachEvent('onload',init);
> else
> 	window.addEventListener('load',init,false);
> 
> 
> CSS
> -------------------------
> #apps{margin:-10px -10px 0 -10px;}
> #apps li{padding:6px 6px 0 50px;border-bottom:1px solid
> #d2d2d2;cursor:pointer;border-top:1px solid
> #fff;background-repeat:no-repeat;background-position: 8px 12px;}
> #apps li.hover{background-color:#dedede;}
> #apps li a{color:#666;}
> #apps li a:hover, #apps li a:active{background:transparent;color:#666;}
> #apps li#a_jt{background-image:url(/images/apps_jobtrack.gif);}
> #apps li#a_rec{background-image:url(/images/apps_reccrm.gif);}
> #apps li#a_crm{background-image:url(/images/apps_crm.gif);}
> #apps li#a_cp{background-image:url(/images/apps_creatorpro.gif);}
> #apps li#a_s{background-image:url(/images/apps_sms.gif);}
> #apps li#a_q{background-image:url(/images/apps_questions.gif);}
> 
> 
> HTML
> ------------------
> <ul id="apps">
> 	<li id="a_jt">
> 		<h4><a href="#" title="Job Board Software">Job Board Software</a></h4>
> 		<p>Award-winning job board software</p>
> 	</li>
> 	<li id="a_rec">
> 		<h4><a href="#" title="Recruitment Software">Recruitment CRM</a></h4>
> 		<p>Delivering an integrated system via the Internet</p>
> 	</li>
> 
> 
> 
> Any ideas?  cheers guys.  Might be related to the other email I sent
out a
> couple of minutes ago?
>






Unsubscribe
[email protected]

List info
http://www.quirksmode.org/dom/list.html 
Yahoo! Groups Links

<*> To visit your group on the web, go to:
    http://groups.yahoo.com/group/wdf-dom/

<*> To unsubscribe from this group, send an email to:
    [email protected]

<*> Your use of Yahoo! Groups is subject to:
    http://docs.yahoo.com/info/terms/