Billed placering virker ikke helt i chrome og safari

Hejsa,

Jeg har følgende css og html:

CSS
#left
{
    position:relative;
    overflow:hidden;
    padding:0;
    margin:0;
}

#left-collapsed
{
    position:relative;
    display:none;
}

.panel-header
{
    background:#eee url(panel-header.gif) 0 0 repeat-x;
    height:25px;
    line-height:25px;
    font-weight:bold;
    padding-left:5px;
}

.panel-header-toggle-open
{
    position:absolute;
    top:6px;
    right:4px;
    display:block;
    cursor:hand;
    width:15px;height:15px;
    overflow:hidden;
    background:transparent url(tool-arrows.png) no-repeat scroll 0 -15px;
}

.panel-header-toggle-closed
{
    position:absolute;
    top:6px;
    right:4px;
    display:block;
    cursor:hand;
    width:15px;
    height:15px;
    overflow:hidden;
    background:transparent url(tool-arrows.png) no-repeat scroll 0 0;
}

HTML
<div id="left">
    <div id="left-header" class="panel-header">
        Index
        <a href="#" id="panel-header-open" class="panel-header-toggle-open"></a>
    </div>
    <div id="left-main" class="panel-main">
        <div id="menu"></div>
    </div>
</div>
<div id="left-collapsed">
    <a href="#" id="panel-header-closed" class="panel-header-toggle-closed"></a>
</div>

Jeg bruger noget javascript til at skjule/vise henholdsvis #left og #left-collapsed. Dette virker fint i IE 7 og 8, Firefox og opera, men i Chrome og Safari vises billedet tool-arrows.png ikke når jeg viser #left-collapsed.

Er der nogen der kan hjælpe mig med dette ?