I am getting an issue with my image slider in IE. On my small webpage I've got a banner that has a picture slider. Whenever you switch between images about this slider, a black outline seems round the edges from the banner image. The look slider is completed in jquery, however the website is really a Joomla Content management systems website.

I have investigated into this, and that i thought maybe it's a Png IE bug, issues with transparency, because the images are rounded rectangles. I have place the code to repair this bug during my CSS, but this does not appear to alter anything, so i'm wondering if anybody else had a few recommendations?

This site is www.myramis.com.

Add this towards the finish of the document prior to the </body> tag:


<style type="text/css">
    * html #png-ie /* ie6 hack */
        { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/to_my_png/imageIE.png', sizingMethod='scale')); }
    *+ html #png-ie /* ie7 hack */
        { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/to_my_png/imageIE.png', sizingMethod='scale')); }
</style>

I handled to have it the outline to become less prominent while using following code, however i think possibly I must make a move within the jquery to have it to totally disappear:

    .slide img {
        background: transparent;

 -ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)";
     /* IE8 */   
         filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);
     /* IE6 & 7 */      
        zoom: 1; }

Possibly somebody knows of the jquery fix I possibly could use for the similar problem which may possibly elminate the black outline completely?