Grow your CSS skills. Land your dream job.

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

  • # March 9, 2010 at 7:01 am

    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.

Viewing 1 post (of 1 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".