DIV mask layer not fully covered on top when there is a scroll bar

It's common to create a "mask" layer on top of the page in order to display photos, pop-up messages, etc.

I used to used the "absolute" positioning to do the job under I lately discovered the so called "masked" will move if there is a scroll bar (when shrinking the window's size).

This problem can be easily solved by just setting the DIV to "fixed" position.

Another problem solved! But wait a minute. This solution doesn't work in IE! Let me see if there is a workaround for this...


After trying setting the DOCTYPE to something else such as



It does work on all browsers but all the positions are not in place as desired. Better use a sniffer to sort IE out of using the "fixed" position.