jQuery UI button won't stay hidden in IE7

Question

Ok,

I have made a twitter-style control panel to apply filters and sorting to a list, the code for it is like this:

<div id="drawer">
    <div id="orderDrawer" class="subDrawer" >
    <div class="closeDrawer clearfix ui-icon ui-icon-closethick">close</div>
    <h4>sorteer</h4>                    

    <div id="orderPanel">    
     <!--some content-->
    </div>
    </div>
    <div id="filterDrawer" class="subDrawer" >
    <div class="closeDrawer clearfix ui-icon ui-icon-closethick">close</div>
    <h4>Filters</h4>                    

    <div id="filterPanel">
    <!-- some content -->
    </div>
    <div id="filterButtonBar" class="drawerButtons">
    <button id='applyFilter' name='applyFilter'>Apply</button>
    </div>
    </div>
</div>

This works together with the following JS code:

        $("#orderPanelButton").click( function(){
            if( $(".subDrawer[id!=orderDrawer]").is(":visible") ) {
                $("#drawer").slideUp( function() {
                    $(".subDrawer").hide();
                    $("#orderDrawer").show();
                    $("#drawer").slideDown();   
                });
            } else {
                $(".subDrawer").hide();
                $("#orderDrawer").show();
                $("#drawer").slideToggle();
            }
        });


        $("#filterPanelButton").click( function(){
            if( $(".subDrawer[id!=filterDrawer]").is(":visible") ) {
                $("#drawer").slideUp( function() {
                    $(".subDrawer").hide();
                    $("#filterDrawer").show();
                    $("#drawer").slideDown();   
                });
            } else {
                $(".subDrawer").hide();
                $("#filterDrawer").show();
                $("#drawer").slideToggle();
            }
        });

and finally I use jQuery UI button to shape the button:

$("#applyFilter").click(function(){
                    $("#filterForm").submit();
                 });
$("[name='applyFilter']").button({icons: {
            primary:'ui-icon-arrowreturnthick-1-e'}});

This works great in all tested browsers (FF, chrome, IE8), but not in IE7. There, when I change the content of #drawer from 'filter' to 'order' with the necessary hides and slideToggles an empty ghost of the applyFilter button appears. A ghost that will disappear when you hover over it.

Anybody here got any idea why this happens and how I can get rid of this annoying little bug in my code for IE7?

[update 22/Jul/10] I have found a temporarily solution but hope to find something a little more neat. I added the following JS, based on MSIE 7.0 detection by PHP:

$(".subDrawer[id!=' . $drawer . 'Drawer]").find("button").each(function(){
   $(this).css("display","none");
});

$(".subDrawer[id=' . $drawer . 'Drawer]").find("button").each(function(){
    $(this).css("display","");
});

Where $drawer = the first part of the subDrawer ID (filter / order ).

Answer 1

You've already hit on the why part a bit, which is discussed here: Why does jQuery show/hide use display:none instead of visibility:hidden?

I also think part of the "why" is due to an IE7 non-standard CSS implementation/interpretation (aka bug).

I believe the fix is outlined here: Fading issues in Internet Explorer 7 when using jQuery

and http://jquery-howto.blogspot.com/2009/02/font-cleartype-problems-with-fadein-and.html