I have the following jQuery 1.2.6 code:

Code:
    //
    //Header Toggle (toggle masthead and provide a mouseover / mouseout aesthetic for each toggle show/hide phase).
    //
    $('body').find('div#header').hide().end().find('a.toggle').click(function() {
        $('body').find('div#header').slideToggle();
        if($(this).hasClass('open')){
            $(this).removeClass('open');
            $(this).addClass('closed');
            $(this).css('backgroundImage','url(header_toggle_hover_close_55px_28px.gif)');
            $(this).hover(
               function() {
                  $(this).css('backgroundImage','url(header_toggle_hover_55px_28px.gif)');
               },
               function() {
                  $(this).css('backgroundImage','url(header_toggle_hover_close_55px_28px.gif)');
               }
            );
        }else{
            $(this).removeClass('closed');
            $(this).addClass('open');
            console.log($(this));
            $(this).css('backgroundImage','url(header_toggle_hover_55px_28px.gif)');
            $(this).hover(
               function() {
                  $(this).css('backgroundImage','url(header_toggle_hover_close_55px_28px.gif)');
               },
               function() {
                  $(this).css('backgroundImage','url(header_toggle_hover_55px_28px.gif)');
               }
            );
        }
    });
Basically, the above looks for #header and when a.toggle is clicked, the header slides down. While down (or "open"), the subsequent image I have in it executes an animated gif background on mouseover, and on mouseout, shows a different animated gif--rinse and repeat for the "closed" phase of the toggle. Pretty simple for the most part...

The problem is that it's breaking in Firefox 3.6 (it simply disappears whenever the header toggled--or whenever the a.toggle link is clicked). Now, I know most people are probably moving on for the more modern versions, but there's still a considerable amount of ppl using 3.6 and if there's anything I can do to fix this for that browser, I'd love to. The only issue is that Firefox isn't showing anything--no warnings, errors; nothing. I'd add some alerts or whatever but I'm not sure where to start really because everything seems to be functioning well. I do have some CSS, though--maybe that's causing this? Here it is:

Code:
/* Primary Links */
#primary_links{border-top:1px solid #009;position:relative;clear:both;font-weight:bold;font-size:80%}
#primary_links ul{margin-top:0;padding-top:.5em;font-size:150%;text-align:center;list-style:none}
#primary_links ul li{position:relative;margin:0;margin-bottom:1px;margin-left:1px;padding:0;display:inline;white-space:nowrap;background:none;list-style:none}
#primary_links ul li a{margin:0;padding:.2em .5em .2em;width:100%;height:100%;text-align:center;color:#000}
#primary_links ul li a:hover{text-decoration:none;color:#00f}
#primary_links ul li a:focus{border-bottom:2px solid #f00;color:#f00}
#primary_links ul li a:active{border-bottom:2px solid #00f;color:#00f}
* html #primary_links ul li a{display:inline-block}
#primary_links a.toggle{position:absolute;right:5%;top:-1px;width:55px;height:28px;z-index:1;cursor:pointer;text-decoration:none;background:url(header_toggle_55px_28px.gif) no-repeat center top}
#primary_links a.toggle.open{background-image:url(header_toggle_hover_55px_28px.gif)}
/*#primary_links a.toggle.open:hover{background-image:url(header_toggle_hover_close_55px_28px.gif)}*/
#primary_links a.toggle:hover{background-image:url(header_toggle_hover_55px_28px.gif)}
Any feedback on this is really appreciated. I feel pretty lost with this one...