Login or Sign up Help | Site Map
Connecting Tech Pros Worldwide
Bytes > Forums - Questions and Answers > HTML / CSS Forum

IE7 z-index Issue on second+ child.

Question posted by: daseone (Newbie) on March 12th, 2008 01:46 PM
Hello,

I am working on a site that uses CSS pop out menus. I am having an issue with IE7 where the first menu item shows over all other content but then everything below it goes under. It works fin in FF... After searching the net i really have yet to understand how to fix this IE bug. Any info that isn't 100% confusing would be great! :) a good example of the issue is here:

http://www.groundupfilms.com/distractions.html

Thanks in advance!
Would you like to answer this question?
Sign up for a free account, or Login (if you're already a member).
drhowarddrfine's Avatar
drhowarddrfine
Expert
4,301 Posts
March 12th, 2008
02:00 PM
#2

Re: IE7 z-index Issue on second+ child.
I don't have my Windows box on so I can't look but are you meaning an element is popping up underneath another element. iow, the other element covers up the popup one? This is a known IE bug where fixing it requires adding 'position:relative' to one of the elements but I never remember which one.
Reply
daseone's Avatar
daseone
Newbie
2 Posts
March 12th, 2008
02:47 PM
#3

Re: IE7 z-index Issue on second+ child.
Yes basically... But its weird because the first item in the pop out actually shows over other elements... here is a screen shot from IE7:

http://www.groundupfilms.com/iebug.jpg

I spent hours last night trying different z-index's and setting different things to "position:relative" and just can't seem to figure out what it is! below is the css for the menu itself.. Thanks!

Code: ( text )
  1. #menuleft a {
  2.     display:block;
  3.     width:225px;
  4.     border:none;
  5. }
  6. #menuleft a {
  7.     text-decoration:none;
  8.     padding:0;
  9.     margin:0;
  10.     font-size: 12px;
  11. }
  12. #menuleft a:link, #menuleft a:visited {
  13.     color:#000000;
  14.     width:225px;
  15. }
  16. #menuleft a:hover {
  17.     color:#FFF;
  18.     background:transparent url(/assets/templates/groundup/images/submainbg.gif) no-repeat;
  19. }
  20. #menuleft a:active {
  21.     color:#000;
  22.     background:transparent url(/nav/images/tile-blue-on-3.gif) no-repeat;
  23. }
  24. #menuleft form {
  25.     margin:0;
  26. }
  27. #menuleft li {
  28.     margin:0;
  29.     padding:0;
  30.     list-style-type:none;
  31. }
  32. #menuleft ul, #menuleft ul ul, #menuleft ul ul ul {
  33.     margin:0;
  34.     padding:0;
  35.     list-style-image:none;
  36.     width:225px;
  37. }
  38. #menuleft i {
  39.     visibility:hidden;
  40. }
  41. /* Begin CSS Popout Menus at Left */
  42. #menuleft ul li {
  43.     position:relative;
  44. }
  45. #menuleft li ul {
  46.     position:absolute;
  47.     left:200px;
  48.     top:0;
  49.     display:none;
  50.     z-index: 100;
  51. }
  52. /* Fix IE. Hide from IE Mac \*/
  53.     * html #menuleft ul li {
  54.     float:left;
  55.     height:1%;
  56. }
  57. * html #menuleft ul li a {
  58.     height:1%;
  59. }
  60. /* End */
  61.  
  62. div#menuleft ul ul, div#menuleft ul ul ul, div#menuleft ul li:hover ul ul, div#menuleft ul li:hover ul ul ul {
  63.     display:none;
  64. }
  65. div#menuleft ul li:hover ul, div#menuleft ul ul li:hover ul, div#menuleft ul ul ul li:hover ul {
  66.     display:block;
  67. }
  68. #menuleft a.home {
  69.     color:#3f0909;
  70.     background: transparent url(/assets/templates/groundup/images/homeOff.jpg) no-repeat;
  71.     width:225px;
  72.     height: 45px;
  73. }
  74. #menuleft a.home:hover {
  75.     color:#3f0909;
  76.     background: transparent url(/assets/templates/groundup/images/home.jpg) no-repeat;
  77.     width:225px;
  78.     height: 45px;
  79. }
  80. div# ul li a.projects,  ul li a.projects:hover {
  81. z-index:1;
  82. }
  83. #menuleft a.projects {
  84.     color:#3f0909;
  85.     background: transparent url(/assets/templates/groundup/images/projectsOff.jpg) no-repeat;
  86.     width:225px;
  87.     height: 41px;
  88. }
  89. #menuleft a.projects:hover {
  90.     color:#3f0909;
  91.     background: transparent url(/assets/templates/groundup/images/projects.jpg) no-repeat;
  92.     width:225px;
  93.     height: 41px;
  94. }
  95. #menuleft a.about {
  96.     color:#3f0909;
  97.     background: transparent url(/assets/templates/groundup/images/aboutOff.jpg) no-repeat;
  98.     width:225px;
  99.     height: 39px;
  100.     z-index:1;
  101. }
  102. #menuleft a.about:hover {
  103.     color:#3f0909;
  104.     background: transparent url(/assets/templates/groundup/images/about.jpg) no-repeat;
  105.     width:225px;
  106.     height: 39px;
  107. }
  108. #menuleft a.distractions {
  109.     color:#3f0909;
  110.     background: transparent url(/assets/templates/groundup/images/distractionsOff.jpg) no-repeat;
  111.     width:225px;
  112.     height: 40px;
  113. }
  114. #menuleft a.distractions:hover {
  115.     color:#3f0909;
  116.     background: transparent url(/assets/templates/groundup/images/distractions.jpg) no-repeat;
  117.     width:225px;
  118.     height: 40px;
  119. }
  120. #menuleft a.links {
  121.     color:#3f0909;
  122.     background: transparent url(/assets/templates/groundup/images/linksOff.jpg) no-repeat;
  123.     width:225px;
  124.     height: 40px;
  125. }
  126. #menuleft a.links:hover {
  127.     color:#3f0909;
  128.     background: transparent url(/assets/templates/groundup/images/links.jpg) no-repeat;
  129.     width:225px;
  130.     height: 40px;
  131. }
  132. #menuleft a.contact {
  133.     color:#3f0909;
  134.     background: transparent url(/assets/templates/groundup/images/contactOff.jpg) no-repeat;
  135.     width:225px;
  136.     height: 31px;
  137. }
  138. #menuleft a.contact:hover {
  139.     color:#3f0909;
  140.     background: transparent url(/assets/templates/groundup/images/contact.jpg) no-repeat;
  141.     width:225px;
  142.     height: 31px;
  143. }
  144. #menuleft a.submain {
  145.     color: #3f0a0b;
  146.     width: 196px;
  147.     height: 28px;
  148.     background:transparent url(/assets/templates/groundup/images/submainbg.gif) no-repeat;
  149.     padding: 13px 0px 0px 15px;
  150.     font-size: 11px;
  151.     font-weight: bold;
  152.     z-index: 1000 !important;
  153.     position:relative;
  154. }
  155. #menuleft a.submain:hover {
  156.     left: 5px;
  157.     color: #61090b;
  158.     width: 196px;
  159.     height: 28px;
  160.     background:transparent url(/assets/templates/groundup/images/submainbg.gif) no-repeat;
  161.     padding: 13px 0px 0px 15px;
  162.     font-size: 11px;
  163.     font-weight: bold;
  164.     z-index: 1000 !important;
  165.     position:relative;
  166. }
Reply
pedalpete's Avatar
pedalpete
Member
81 Posts
March 28th, 2008
11:05 PM
#4

Re: IE7 z-index Issue on second+ child.
Looks like you got this fixed.

Not sure if this is the fix you used, but I went through your code and found
Code: ( text )
  1. * html .holdshows ul li ul li {
  2.     float:left;
  3.     height:1%;
  4.     z-index: 1000;
  5. }
  6. * html .holdshows ul li ul li a {
  7.     height:1%;
  8.     z-index: 1000;
  9. }


Was that your fix?
i'm dealing with a similar issue, but your fix didn't work for me (if that is it).
http://zifimusic.com/test/broken-hovers.html

Please let us know how you got this working.

Thanks
Pete
Reply
Reply
Not the answer you were looking for? Post your question . . .
184,038 Experts ready to help you find a solution.
Sign up for a free account, or Login (if you're already a member).

Latest Articles: Read & Comment
Top HTML / CSS Forum Contributors
Quick Browse:
Communities / Archives
XML / CSS | HTML | Javascript | PHP | Perl | Visual Basic | Python | C++ / C | Java | .NET / C# / VB / XML / ASP.net | ASP
PostgreSQL | MS SQL | Oracle | IBM DB2 | MS Access | MySQL

About Bytes | Sitemap | Privacy Policy | Terms of Use
Copyright 1995-2008 Bytes.com. All rights Reserved