.hover not working in IE6 after transparent .PNG fix (help?)

[JoblessPunk]

Hello,

Here is the website I’m working on:
http://www.joblesspunkdesigns.com/

For my navbar and footer I use jQuery to do a nice fade in and fade out:

Code:

$(function(){
var navbar = $(‘#navbar’),
navbarLinks = $(“.navbarlink”, navbar);

navbarLinks.hover(function () {
navbarLinks.not(this).stop().animate({opacity: 0.3}, “slow”);
}, function () {
navbarLinks.stop().animate({opacity: 1.0}, “slow”);
});
});

$(function(){
var footer = $(‘#footer’),
footerLinks = $(“.footerlink”, footer),
allFadeables = $(‘.divider’, footer).add(footerLinks);

footerLinks.hover(function () {
allFadeables.not(this).stop().animate({opacity: 0.3}, “slow”);
}, function () {
allFadeables.stop().animate({opacity: 1.0}, “slow”);
});
});

I’m also using jQuery to fade in/out my splash screen and that gets messed up also:

Code:

$(window).load(function() {
$(‘#splash’).fadeIn(2000, function() {
$(this).delay(500).fadeOut(2000, function() {
$(‘#container, #reel’).fadeIn(1000); });
});
});

I’m currently cross-browsing the website and I found a very nice JavaScript hack that fixes the .PNG’s so they work in IE6:
DD_belatedPNG

It works but it messes up my jQuery so that:
1.) My splash screen image is not centered correctly
2.) When you rollover the navbar or footer links they work for one cycle but then they become un-active after that…

can anyone help me please fix this so it will work properly? I bet after the JavaScript .PNG hack runs it changes the item so that it is not getting selected correctly…

Thanks for your help,
tim

P.S. I have this website working on IE7/8, FF, Safari, Chrome, Opera and iPhone. I’m only having this problem with IE6 and I know that the .PNG hack is causing the problem.

P.S.S. I also posted this at the jQuery.com forum and emailed the creater of the .PNG hack. I wanted to post it here also just to see if anyone has ran across this problem before.

[Author]

Posts