Z-INDEX not working in IE7 for nested <DIV> Tag

[Gajendra Tomer]

Hi All !

Having following tag in body:

<div id="divTabFrame" style="position:absolute; font-size: 14pt; color: #FFFFFF; background-color: #FFFFFF;"></div>

Further, I have 4 buttons, named as:

1)Create DIV1, with STYLE=position:absolute; width:" + FrameWidth + "px; height:" + FrameHeight + "px;z-index:1"
2)Create DIV2, with STYLE=position:absolute; width:" + FrameWidth + "px; height:" + FrameHeight + "px;z-index:2"
3)Create DIV3, with STYLE=position:absolute; width:" + FrameWidth + "px; height:" + FrameHeight + "px;z-index:3"
4)Create DIV4, with STYLE=position:absolute; width:" + FrameWidth + "px; height:" + FrameHeight + "px;z-index:4"

These buttons are suppose to create following <DIV> hierarchy using method: "divTabFrameObj.appendChild(newdiv);" :

<DIV id="divTabFrame">
<DIV id="child1">Child1</DIV>
<DIV id="child2">Child2</DIV>
<DIV id="child3">Child3</DIV>
<DIV id="child4">Child4</DIV>
</DIV>

What I expect here, <DIV> with id="child4" , must appear in front but it's not happening in IE7, whereas same code is running fine in IE8 & Firefox 3.x.

Can anyone help me here please ?

Help will be highly appreciated.

Cheers,
Gajendra

[Gajendra Tomer]

Hi !

Am I not clear with my question?

Regards,
Gajendra

[Chris Baron]

What are you trying to do?
Do you want to display only one div at a time or do you work with transparency here and it's necessary that all divs are displayed?
The first one could easily be solved with the css property "display". You can switch with "display:none" and "display:block".
cb

[Gajendra Tomer]

Chris Baron wrote:What are you trying to do?

Hi Chris !

I have created following "div" hierarchy:

<DIV id="divTabFrame">
<DIV id="child1">Child1</DIV>
<DIV id="child2">Child2</DIV>
<DIV id="child3">Child3</DIV>
<DIV id="child4">Child4</DIV>
</DIV>

If you notice in the details of my original question,<DIV id="child4">Child4</DIV> is having highest z-index order i.e. "4".

Hence I am expecting <DIV id="child4">Child4</DIV> ontop of other divs having lesser z-index value.

But it's not happening in IE7 , specifically.

Problem scenario cleared ?

Thanks,
Gajendra

[Chris Baron]

The scenario was clear. Did you read the rest of my post?

[Gajendra Tomer]

I read out your entire response and used the same to fix the issue in my project already but want to fix it through z-index.

That's because I have written the <Div> hide/show code at numerous locations, which is not good for the sake of maintainability.

Hence want to configure z-index dynamically and keep life of everyone easy.

Sounds logical?

Gajendra

[Bear Bibeault]

Please be sure to use code tags when posting code to the forums. Unformatted or unindented code is extremely hard to read and many people that might be able to help you will just move along to posts that are easier to read. Please click this link ⇒ UseCodeTags ⇐ for more information.

Properly indented and formatted code greatly increases the probability that your question will get quicker, better answers.