So *&?% close I can taste it..! :-S

Question

As some of you know, I'm having a hell of a time trying to
resolve a final
problem with an IE6 position:fixed fix.
Consider :
http://www.vilverset.com/mark.html
Hours of troubleshooting revealed, among other things, that
"position:relative" on the #content pseudo-class is what's
keeping the
content from scrolling in IE6 (because this "fix" treats
position:relative
as position:fixed). However, I've got to assign a position to
this layer
because it needs to be sandwiched between other elements
depth-wise (the
png's under, the footer over).
Hence the dilemma.
Solution #1 is to NOT z-index the main content, but rather
z-index
everything around it so that the content is properly
sandwiched. This means
not having to use position:* at all, which now frees the
layer to scroll.
And the whole thing works beautifully in IE6.
However..! For some reason, one of the images now won't show
up in FF :
http://www.vilverset.com/mark2.html
The top left spotlight (spotlight.png #spotTop) isn't showing
up. However,
the spotlight at the bottom *is* (footer_of.png #spotBottom).
Here are their
pseudo-classes :
#spotTop {
position:fixed;
left:0;
top:0;
z-index:-1;
#spotBottom {
position:fixed;
left:0;
bottom:0;
z-index:-1;
As you can see, other than their top/bottom positioning, they
are
*identical*, and both z-indexed at -1 to show up underneath
the main
content.
The fact that spotlight.png isn't showing up at all suggests
that it may
possibly be showing up underneath the body background.
Suggestions on how to solve? (that don't involve chucking the
fix :P )

Answer 1

As some of you know, I'm having a hell of a time trying to
resolve a final
problem with an IE6 position:fixed fix.
Consider :
http://www.vilverset.com/mark.html
Hours of troubleshooting revealed, among other things, that
"position:relative" on the #content pseudo-class is what's
keeping the
content from scrolling in IE6 (because this "fix" treats
position:relative
as position:fixed). However, I've got to assign a position to
this layer
because it needs to be sandwiched between other elements
depth-wise (the
png's under, the footer over).
Hence the dilemma.
Solution #1 is to NOT z-index the main content, but rather
z-index
everything around it so that the content is properly
sandwiched. This means
not having to use position:* at all, which now frees the
layer to scroll.
And the whole thing works beautifully in IE6.
However..! For some reason, one of the images now won't show
up in FF :
http://www.vilverset.com/mark2.html
The top left spotlight (spotlight.png #spotTop) isn't showing
up. However,
the spotlight at the bottom *is* (footer_of.png #spotBottom).
Here are their
pseudo-classes :
#spotTop {
position:fixed;
left:0;
top:0;
z-index:-1;
#spotBottom {
position:fixed;
left:0;
bottom:0;
z-index:-1;
As you can see, other than their top/bottom positioning, they
are
*identical*, and both z-indexed at -1 to show up underneath
the main
content.
The fact that spotlight.png isn't showing up at all suggests
that it may
possibly be showing up underneath the body background.
Suggestions on how to solve? (that don't involve chucking the
fix :P )