IE6 PNG transparency issue with image slider controls

[Bollard]

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?

Thanks

[Baines]

I think the best option would be to separate the arrows in to two images, and then give nivo-nextNav and nivo-prevNav their own separate background images.

This should avoid the use of background-position and work in theory.

[Bollard]

Worked perfectly. Thank. The simple ideas are always the best!

[nvme]

here's another png fix that supports background images with positions.

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

he also has another script that does the same thing but also does rounded corners in ie.

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

[Adriana Leites]

Hello! I see that you got Nivo Slider to work in IE6.

I'm using it also. It works perfectly in all browsers, except in IE6.

This is how it shows when the page loads:

And this is how it shows when it changes to another image:

Any Ideas on how could it be fixed?

Thanks in advance. Any help will be appreciated.