Hi to all and PLS HELP I have next menu: http://health-fitness-news.info/menu/. The links from the list have PNG background images. All browsers work fine except IE6. I found a script which resolves this problem in IE6 but doesn't work at mouse HOVER. When the mouse is over the link the bg image doesn't have transparency. What should I do do fix that?
I'm using superslight jquery script... it works, but not when i'm with mouse hover
florin
2010-04-17 13:15:44
Tried with iepngfix, but this doesn'n work too at mouse over... Probably there is a piece of jquery code to add but i'm not familiar with jquery and I don't know what this code should be...
florin
2010-04-17 13:19:08
I didn't tried to combine the images (top and bottom) and to style in css for hover - background-image: url(home.png) left bottom.Would work something like this?
florin
2010-04-17 13:24:13
Here, try this: `$(".menuDiv").mouseover(function() { $(".menuDiv").children().supersleight(); })`
susmits
2010-04-17 13:40:08
Doesn't work. Thanks anyway.
florin
2010-04-17 13:58:19
A:
Use supersleight: http://allinthehead.com/retro/338/supersleight-jquery-plugin. It is a known issue that IE tends to screw up rendering transparent PNGs, the transparent region is displayed as an ugly shade of pale blue.
susmits
2010-04-17 13:07:47
A:
Here's an idea:
Looks like the hover image is a full thing with the word, glow and background, not a generic glow behind the word..but all merged. So, why not do a merged quad to black with each option, with same height and position with all words (in photoshop, all glow version layers visible, select with magic wand (with "all layers" option checked) over transparent background (hiding previously the black layer), so you get the selection, invert the selection, then is just image/crop). This would give you a quad of just the size of the biggest possible glow. If your menus change of background colors, this is no solution, then, unless you use two clases (if two backgrounds) to load one or other pngs depending on class (ie, site section).
One better thing is to do this solution and add some conditional html, or conditional css properties just for the case of IE, so only this gets used if browser is IE6.
Another way is use transparent gifs, but would not apply in this case.
S.gfx
2010-04-20 09:51:16