Win a copy of Head First Android this week in the Android forum!
  • Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other Pie Elite all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Campbell Ritchie
  • Paul Clapham
  • Ron McLeod
  • Tim Cooke
  • Junilu Lacar
Sheriffs:
  • Rob Spoor
  • Devaka Cooray
  • Jeanne Boyarsky
Saloon Keepers:
  • Jesse Silverman
  • Stephan van Hulst
  • Tim Moores
  • Carey Brown
  • Tim Holloway
Bartenders:
  • Jj Roberts
  • Al Hobbs
  • Piet Souris

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

 
Ranch Hand
Posts: 32
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • 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
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Hi !

Am I not clear with my question?

Regards,
Gajendra
 
Ranch Hand
Posts: 1061
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • 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
    Number of slices to send:
    Optional 'thank-you' note:
  • 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
    Number of slices to send:
    Optional 'thank-you' note:
  • 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
    Number of slices to send:
    Optional 'thank-you' note:
  • 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

 
Sheriff
Posts: 67595
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • 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.
 
You showed up just in time for the waffles! And this tiny ad:
Building a Better World in your Backyard by Paul Wheaton and Shawn Klassen-Koop
https://coderanch.com/wiki/718759/books/Building-World-Backyard-Paul-Wheaton
reply
    Bookmark Topic Watch Topic
  • New Topic