Hello all again.

I am working on css based popup. The example is here:

http://ip22.ima.pl/zoldar/skanuj/test.html

The problem is:

I want to lock the page content when popup appears.
There is div called 'screenlock', which is supposed to
do this. In FF (1.0.7) and Opera (8.5) it is working
correctly. It doesn't in IE6. Any ideas?

Screenlock class:



.screenlock {
z-index: 99;
display: block;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

* html .screenlock {
position: absolute;
}


Thanks in advance for help.

IE does not recognize position:fixed (IE is stupid like that)

You'll need to use a JavaScript alternative for IE users.

The fixed box with message DOES work correctly in all browsers.
Including IE6. It's thanks to that definition:


* html .fixedbox {
position: absolute;
}


So this isn't the problem - probably...


Edit:

Err sorry I've just noticed that this doesn't suffice.
I'll revert some changes I have made, because
this code REALLY worked for IE. Give me a minute...

Sorry, I should have said IE doesn't understand position:fixed properly. It recognizes, it just doesn't know what the hell to do with it :)

Ok, take a look at it now:

http://ip22.ima.pl/zoldar/skanuj/test.html

Very nice work on IE! I'd forgotten about the IE-only directives you can include in your header.

Just to make sure, when you originally said "lock the page content," you didn't want to do anything to the content underneath the popup, right? Because this content is not at all locked.

Well, my English sucks :(

Ok, once again: I want the content under the popup to be
unclickable when it appears. So I've created this screenlock
class that has z-index higher than main div's and lower than
popup's. It works in FF and Opera but not in IE6.

Still don't have a clue how to solve this...

Ah, I see. Well, you could use JavaScript/DOM to make links unclickable by replacing the href with #, or by giving the links an ID and switching their visibility to hidden...

That sounds a bit scary... I thought that just putting
a layer in the front that covers the page would solve
the problem.

Nevermind, I will take a look at it later, have enough.
Big thanks for Your patience and good will.

Hmm, what if you put a transparent spacer image into that layer with width and height equal to the viewport, fixed behind the popup, but in front of the content? This should provide the necessary barrier, while still allowing the content to be seen.

It worked! Thanks :)

I've set a tiny gif with transparent color as a background.
Works great.

Ah, you can do it that way too :)

Glad you got that sorted!