position absolute and relative problem in ie7

There is a div with toggle behavior for toggling the div there is an image at the bottom right of the div to pl开发者_Python百科ace the image to bottom right i am making the parent div position relative and setting the image position absolutely but the problem arises when i am clicking the image to toggle on toggle up the image is staying at the bottom and on toggle down it is going to the top this behavior is only in ie 7 in ie8 firefox chrome it is behaving fine

the css is somewhat like this

 .filterPanel
{
 border: 1px solid #fbcb09 ;
 -moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radious: 5px;
 position: relative;
 margin: 0;
 padding:0;
 z-index: 1;
}
.toggleCollapse, .toggleExpand
{
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    -khtml-border-radius: 3px;

    background-color: #FFF;
    border: 1px solid #FBCB09;
    cursor: pointer;
    padding: 2px 1px 2px 2px;
    position: absolute;
    bottom: -10px;
    right:5px;
    z-index: 1000;
}

filter panel is the parent div and toggleCollapse is the image that iam talking about it is inside this div(filter panel) how to fix this

I'm not sure I understand your question, but negative margins and relative positions get icky in IE's.

Consider a different approach: To put your toggleCollapse button on the bottom, forget the position: relative business put the button AFTER the div you are toggling and set it's position to relative, top: -10px (or whatever).

EG:

<div class="filter_wrapper">
<div class="filter_panel">Some stuff</div>
<a class="toggle">[ toggle me ]</a>
</div>