Jquery Innerfade Not appearing correctly in ie 7 and below

Question

Im building a website with a jquery header that fades one picture into the next (as you have all seen before). Take a look at a sample page here:

http://hqinternetsolutions.com/fullservice/index.html

In IE6, the images shift way over to the right creating a margin. I figured out what is causing it. In the jquery.innerfade.js file, there is a line that says:

for (var i = 0; i < elements.length; i++) {
                $(elements[i]).css('z-index', String(elements.length-i)).**css('position', 'absolute').hide();**
            };

The Position:absolute is causing the image to appear incorrectly in ie6. When I change the absolute to relative or fixed, the image appears in teh right place, but the next image loads below it until the fade is complete and then it shifts up. I cant seem to get the innerfade to work properly in ie. Any ideas?

Answer 1

you can fix this with your CSS file only:

• set the parent element as position: relative
• set the image IMG tag as position:absolute; top:0;left:0;

Answer 2

I am having the same issue. I was able to hack the code but now the images are cut in half durning transition:

http://rosodigital.com/gray/index.htm