24 bit PNG :hover not adjusting background position IE6 on anchor

Question

I am using the belated PNG fix for IE6:

http://www.dillerdesign.com/experiment/DD_belatedPNG/

Like so:

<!--[if lt IE 7]>
    <script type="text/JavaScript" src="/Scripts/DD_belatedPNG_0.0.8a-min.js" defer="defer"></script>
    <script type="text/JavaScript" src="/Scripts/DD_PNG_listing.js" defer="defer"></script>
<![endif]--> 

I have a list of tabs with HTML:

        <ul class="tabs">
            <li class="comparison"><a href="/"><span>Comparisons</span></a></li>
            <li class="scenario"><a href="/"><span>Scenarios</span></a></li>
            <li class="analysis"><a href="/"><span>Analysis</span></a></li>
        </ul>

And CSS:

#icis_dashboard .w_price_history .tabs 
{
    position:absolute;
    bottom:19px;
    right:5px;
    }

#icis_dashboard .w_price_history .tabs li
{
    height:98px;
    margin:0;        
    width:41px;
    }    

#icis_dashboard .w_price_history .tabs li a,
#icis_dashboard .w_price_history .tabs li a span 
{
    background:url("../images/icons/sprite_tabs.png") no-repeat 0px 0px;
    cursor:pointer;
    display:block;
    height:100%;
    text-indent:-99999px;    
    width:100%;    
    } 

#icis_dashboard .w_price_history .tabs li a:hover
{
    background-position: -51px 0px;   
    }

#icis_dashboard .w_price_history .tabs li.comparison a span
{
    background-position: 0px -110px;}        

#icis_dashboard .w_price_history .tabs li.comparison a:hover span 
{
    background-position:-50px -110px;    
    }

#icis_dashboard .w_price_history .tabs li.scenario a span 
{
    background-position: 0px -205px;}

#icis_dashboard .w_price_history .tabs li.scenario a:hover span
{
    background-position: -50px -205px;}

#icis_dashboard .w_price_history .tabs li.analysis a span
{
    background-position: 0px -285px;}    

#icis_dashboard .w_price_history .tabs li.analysis a:hover span
{
    background-position: -50px -285px;}

However the span does not change background-position in IE6 on hover of the parent anchor.

Answer 1

From the script (0.0.8):

if (el.nodeName == 'A') {
    moreForAs = {mouseleave: 'handlePseudoHover', ...

ie. it only supports the effects of :hover on a elements, not elements inside them (a:hover span).

You could perhaps try hacking that line to check for other elements you want, eg.

var tag= el.nodeName.toLowerCase();
if (tag==='a' || tag==='span') {
    ...

Answer 2

try to add padding to span element