473,326 Members | 2,136 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,326 software developers and data experts.

IE <DIV> layer and z-index question

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><TD>
<DIV id="someChildDIV"blablalbal

<DIV id="doNotDarkenThisDiv" IMPORTANT DIV</DIV>

</DIV>

</TD></TR></TABLE>
</DIV>
My question is - how to make a DIV - doNotDarkenThisDiv to be over the
darken DIV. I tried set higher z-index for doNotDarkenThisDiv however
this do not solved problem. I read a few pages, looking alot on google
and still haven't got any clues. In my case 'darken' DIV have to be
position:absolute, and 'someDIV' too...... Help!
Feb 11 '08 #1
13 5724
SAM
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><TD>
<DIV id="someChildDIV"blablalbal
blablabal must be in a <p>aragraph
<DIV id="doNotDarkenThisDiv" IMPORTANT DIV</DIV>

</DIV>

</TD></TR></TABLE>
</DIV>
My question is - how to make a DIV - doNotDarkenThisDiv to be over the
darken DIV. I tried set higher z-index for doNotDarkenThisDiv 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
Feb 11 '08 #2
On Feb 11, 8:18*pm, SAM <stephanemoriaux.NoAd...@wanadoo.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:
<DIV id="darken"></DIV>
<DIV id="someDIV">
* *<TABLE><TR><TD>
* * <DIV id="someChildDIV"blablalbal

blablabal must be in a <p>aragraph
* * * * *<DIV id="doNotDarkenThisDiv"*IMPORTANT DIV</DIV>
* *</DIV>
* *</TD></TR></TABLE>
</DIV>
My question is - how to make a DIV - doNotDarkenThisDiv to be over the
darken DIV. I tried set higher z-index for doNotDarkenThisDiv 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 doNotDarkenThisDiv have gray
background. I would like to show Darken DIV that would be over other
layers except the "doNotDarkenThisDiv" 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=50) ;
width : 150;
height : 150 ;
z-index : 11 ;

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

#doNotDarkenThisDiv
{
background-color : WHITE ;
z-index:23;
}
</style>
</head>
<body>
<DIV id="darken"></DIV>
<DIV id="someDIV">
<TABLE><TR><TD>
<DIV id="someChildDIV"Some text
<DIV id="doNotDarkenThisDiv" IMPORTANT DIV</DIV>
</DIV>
</TD></TR></TABLE>
</DIV>
</body>
</html>

I would like to 'doNotDarkenThisDiv' be over the 'darken' div (so
background of doNotDarken... should be white, but it's not (in IE)).
Anyyone know any solution for that?
Feb 11 '08 #3
SAM
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=50) ;
-moz-opacity: 0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
width : 150;
height : 150 ;
/*
z-index : 11 ;
*/

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

#doNotDarkenThisDiv
{
background-color : WHITE ;
/*
z-index:23;
*/
}
</style>
</head>
<body>
<DIV id="darken"></DIV>
<DIV id="someDIV">
<TABLE><TR><TD>
<DIV id="someChildDIV"Some text
<DIV id="doNotDarkenThisDiv" IMPORTANT DIV</DIV>
</DIV>
</TD></TR></TABLE>
</DIV>
</body>
</html>
Feb 12 '08 #4
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..
Feb 12 '08 #5
SAM
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
Feb 12 '08 #6
On Feb 12, 3:05*pm, SAM <stephanemoriaux.NoAd...@wanadoo.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...
Feb 12 '08 #7
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/

Feb 13 '08 #8
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=50) ;
width : 150;
height : 150 ;
z-index : 11 ;

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

#doNotDarkenThisDiv
{
background-color : WHITE ;
z-index:23;
}
</style>
</head>
<body>
<DIV id="darken"></DIV>
<DIV id="someDIV">
<TABLE><TR><TD>
<DIV id="someChildDIV"Some text
<DIV id="doNotDarkenThisDiv" IMPORTANT DIV</DIV>
</DIV>
</TD></TR></TABLE>
</DIV>
</body>
</html>
Feb 13 '08 #9
SAM
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
Feb 14 '08 #10
SAM
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
Feb 14 '08 #11
On Feb 14, 2:36*am, SAM <stephanemoriaux.NoAd...@wanadoo.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 "doNotDarkenThisDiv" 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 ;(
Feb 14 '08 #12
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.infosystems.www.authoring.stylesheets.
PointedEars
--
var bugRiddenCrashPronePieceOfJunk = (
navigator.userAgent.indexOf('MSIE 5') != -1
&& navigator.userAgent.indexOf('Mac') != -1
) // Plone, register_function.js:16
Feb 15 '08 #13
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.infosystems.www.authoring.stylesheets.

PointedEars
--
var bugRiddenCrashPronePieceOfJunk = (
* * navigator.userAgent.indexOf('MSIE 5') != -1
* * && navigator.userAgent.indexOf('Mac') != -1
) *// Plone, register_function.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.
Feb 18 '08 #14

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

1
by: Philo | last post by:
How do I select all <div> tags except those which contain a <table> tag somewhere within them? Example XML: <********************** sample input ***********************> <txtSectionBody>...
4
by: Ian Rastall | last post by:
This really is a JavaScript question. I have a site that looks fine in everything but NN4. I'm afraid I don't have a URL, because the site is very much unfinished. The site is a header (which is...
3
by: Craig | last post by:
Hi, What I'm trying (quite poorly) to do is make it so when a link is clicked the text inside a div or p changes. I've tried numerous things, most of which work in IE but none of which work in...
8
by: Daniel Hansen | last post by:
I know this must seem totally basic and stupid, but I cannot find any reference that describes how to control the spacing between <p>...</p> and <div>...</div> blocks. When I implement these on a...
19
by: benzwt | last post by:
I use the following function to hide a <div> named one. function hideObject() { if (ns4) { document.n1.visibility = "hide"; } else if (ie4) { document.all.style.visibility = "hidden"; }...
4
by: Bruce W...1 | last post by:
IE 6 supports the DOM for the most part. Am I missing something or is this absent from Visual Studio 2003? Does Web Matrix have it? You see, I'm trying to get Visual Studio and Dreamweaver MX...
1
by: Shinya Koizumi | last post by:
Have you seen the example of how to make a modeless layer using <div>? SK
3
by: chris1606 | last post by:
I have an image gallery that pops up an enlarged version of a picture when someone clicks on it. That bit works, but it should also load the picture's caption into the floating layer. Instead the...
1
by: Lee99 | last post by:
Hey guys, Love the forum. Been browsing a lot, now time for my first post :-) I'm wondering how to set a <div> tag to be center aligned to the screen, both horizontally and vertically... so...
2
by: Richard Maher | last post by:
Hi, I'm trying to use the Visibility Style attribute for a Div to effectively PopUp a lightweight window with some additional context-sensitive information, when a user mouses over a given...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
1
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.