Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

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

8:54 am on Oct 7, 2008 (gmt 0)

New User

10+ Year Member

joined:Dec 1, 2006
votes: 0

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!

10:05 am on Oct 7, 2008 (gmt 0)

Senior Member

WebmasterWorld Senior Member swa66 is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Aug 7, 2003
votes: 0

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.

11:13 am on Oct 7, 2008 (gmt 0)

New User

10+ Year Member

joined:Dec 1, 2006
votes: 0

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


Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members