cover div adding a margin

Question

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.

You're missing a unit, e.g. `px` http://jsfiddle.net/e9AAM/1/ — Adrift, Oct 06 '13 at 14:33

oezi · Accepted Answer · 2013-10-06T14:39:52.060

1

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.

edited Oct 06 '13 at 14:39

answered Oct 06 '13 at 14:33

oezi

49,639
10
95
114

avrahamcool · Answer 2 · 2013-10-06T15:01:16.287

1

simple thing to fix.

Add that to your CSS

* /*Remove all the default margin and padding*/
{
    margin: 0;
    padding: 0;
}
html, body /*so it'll work when you specify 100% height on element*/
{
    height: 100%;
}

BTW: use units(px/%) for margin/padding other then 0.

and Here's a Fiddle

also, You don't even need the fixed position for that.. check out that fiddle

edited Oct 06 '13 at 15:01

answered Oct 06 '13 at 14:46

avrahamcool

13,552
5
47
58

u didnt read the question, or i am missing something, try making a fiddle. – Math chiller Oct 06 '13 at 14:48
you're clearly missing something.. [Here you Go](http://jsfiddle.net/avrahamcool/e9AAM/4/). – avrahamcool Oct 06 '13 at 14:49
no it is ( `+1` ) i just removed `margin:-8 -8 8 8;`. thats all – Math chiller Oct 06 '13 at 14:55
oh.. sorry. also: you can use that without `fixed` (checkout the new fiddle) – avrahamcool Oct 06 '13 at 15:00

cover div adding a margin

2 Answers2

Linked