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
EmoticonEmoticon