Tutorial :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.


Solution: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') {      ...  


Solution:2

Try to add padding to your span element.


Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com
Previous
Next Post »