IE6 problem with tabs based on png files, mouseOver does not load img

IE6 and PNG, mouseOver does not load PNG background image in a tabstrip

[mita4eto]

Hi, guys!

I will really enjoy if I get the answer of my problem. It is regarding a typical and wide used structure for navigation - CSS based tabs that change their appearance on mouseOver event (hover). So, I have created my images for the tabs, transparent PNG files - left and right image, as the right is very long to cover the whole tab. I use a simple PNG fix JavaScript file that makes IE6 to display PNG transparency using Microsoft filters instead. Okay, everything is fine in all the browsers BUT IE6... like always! PNG files are correctly interpreted but when I do a mouseOver to any particular tab, the Hover bg image just starts to flicker somehow and loads too slow. I have tried another pngfix.js file which fixes the PNG transparency, displays the left image of any tab and just does not load the right image or does not load the hover image too. The general question is how to make css based tabs with PNG transparent graphics(the tab corners) that works fine in IE6 and the other modern browsers?

Thanks in advance, guys!

[swa66]

You could use the filters directly in the CSS that goes into a conditional comment so only IE6 will see it.
That way you avoid the delay caused by javascript.

I'd also look at IE7.js, I think it fixes this too.

Yet another alternative is to let IE6 use degraded solutions like square corners, like gifs instead of pngs, .... there are lots of possibilities out there.

Don't let IE6 hold you back.

[mita4eto]

Thanks for your input, swa66!

Actually, it is not an option to use .GIF files because of lots of reasons. I use conditional formatting to inform the agent that the JavaScript file is only for IE browser. In general, If anyone knows a nice example of CSS tabs with PNG images, please do not hesitate to share it with me