[jQuery] IE + jQuery + fixed elements != happiness

[jQuery] IE + jQuery + fixed elements != happiness


I created a simple page that contains numerous paragraphs, and a
position:fixed div at the top of the page. The div at the top is
called "jquery-panel." jQuery-Panel conatins two nested divs: panel-
content, and panel-handle. By default, panel-content is display:none,
and panel-handle is fully visible. The markup follows:
<div class="jquery-panel">
    <div class="panel-content">
        <div class="padder">
            

Hello World


        </div>
    </div>
    <div class="panel-handle"></div>
</div>
Panel-Handle has a set height in css, and a background image making it
appear as a tab of some sort. The jQuery I'm using to add
interactivity to this setup is simple. Note, what follows is one of
many methods I've attempted to gain the desired effect. I've
attempted .hover() on jquery-panel, and also .mouseover, .mouseout -
nothing has alleviated the IE problem.
$(document).ready(function(){
    $(".jquery-panel").hover(
        function () {
            $(".panel-content").slideDown();
        },
        function () {
            $(".panel-content").slideUp();
        }
    );
});
As you can see from this, the code is rather simple. When the user
passes their mouse over jquery-panel (noted for its visible nested div
with a class of "panel-handle") the nested div.panel-content is
suppose to expand, which it does. In FF this works perfectly, but in
IE (I'm testing with IE7) the panel immediately collapses once you
move your mouse (not leaving jquery-panel, merely moving the mouse
side to side).
I've also tried the following code:
$(document).ready(function(){
    $(".jquery-panel").mouseover(function(){
        $(".panel-content").slideDown();
    });
    $(".jquery-panel").mouseout(function(){
        $(".panel-content").slideUp();
    });
});
As with the previous attempt, I get the immediate closing of panel-
content whilst my mouse is still on jquery-panel. I thought it had
something to do with position:fixed on the jquery-panel, but when I
removed that CSS, the problem persisted. Following is the relevant
CSS:
div.jquery-panel {
    position:fixed;
    top:0;
    left:0;
    width:100%;
}
    div.panel-content {
        background-color:#CCCCCC;
        background-image:url("panelbg.png");
        background-position:left top;
        background-repeat:repeat-x;
        color:#666666;
        font-family:verdana;
        font-size:12px;
        display:none;
    }
        div.panel-content div.padder {
            padding:10px;
        }
    div.panel-handle {
        height:15px;
        position:relative;
        background-image:url("dropshadow.png");
        background-position:left top;
        background-repeat:repeat-x;
    }
Any help would be greatly appreciated.
Jonathan Sampson
www.sampsonresume.com