How to remove css background transparent?


Tags: css,background,transparent

Problem :

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)



Solution :

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;
    ...
}

    CSS Howto..

    How get device resolution for loading sharp images but size fonts/divs properly with viewport width=device-width?

    How to add Active states and icons in wordpress wp_nav_menu()

    How to link index.html to css file for github page

    How to draw a line with button the center of the line

    How to debug css in IE?

    How to use an existing source map to compile scss to css?

    how to change css for a seletor when the selector doesn't exist javascript / jquery

    Resharper: How to suppress inspection errors resulting from CSS hacks?

    how to recreate tex's over- underbracket using css

    how to get the value of css style using jquery

    How can I use .htaccess to send distant expiry headers on CSS and JS files?

    How to reference a long class name with spaces in CSS?

    How do I do the css for this?

    How can I create a line after my text to the width of the container?

    How can I figure out how much a div shifts when a translate:scale is applied?

    How to import a selector style into another selector style?

    How can I set my unordered list to be in the middle not in-line (see image)?

    How to apply color to all element between the first and the last without giving a number to nth-child()?

    selenium - how to click on a link based on its text using css instead of xpath and without using the contains operator?

    How to remove a CSS class from all same level table rows When a Row is Selected?

    how do you center and left align columns, at the same time, in bootstrap or regular html5?

    Hover on div(1) to show div(2), if mouseout continue to show div(2) for x seconds

    How to create a box with line and add icon on side [closed]

    How to apply style to the divs that are added dynamically?

    How are these websites full-screened in the browser with a learn more button at the bottom (moves you into automatically down the page) [closed]

    HTML/CSS: How to make the sidebar and content follow each other

    how to remove the border-right for a last child in css

    How to center menu css

    how i can fit text to an image with css

    How do I remove an extra overlay layer on p element?