Z-index in IE6 problem with relative positioned layer

Note that problem with this page in IE6 (top navbar):

http://www.isadorapopper.com/index.cfm

The problem is with this code .. which is located within the same DIV that contains the navbar:

<div id="sec1" style="position:relative;width:100px;background-color:#89BE3A;text-align:left;visibility:hidden;z-index:5;padding:10px;"><cfinclude template="put_shopmenus.cfm"></div>
      
<div id="sec2" style="position:relative;width:100px;background-color:#89BE3A;text-align:left;visibility:hidden;z-index:5;padding:10px;">[ another menu ]</div>

What seems to be the problem here?  Is there any way to have IE6 recogize the z-index attribute and NOT push down the content like that?  Or is the problem with visibility:hidden?  Please advise.

Thanks,
- Yvan



IDEASDesignAsked:
Who is Participating?
 
ee_autoCommented:
Question PAQ'd, 500 points refunded, and stored in the solution database.
0
 
ellandrdCommented:
the z-index is set to 5 for both - have you tried changing the z-index to something higher for any of them.

I cannot test this as i only have Firefox and IE7 on my machine.

ellandrd
0
 
IDEASDesignAuthor Commented:
Yes, I've tried that already.  No difference.

- yg
0
Get your problem seen by more experts

Be seen. Boost your question’s priority for more expert views and faster solutions

 
ellandrdCommented:
In Firefox it pushes the menu down a small bit too...

Let me see if i can fix this for Firefox...
0
 
ellandrdCommented:
a quick hack - set the margin-top:-10 for the div containing the main content...

its very hard to fix this without IE6 and what is really happening for you.
0
 
IDEASDesignAuthor Commented:
The menu is working and displaying fine in Firefox. Thanks anyways, though.

Any other takers?

- Yvan
0
 
mreuringCommented:
Has this problem been solved? I just had a look at it with IE6 and couldn't see anything wrong?!?
In case we're really of on different timezones and you're still working on it, I would like to draw your attention to hasLayout, it's some weird microsoft thing for IE that has the tendency to solve 9 out of 10 problems in IE not conforming with the rest of the browsers:
http://www.satzansatz.de/cssd/onhavinglayout.html

Be forewarned, position: relative doesn't always trigger hasLayout and et sometimes it does...

This was just a shot in the dark, but if it helps, it helps :)
0
 
IDEASDesignAuthor Commented:
That's because i fixed it.  I changed position:relative to position:absolute .. and the problem went away :)
0
 
mreuringCommented:
Alright, have you by any change posted a request for closing this question on Comunity Support? Seeying as you've solved it that would be only fair and will keep other developers from having to read throught the comments in vain :)
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.