aspose file tools*
The moose likes HTML, CSS and JavaScript and the fly likes Z-INDEX not working in IE7 for nested <DIV> Tag Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login
JavaRanch » Java Forums » Engineering » HTML, CSS and JavaScript
Bookmark "Z-INDEX not working in IE7 for nested <DIV> Tag" Watch "Z-INDEX not working in IE7 for nested <DIV> Tag" New topic
Author

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

Gajendra Tomer
Ranch Hand

Joined: Sep 22, 2008
Posts: 32
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
Ranch Hand

Joined: Sep 22, 2008
Posts: 32
Hi !

Am I not clear with my question?

Regards,
Gajendra
Chris Baron
Ranch Hand

Joined: Mar 21, 2003
Posts: 1049
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
Ranch Hand

Joined: Sep 22, 2008
Posts: 32
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
Ranch Hand

Joined: Mar 21, 2003
Posts: 1049
The scenario was clear. Did you read the rest of my post?
Gajendra Tomer
Ranch Hand

Joined: Sep 22, 2008
Posts: 32
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
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61661
    
  67

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.


[Asking smart questions] [Bear's FrontMan] [About Bear] [Books by Bear]
 
It is sorta covered in the JavaRanch Style Guide.
 
subject: Z-INDEX not working in IE7 for nested <DIV> Tag