Question

since they have same rendering engine, this problem shows in both. it works great in IE7/8/9, FF. I’m using chrome 17 and safari 5. here is my whole code. see you can’t click both the buttons and the link.(you have to click on the img to show the elements)

<script type="text/javascript">
 function showDrop(){
 document.getElementById('droplist').style.display="block";
}
function hideDrop(){

 document.getElementById('droplist').style.display="none";

}
</script>

 <style>
body{
direction:rtl;
 }
#droplistImg{
    border-left:1px solid #000000;
    border-right:1px solid #000000;
    border-top:1px solid #000000;
    padding:3px;
    background:#c0c0c0;
    float:right;

}
#droplistinfo{
border:1px solid #000000;
position:absolute;
z-index:-1;
left: 0;
top:20px;
background:#c0c0c0;

}

 #droplist{
width: 101px;
position: relative;
}

</style>

 <div id="droplist" style="position:absolute;display:none;">
 <div id="droplistImg" ><img src="images/stats.png"/></div>

<div id="droplistinfo">
    <input type="button" value="phone num"/>
    <input type="button" value="fax num"/>
    <a style="float:left;" href="javascript:hideDrop()">close</a>
</div>

 </div>
 <img src="images/stats.png" onclick="showDrop()"/>

Answer 1

I knew what’s the issue. it’s the z-index when I remove it, it works fine. I changed some things and it works great now.

    body{
        direction:rtl;
    }

    #droplistImg{
            border-left:1px solid #000000;
            border-right:1px solid #000000;
            border-top:1px solid #000000;
            padding:3px;
            background:#c0c0c0;
            float:right;
            position:absolute;
             z-index:2;
    }
    #droplistinfo{
        border:1px solid #000000;
        position:absolute;

        left: 0;
        top:20px;
        background:#c0c0c0;

    }

    #droplist{
        width: 101px;
        position: relative;
    }