IE <DIV> layer and z-index question

**SAM** · Feb 11 '08, 07:25 PM

Re: IE <DIV> layer and z-index question

wilq a écrit :

I got a little problem, maybe You could help me out.
>
I have one layer that is used to darken all content on page (opacity
50%) to make other layer more visible.
>
If i show two separate Layers - darkenLayer with z-index:1, and a
other layer with z-index:2 - everything is ok. But i would like to do
something like this:
>
<DIV id="darken"></DIV>
>
<DIV id="someDIV">
>
<TABLE><TR><T D>
<DIV id="someChildDI V"blablalbal

blablabal must be in a <p>aragraph

<DIV id="doNotDarken ThisDiv" IMPORTANT DIV</DIV>
>
</DIV>
>
</TD></TR></TABLE>
</DIV>
>
>
My question is - how to make a DIV - doNotDarkenThis Div to be over the
darken DIV. I tried set higher z-index for doNotDarkenThis Div however
this do not solved problem.

that doesn't work this way ...

With the code above as the darken is coded in first, this one is bellow
all what follow

So ... no problem, the notDarken (and its table contener) are not darken

Give a background color to your 'notDarken'

--
sm

**wilq** · Feb 11 '08, 11:45 PM

Re: IE <DIV> layer and z-index question

On Feb 11, 8:18 pm, SAM <stephanemoriau x.NoAd...@wanad oo.fr.invalid>
wrote:

wilq a écrit :
>

I got a little problem, maybe You could help me out.

>

I have one layer that is used to darken all content on page (opacity
50%) to make other layer more visible.

>

If i show two separate Layers - darkenLayer with z-index:1, and a
other layer with z-index:2 - everything is ok. But i would like to do
something like this:

>

>

>

<TABLE><TR><T D>
<DIV id="someChildDI V"blablalbal

>
blablabal must be in a <p>aragraph
>

>

</DIV>

>

</TD></TR></TABLE>
</DIV>

>

My question is - how to make a DIV - doNotDarkenThis Div to be over the
darken DIV. I tried set higher z-index for doNotDarkenThis Div however
this do not solved problem.

>
that doesn't work this way ...
>
With the code above as the darken is coded in first, this one is bellow
all what follow
>
So ... no problem, the notDarken (and its table contener) are not darken
>
Give a background color to your 'notDarken'
>
--
sm

I mean that all DIV-s got own backgrounds. Darken one got black
background with opacity 50%, someDiv have no color, TABLE and its
components got white backgrounds, and DIV doNotDarkenThis Div have gray
background. I would like to show Darken DIV that would be over other
layers except the "doNotDarkenThi sDiv" and here comes a problem :
( Here is complete code for this example:

<html>
<head>
<style type="text/css">
#darken {
background-color : black ;
opacity: 0.5 ;
position : absolute ;
filter : alpha(opacity=5 0) ;
width : 150;
height : 150 ;
z-index : 11 ;

}
#someDiv
{
position:absolu te;
z-index:10;
}
#someChildDIV
{
position:absolu te;
}

#doNotDarkenThi sDiv
{
background-color : WHITE ;
z-index:23;
}
</style>
</head>
<body>
<DIV id="darken"></DIV>
<DIV id="someDIV">
<TABLE><TR><T D>
<DIV id="someChildDI V"Some text
<DIV id="doNotDarken ThisDiv" IMPORTANT DIV</DIV>
</DIV>
</TD></TR></TABLE>
</DIV>
</body>
</html>

I would like to 'doNotDarkenThi sDiv' be over the 'darken' div (so
background of doNotDarken... should be white, but it's not (in IE)).
Anyyone know any solution for that?

**SAM** · Feb 12 '08, 02:45 AM

Re: IE <DIV> layer and z-index question

wilq a écrit :

>
I mean that all DIV-s got own backgrounds. Darken one got black
background with opacity 50%,

but ... what you did seems to work (in Fx) :

<html>
<head>
<style type="text/css">
#darken {
background-color : black ;
position : absolute ;
filter : alpha(opacity=5 0) ;
-moz-opacity: 0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
width : 150;
height : 150 ;
/*
z-index : 11 ;
*/

}
#someDiv
{
position:absolu te;
z-index:10;
}
#someChildDIV
{
position:absolu te;
}

#doNotDarkenThi sDiv
{
background-color : WHITE ;
/*
z-index:23;
*/
}
</style>
</head>
<body>
<DIV id="darken"></DIV>
<DIV id="someDIV">
<TABLE><TR><T D>
<DIV id="someChildDI V"Some text
<DIV id="doNotDarken ThisDiv" IMPORTANT DIV</DIV>
</DIV>
</TD></TR></TABLE>
</DIV>
</body>
</html>

**wilq** · Feb 12 '08, 01:25 PM

Re: IE <DIV> layer and z-index question

Hmm it work's in FF in IE 6.0 but not in IE 7.0 ?? hmmm but its not my
problem ehh:/ I have to make a proper sample again. Grr..

**SAM** · Feb 12 '08, 02:15 PM

Re: IE <DIV> layer and z-index question

wilq a écrit :

Hmm it work's in FF in IE 6.0 but not in IE 7.0 ?? hmmm but its not my
problem ehh:/ I have to make a proper sample again. Grr..

And with only :

#darken {
background-color : #888;
}

Why to work with opacity with a div in rear of layout ?

--
sm

**wilq** · Feb 12 '08, 11:25 PM

Re: IE <DIV> layer and z-index question

On Feb 12, 3:05 pm, SAM <stephanemoriau x.NoAd...@wanad oo.fr.invalid>
wrote:

wilq a écrit :
>

Hmm it work's in FF in IE 6.0 but not in IE 7.0 ?? hmmm but its not my
problem ehh:/ I have to make a proper sample again. Grr..

>
And with only :
>
#darken {
background-color : #888;
}
>
Why to work with opacity with a div in rear of layout ?
>
--
sm

First of all: The script do not works in IE 7.0 (but in fact mine
problem ocurres in IE 6.0 so now im trully confused ;))). Second: I
want a darkening div as i presented there - i mean that I need to
darken all context on page and to shop a "popup", but ocasionally i
want to "do not darken" few elements of context. In my logic (maybe
wrong logic) setting a z-index for element of darkened context should
make them to be not darken but it dont work. ;( ech...

**wilq** · Feb 13 '08, 08:35 PM

Re: IE <DIV> layer and z-index question

Thanks for reply! I have bad news :( It's still not working in IE. It
working in FF, but the code i presented before works in FF too so
nothing changes :( Any other ideas? I found a site about IE bug, but i
cant find any workaround ... :( here it is: http://aplus.co.yu/lab/z-pos/

**wilq** · Feb 13 '08, 08:45 PM

Re: IE <DIV> layer and z-index question

Ok i found a first workaround:

Setting z-index of parent element higher than a darkening element,
then gives all content lower z-index makes it show properly. Here is
code:

<html>
<head>
<style type="text/css">
#darken {
background-color : black ;
opacity: 0.5 ;
position : absolute ;
filter : alpha(opacity=5 0) ;
width : 150;
height : 150 ;
z-index : 11 ;

}
#someDiv
{
position:absolu te;
z-index:12; <---- notice here
}
#someChildDIV
{
position:absolu te;
z-index : 10 ; <---- notice here
}

#doNotDarkenThi sDiv
{
background-color : WHITE ;
z-index:23;
}
</style>
</head>
<body>
<DIV id="darken"></DIV>
<DIV id="someDIV">
<TABLE><TR><T D>
<DIV id="someChildDI V"Some text
<DIV id="doNotDarken ThisDiv" IMPORTANT DIV</DIV>
</DIV>
</TD></TR></TABLE>
</DIV>
</body>
</html>

**SAM** · Feb 14 '08, 01:25 AM

Re: IE <DIV> layer and z-index question

wilq a écrit :

>
It seems that setting z-index via css do not sets style.zIndex for
object

CSS style any objets you gave to them to style, and even z-index.

But it is very right, the JS can only get JS styles
(style attribute of object)

you'ld need :

<DIV id="darken" style="z-index:25"></DIV>

to know on witch z-index 'darken' is set
(probably you could inspect Rules too but it is more difficult)

workaround for that problem is manually set z-index via style.zIndex
on "onload".

Why that ?

--
sm

**SAM** · Feb 14 '08, 01:45 AM

Re: IE <DIV> layer and z-index question

wilq a écrit :

Ok i found a first workaround:
>
Setting z-index of parent element higher than a darkening element,
then gives all content lower z-index makes it show properly. Here is
code:

Yes that works too.

It's difficult for me to judge since my Fx worked fine with a lot of
options about these z-index and because I have not IE ...

The given code is very tortuous just to get an element correctly Z indexed.
Did you find it in M$ recommendations (FAQ or knowledge base) ?

--
sm

**wilq** · Feb 14 '08, 11:25 PM

Re: IE <DIV> layer and z-index question

On Feb 14, 2:36 am, SAM <stephanemoriau x.NoAd...@wanad oo.fr.invalid>
wrote:

wilq a écrit :
>

Ok i found a first workaround:

>

Setting z-index of parent element higher than a darkening element,
then gives all content lower z-index makes it show properly. Here is
code:

>
Yes that works too.
>
It's difficult for me to judge since my Fx worked fine with a lot of
options about these z-index and because I have not IE ...
>
The given code is very tortuous just to get an element correctly Z indexed..
Did you find it in M$ recommendations (FAQ or knowledge base) ?
>
--
sm

Huh Your answer was faster than mine "remove post" method :)) In fact
i found that i did not solved problem, just made a "visual" mistake
when trying solve this. Instead i made a somewhat stupid but working
solution: I create one DIV outside of everything and when i want to
make "doNotDarkenThi sDiv" visible - i just copy it all via appendChild
to this temporary DIV. After everything is back to normal i just
copying it back to orginal place. Now i have other problem:

Copying it to temporary layer works well and on every Browsers.

Now I got new problem - I got problem to appendChild it back to
orgiginal DIV ech... This problem sux so hard ;(

**Thomas 'PointedEars' Lahn** · Feb 15 '08, 12:35 AM

Re: IE <DIV> layer and z-index question

wilq wrote:

I got a little problem, maybe You could help me out.
>
I have one layer that is used to darken all content on page (opacity
50%) to make other layer more visible.

Nonsensical approach. Use a dark background color and set the `opacity' CSS
property and its proprietary equivalents for the elements to be darkened
accordingly.

That said, your problem is off-topic here as script programming is not
involved at all. Try comp.infosystem s.www.authoring.stylesheets.

PointedEars
--
var bugRiddenCrashP ronePieceOfJunk = (
navigator.userA gent.indexOf('M SIE 5') != -1
&& navigator.userA gent.indexOf('M ac') != -1
) // Plone, register_functi on.js:16

**wilq** · Feb 18 '08, 07:45 AM

Re: IE <DIV> layer and z-index question

Nonsensical approach. Use a dark background color and set the `opacity'CSS
property and its proprietary equivalents for the elements to be darkened
accordingly.
>
That said, your problem is off-topic here as script programming is not
involved at all. Try comp.infosystem s.www.authoring.stylesheets.
>
PointedEars
--
var bugRiddenCrashP ronePieceOfJunk = (
navigator.userA gent.indexOf('M SIE 5') != -1
&& navigator.userA gent.indexOf('M ac') != -1
) // Plone, register_functi on.js:16

It seems that You did not understand all problem that I told about
here - just read one of links that i typed here and You will
understand that solution of mine problem isn't lying in css only (i
really tried to solve it just only via css - IT SHOULD BE solved via
CSS, but IE is kind of bugged program). In fact as I proposed - there
is JS solution for this problem... You can try check it by yourself
using code that I gave ..... Eh.... never mind.

IE <DIV> layer and z-index question

IE <DIV> layer and z-index question

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment