• Post Reply
  • Bookmark Topic Watch Topic
  • New Topic

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

 
Gajendra Tomer
Ranch Hand
Posts: 32
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Posts: 32
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Hi !

Am I not clear with my question?

Regards,
Gajendra
 
Chris Baron
Ranch Hand
Posts: 1061
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Posts: 32
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Posts: 1061
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
The scenario was clear. Did you read the rest of my post?
 
Gajendra Tomer
Ranch Hand
Posts: 32
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Pie
Posts: 65216
95
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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.
 
  • Post Reply
  • Bookmark Topic Watch Topic
  • New Topic