IE6 PNG transparency issue with image slider controls

[Major_Disaster]

Hey all,

Im having some troubles with my website (see here). Im using the Nivo Slider and the iepngfix.htc.

The problem is, the PNG fix doesnt seem to like background-position, and i end up with both (transparent) arrows pointing backwards in IE6! (Have a look at this screenshot to see what i mean).

Here is the CSS:

/* Transparent PNG Fix */
div.nivo-directionNav a, a.nivo-nextNav, a.nivo-prevNav {
	behavior: url('/js/iepngfix.htc')
}

/* Direction nav styles (e.g. Next & Prev) */
.nivo-directionNav a {
	display:block;
	width:30px;
	height:30px;
	background:url(../images/slider/arrows.png) no-repeat;
	text-indent:-9999px;
	border:0;
	position:absolute;
	top:40%;
	z-index:99;
	cursor:pointer;
}

a.nivo-nextNav {
	background-position:-30px 0;
	right:10px;
}

a.nivo-prevNav {
	left:10px;
}

Any ideas?

 

[Muel]

I've just started using a jQuery plugin to solve this. (Although I don't know if it works for background images).

Should the arrow be set as a background image really? You're essentially anchoring nothing by the looks of it, so a lo-fi browser will struggle with it. You could cut down on the CSS if you put it in as an <img /> tag as well....

Anyway I'm using this one: http://jquery.andreaseberhard.de/pngFix/index.html

Just use this to get it going.

<script type="text/javascript" src="/JS/jquery142min.js"></script>
<script type="text/javascript" src="/JS/jq_iepngfix.js"></script>
<script>
$(document).ready(function(){ 
	$(document).pngFix();
});
</script>

 

[Major_Disaster]

Thanks for the reply.

Well thats how the plugin was coded so i didnt want to hack around too much with it. But i just split the image into two separate previous and next images and set the background separately - works perfectly.

Thanks for the help