Search code examples
cssstylesheet

Background buttons are displayed on top of a toggle button

I have this problem:enter image description here

As you can see that my popup is not hiding the two buttons which are displayed on the page on IE9 but works fine on Mozilla. I have this on my CSS styles on that toggle button:

    .Test.toggle-button {
    background-image: url("../../../images/expand16.gif");
    background-position: left top;
    background-repeat: no-repeat;
    float: left;
    height: 30px;
    margin-left: 10px;
    padding-left: 18px;
    white-space: nowrap;
    width: 20%;
}

This is how my HTML looks like:

 <div class="pay-instruction-labels">
    <div class="pay-instruction-title">
        Payment Instructions:
    </div>
    <span class="current-details toggle-button">Current</span>
    <span class="prior-years-details toggle-button">Prior Years</span>
    <div class="pay-instruction-fields">

What is going wrong here?

Solution

  • Could be a z-index issue. Can you try giving your popup container element position:relative and a z-index:9999 ?