How to remove css background transparent?

Question

I don't know how it has occurred and for the life of me, I cannot fix it.

I have a div which is hidden using display: none;

When a user clicks, I set display: block which shows a new layer.

The problem is that all the text is showing through from the layer behind it... How do I force no transparency from a div behind?

I have set no transparency or opacity in my css.

The layer I am showing only has the following settings:

.display { 
    background: rgb(255, 255, 255) url(/template/mobile/images/dot.gif) repeat left top;
    display:none; 
    width: 250px; 
    height:100px; 
    border: 1px solid rgb(20, 20, 20);
    margin-left: -5px;
    margin-top: -100px;
    float: left;
    z-index: 999;

}

As you can see: I've tried using a 1px background image - still transparent I've set the background color to white - still transparent I've tried setting the z-index so it is on top of everything - still transparent

I don't know why it is and how i stop it???

NOTE: I have deactivated the live site and this code can be viewed in testing at: http://dev.cutmyhair.com.au/search_results.php?keyword=waverley NOTE: This issue is only occurring on the .mobi version of the site (so you need to view it on a mobile phone OR using a mobi emulator)

Answer 1

Are you sure it's a transparency issue? I see another problem:

height:100px margin-top: -100px

This two together would make your div stay totally out of the page, if the float property is influenced by other elements around. Maybe post here the html portion and other related css rules, so I can understand the situation better. Anyway, first of all, be sure that your div is in the place you think it is, by using a good html/css debugging tool like Firebug or Chrome dev console.

Answer 2

Try using display:inline-block (instead of block). It seems to work better (more intuitively) with floated elements.

Answer 3

I was able to reproduce this using FF3 and IE8.

You need to set position to either absolute or relative.

.display { 
    position: absolute;
    ...
}

or

.display {
    position: relative;
    ...
}