homepage Welcome to WebmasterWorld Guest from 54.227.12.4
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
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




msg:3760351
 8:54 am on Oct 7, 2008 (gmt 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!

 

swa66




msg:3760394
 10:05 am on Oct 7, 2008 (gmt 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.

mita4eto




msg:3760431
 11:13 am on Oct 7, 2008 (gmt 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

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved