cssmargin

cover div adding a margin

i have a #cover div with the following css

#cover {
    background-color: #FFFFFF;
    height: 100%;
    opacity: 0.4;
    position: fixed;
    width: 100%;
    z-index: 9000;
}

i want it to cover the entire (viewed) page like so

enter image description here

however when i scroll down i see this

enter image description here

thats because a margin of 8 is added to the top and the left.

i tried adding margin:-8 -8 8 8; with no success. why??? and how can i fix this?

DEMO fiddle.

Solution

  • you fogot to set a position. just add:

    top: 0;
left: 0;

    since you havn't posted you complete markup, i can only assume your body has a margin or padding causing the shift you're seeing.